/* ============================================================================
   kina-ink.com — CUSTOM OVERRIDES (hand-maintained patch layer)
   ----------------------------------------------------------------------------
   This file is loaded AFTER the original built stylesheet (vendor-*.css).
   The vendor file is the untouched Remixer/Vite build output; everything we
   change by hand lives here so the patch layer is visible in one place.

   ⚠  The site is a compiled build with NO source available. If it is ever
      re-exported from the Remixer/DreamHost builder, THIS FILE IS LOST and
      every change must be re-applied. See CHANGES.md for the full history,
      rationale, and the matching JS/HTML edits (which can't live in CSS).
   ============================================================================ */

/* [1] Mobile horizontal overflow fix. CHANGES.md #1.
   .works-section is a flex child wrapping a CSS-columns masonry; with width:auto
   it grew to max-content (~942px) inside a ~390px viewport. Pin it to 100%. */
.works-section { width: 100%; }

/* [2] Selected Works filters: wrap instead of hidden horizontal-scroll. CHANGES.md #4.
   The original used flex-nowrap + overflow-x:auto with a HIDDEN scrollbar, so
   off-screen filters were undiscoverable. Let them wrap to multiple rows. */
.works-filters { flex-wrap: wrap; overflow-x: visible; scroll-snap-type: none; }

/* [3] Selected Works masonry items must be block, not inline-block. CHANGES.md #5.
   CSS multi-column can't distribute inline-block items cleanly; with few items
   (e.g. the 3 "Reverie" works) they stacked 2+1 instead of forming a clean row. */
.works-masonry-item { display: block; }

/* [4] Hero: shrink the full-screen hero to a 400px band, frame the moth, and
   hide the overlay caption. CHANGES.md #6 (hero) / #7 (caption).
   The hero image itself was repointed to /assets/hero-luna-*.jpg in index.html
   AND in the JS bundle's image map (see CHANGES.md) — that part is not CSS. */
#top { height: 400px; }
#top img { object-position: center 42%; }
#top .bottom-8 { display: none; }            /* "Painter & Visual Artist / Ottawa" caption */

/* [5] Section reorder + consistent gutters. CHANGES.md #8.
   Desired visual order:
     hero → Selected Works → divider → About(heading,bio,medium/training)
       → Artist Statement → Exhibitions & Events → Education → Newsletter → Contact
   "Exhibitions & Events" is the 4th block INSIDE #about, and the Artist Statement
   (#intro) is a separate top-level section — so we promote #about's children into
   the <main> flexbox with display:contents, then use `order` to interleave #intro
   between About's "training" (3rd) and "exhibitions" (4th) blocks.
   NOTE: this is a VISUAL reorder only; DOM/source order is unchanged, so screen
   readers and search engines still read the original order. */
#top { order: 0; }
#works { order: 2; }
main > div[aria-hidden="true"] {            /* the decorative divider between Works and About */
  order: 4;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}
#about { display: contents; }              /* promote About's blocks into <main>'s flexbox */
#about > div {
  box-sizing: border-box;
  width: 100%;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding-mobile);
  padding-right: var(--container-padding-mobile);
}
#about > div:nth-child(1) { order: 6;  padding-top: var(--section-spacing-mobile); }   /* "About / The Artist" */
#about > div:nth-child(2) { order: 8; }                                                /* photo + bio */
#about > div:nth-child(3) { order: 10; }                                               /* medium / training */
#intro                    { order: 12; }                                               /* ← Artist Statement */
#about > div:nth-child(4) { order: 14; }                                               /* Exhibitions & Events */
#about > div:nth-child(5) { order: 16; padding-bottom: var(--section-spacing-mobile); }/* Education */
#newsletter { order: 18; }
#contact    { order: 20; }

/* Consistent container for the full-bleed sections so every section's content
   aligns to the same left/right edges (matches the works/about 1400px container).
   CHANGES.md #9. */
#intro > div, #newsletter > div, #contact > div {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 768px) {
  #about > div {
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
  }
  main > div[aria-hidden="true"] {                   /* divider has inline 20px padding → !important */
    padding-left: var(--container-padding) !important;
    padding-right: var(--container-padding) !important;
  }
}

/* [6] Readability: bump small text by ~2px. CHANGES.md #10.
   Most small text uses INLINE rem font-sizes (set in the JS, not Tailwind
   classes), so we override via [style*=] attribute selectors. The few that use
   utility classes (text-[Npx]) are bumped directly. */
[style*="font-size: 0.5rem"]  { font-size: 0.625rem !important; }  /*  8px → 10px */
[style*="font-size: 0.55rem"] { font-size: 0.675rem !important; }
[style*="font-size: 0.6rem"]  { font-size: 0.725rem !important; }
[style*="font-size: 0.62rem"] { font-size: 0.745rem !important; }
[style*="font-size: 0.65rem"] { font-size: 0.775rem !important; }
[style*="font-size: 0.72rem"] { font-size: 0.845rem !important; }
[style*="font-size: 0.75rem"] { font-size: 0.875rem !important; }
[style*="font-size: 0.8rem"]  { font-size: 0.925rem !important; }
[style*="font-size: 0.82rem"] { font-size: 0.945rem !important; }
[style*="font-size: 0.85rem"] { font-size: 0.975rem !important; }
.text-\[9px\]  { font-size: 11px; }
.text-\[10px\] { font-size: 12px; }
.text-\[11px\] { font-size: 13px; }
.text-\[13px\] { font-size: 15px; }
@media (min-width: 768px) {
  .md\:text-\[11px\] { font-size: 13px; }
  .md\:text-\[13px\] { font-size: 15px; }
}