/* ─────────────────────────────────────────────
   Tara Hamilton Photography — mobile.css v1
   Responsive layer, PREVIEW ONLY (14 Sep 2026).
   Loads AFTER styles.css; overrides only, no edits
   to the desktop rules. Desktop >960px unchanged.
   ───────────────────────────────────────────── */

/* ─────────────── HAMBURGER + SHEET NAV ─────────────── */
.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.nav-sub-toggle { position: absolute; opacity: 0; pointer-events: none; }
.nav-burger { display: none; }
.mob-sub-label { display: none; }

@media (max-width: 760px) {
  .site-header { position: relative; padding-bottom: 1.5rem; padding-top: 0.625rem; } /* 16 Sep: top padding halved 20→10px (Richard, mobile pass) */
  .hero { padding-top: 0; padding-bottom: 0; } /* 16 Sep: hero lifted — PHOTOGRAPHY→pictures gap halved 48→24px (Richard, mobile pass) */
  .hero + .statement { padding-top: 0.5rem; padding-bottom: 1.75rem; } /* 16 Sep: pictures→text 8px; rule→Gallery gap halved 104→52px (Richard); home-only via sibling selector */
  .hero + .statement .statement-line { font-size: calc((100vw - 48px) / 10.3) !important; } /* 16 Sep: line sized FROM the image width (100vw − 48px gutters) so the text spans exactly the pictures' width, one line, any phone (Richard) */
  .hero + .statement .statement-sub { letter-spacing: 0.12em; } /* 16 Sep: Dubai line tracking cut 0.3em→0.12em so it fits ONE line on phone (Richard: "reduce the spacing dramatically") */
  .selected-work .section-title { margin-bottom: 0.75rem; } /* 16 Sep: Gallery→lede gap halved 24→12px (Richard) */
  .selected-work .lede-break { display: block; } /* 16 Sep: lede splits "My photography is about the / art of connection" on phone (Richard); inline on desktop */
  .selected-work .lede-break::first-letter { text-transform: uppercase; } /* 16 Sep: line two opens with a capital "Art" on phone (Richard); desktop inline span ignores ::first-letter */
  .selected-work { padding-bottom: 0.6875rem; } /* 16 Sep: optical match — tiles letterbox ~13px cream under the last row's photos, so padding 24→11 makes the SEEN gap above the editorial = the 24px grid gap (pixel-measured in render) */
  .full-bleed { height: auto; min-height: 0; } /* 16 Sep: phone box follows the photo's own 1920/1036 aspect — kills the cream letterbox bands the 50vh rule created; no crop (Richard's gap-consistency ask) */
  header + .category-section { padding-top: 21px; } /* 16 Sep portfolio phone: wordmark→Equine Elegance gap 56→45px (−20%), whole page below rides up as one unit (Richard) */
  .t-the { display: none; } /* 16 Sep: phone reads "Farrier & Dentist" on one line; laptop keeps "The Farrier & the Dentist" (spans inline ≥761) — Richard's recommendation, Tara to bless */
  #farrier-dentist .category-title { letter-spacing: 0.08em; } /* 16 Sep: phone-only tracking trim so the shortened title holds ONE line at 390 */
  .category-section .tile img { transition: transform 0.35s ease; } /* 16 Sep phone: portfolio tiles tap-zoom like the equestrian frames (Richard: "make them all click and zoom… not rushing back to the top") — tiles de-anchored from href="#" same day */
  .category-section .tile img:hover { transform: scale(1.04); }
  .about-hero { padding-bottom: 0; padding-top: 0; } /* 16 Sep about phone: photo→statement gap 96→48→24→10px final (Richard: "reduce padding in to 10px to the photo of tara"); wordmark→heading gap 24px = heading→body gap — hero top 0, hero bottom 0 */
  /* 16 Sep later: phone heading override (26px/600) REMOVED at Richard's request — "too bold, liked it subtler, same as website"; phone now inherits the website rule clamp(1.4rem,2.4vw,1.85rem)/400 */
  .about-hero .cta-heading { font-size: 1.96rem; } /* 16 Sep: phone size +40% (22.4→31.36px), weight stays 400 (Richard: "increase the text size by 40%") */
  .about-hero-text p, .about-hero-text .body p { font-size: 0.9rem; } /* 16 Sep: phone about body = 14.4px, same as the home cta-sub "Send me a photograph…" (Richard); .body chain needed to out-specify the base rule */
  .about-hero + .page-statement { padding-top: 0.625rem; padding-bottom: 1.5rem; } /* 16 Sep: statement top 32→16→8→10px final (photo→statement = 10px total, Richard); statement→back-to-top 72→36 (bottom 48→24) */
  .page-statement + .back-to-top { margin-top: 0.75rem; } /* 16 Sep: bar top 24→12, completing the statement→bar 50% cut */
  .in-frame-blurb p { font-size: 0.9rem; } /* 17 Sep: phone in-frame blurb text 16.8→14.4px — both blocks (About the prints + Visualize your artwork), matches about body (Richard) */
  .in-frame-page > .statement-rule:first-of-type { display: none; } /* 17 Sep: phone removes the top grey line between wordmark and first image (Richard); laptop keeps it. Line's margins go with it — gap above first image tightens ~49px */
  .in-frame-page { padding-top: 0; } /* 17 Sep: wordmark→if-1 gap = home wordmark→hero gap (24px, measured); was 40px (Richard consistency ask) */

  /* Centred header (15 Sep, Richard): the wordmark hangs off the centre
     line and the burger sits centred beneath it. wordmark-stack goes
     block so the burger drops to its own line instead of sharing the
     wordmark's inline row (which pushed the wordmark off-centre). */
  .wordmark-stack { display: block; }
  .wordmark-sub { margin-bottom: 0; }

  .nav-burger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    margin-top: 0.6rem;
    cursor: pointer;
  }
  .nav-burger span { display: block; width: 22px; height: 1px; background: var(--ink); }

  .primary-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--rule);
    flex-direction: column;
    align-items: center;
    gap: 1.15rem;
    padding: 1.75rem 1.5rem 2.25rem;
    font-size: 0.95rem;
    letter-spacing: 0.22em;
    z-index: 200;
  }
  .nav-toggle:checked ~ .primary-nav { display: flex; }

  .primary-nav .has-dropdown { width: 100%; }
  /* compact accordion: top-level row toggles the six group links */
  .primary-nav .has-dropdown > a { display: none; }
  .nav-sub-toggle { position: absolute; opacity: 0; pointer-events: none; }
  .mob-sub-label {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 0.5em;
    cursor: pointer;
  }
  .mob-sub-label::after { content: '+'; font-size: 0.85em; }
  .nav-sub-toggle:checked + .mob-sub-label::after { content: '\2013'; }
  .primary-nav .dropdown {
    position: static;
    transform: none;
    display: none;
    flex-direction: column;
    border: none;
    padding: 0.6rem 0 0;
    min-width: 0;
    gap: 0.7rem;
  }
  .nav-sub-toggle:checked ~ .dropdown { display: flex; }
  .primary-nav .dropdown-label { justify-content: center; padding: 0; font-size: 0.8rem; }
  .primary-nav .dropdown-label::before,
  .primary-nav .dropdown-label::after { display: none; }

  /* 17 Sep portfolio phone (Richard, approved from pixel-verified mock):
     wordmark hidden on PORTFOLIO only; Equine Elegance + blurb promoted to
     the wordmark slot — EE text bottom level with home's TARA HAMILTON
     bottom (both scan at dev-row 126/127); first image held at the hero
     line (top 126.3px = home hero + In Frame if-1). */
  header:has(+ #portrait) { display: none; }
  #portrait { padding-top: 26px; }
  #portrait .category-title { margin-bottom: 0; }
  #portrait .category-blurb { margin-top: 2px; margin-bottom: 0; line-height: 1.1; }
  #portrait .category-grid { margin-top: 30.2px; }

  /* 17 Sep contact phone (Richard): subject placeholder "A session, a
     commission, prints for the home…" is 353px wide at 16px — cut off on
     360-390px phones (input has only 312-342px). Placeholder-only shrink
     to 0.85rem (~300px): fits 360px with slack. Typed text stays 16px.
     Single-line inputs can't wrap, so two lines wasn't an option. */
  #subject::placeholder { font-size: 0.85rem; }
}

/* ─────────────── TABLET (≤960) — fluidise fixed-pixel grids ─────────────── */
@media (max-width: 960px) {
  #dogs .dc-grid { grid-template-columns: repeat(3, 1fr); max-width: 100%; }
  #dogs .dc-tile { height: auto; aspect-ratio: 2 / 3; }

  #dogs-2 .dg-grid,
  #dogs-2 .dg-row-bottom { grid-template-columns: repeat(2, 1fr); max-width: 680px; }
  #dogs-2 .dg-grid .dg-tile,
  #dogs-2 .dg-row-bottom .dg-tile { width: auto; height: auto; aspect-ratio: 307 / 413.21; }
  #dogs-2 .dg-row-bottom .dg-tile-wide { grid-column: span 2; width: auto; aspect-ratio: 638 / 413.21; }

  #portraits .in-frame-row { gap: 1rem; }
  #portraits .in-frame-col { width: auto; flex: 1 1 0; }
  #portraits .in-frame-tile { width: 100%; height: auto; aspect-ratio: 1 / 1; flex: auto; }
  #portraits .in-frame-portrait-wrap { width: auto; height: auto; flex: 1.5 1 0; aspect-ratio: 540 / 740; }

  .in-frame-gallery .in-frame-row:first-of-type { grid-template-columns: 1fr auto 1fr; }

  /* Empty-row tiles: drop the desktop min-height at mobile widths. Through
     the 3:2 aspect-ratio it transfers to a 540px min-width, which blows the
     layout viewport wide and pushes the fixed bottom tab bar off-screen.
     With it gone every row sizes to the column like row 1. */
  .in-frame-row-empty .tile { min-height: 0; }

  /* Standalone rows (2 and 3) sit directly on the article; row 1 sits inside
     .in-frame-gallery which adds a second 1.5rem inset. Mirror it so every
     tile renders the same width. */
  .in-frame-page > .in-frame-row { padding: 0 1.5rem; }

  .about-hero { grid-template-columns: 1fr; gap: 2rem; }
  .about-hero-text { justify-content: center; text-align: center; }
  .about-hero-text .body { max-width: 560px; margin: 0 auto; }
}

/* ─────────────── PHONE (≤640) ─────────────── */
@media (max-width: 640px) {
  /* Footer social row on one line at phone width (WhatsApp added 15 Sep).
     Type sized so the nowrap row fits 320px phones — a wider nowrap row
     inflates the layout viewport and causes sideways pan + bottom bar. */
  .footer-links { font-size: 0.62rem; letter-spacing: 0.02em; white-space: nowrap; }
  /* sub-340px phones: let the row wrap rather than inflate the viewport */
  @media (max-width: 340px) { .footer-links { white-space: normal; } }
  /* squares + portraits: two across */
  .selected-work .grid,
  .category-grid,
  .category-grid.cols-3,
  .category-grid.cols-3.portraits-grid,
  .category-grid.cols-4 { grid-template-columns: repeat(2, 1fr); max-width: 100%; }

  /* exactly-three-tile grids (Equine Elegance etc.): stack, no orphan */
  .category-grid:has(> .tile:nth-child(3)):not(:has(> .tile:nth-child(4))) {
    grid-template-columns: 1fr;
    max-width: 560px;
  }

  /* landscape work: one across */
  #partner .category-grid.cols-3,
  #farrier-dentist .category-grid.cols-3 { grid-template-columns: 1fr; max-width: 560px; }
  #equestrian-sport .es-row { grid-template-columns: 1fr; max-width: 560px; }
  #dogs .dc-grid { grid-template-columns: 1fr; max-width: 480px; }
  #dogs-2 .dg-grid,
  #dogs-2 .dg-row-bottom { max-width: 480px; }
  /* bottom row (5, wide 6, 7) stacks: a 2-col layout leaves an empty
     cell beside slot 7 because the wide tile spans the full row. */
  #dogs-2 .dg-row-bottom { grid-template-columns: 1fr; }
  #dogs-2 .dg-row-bottom .dg-tile-wide { grid-column: auto; }

  /* In Frame: single column, divider gone */
  #portraits .in-frame-row { flex-direction: column; align-items: center; }
  #portraits .in-frame-col { width: 100%; max-width: 420px; flex: auto; }
  #portraits .in-frame-portrait-wrap { width: 100%; max-width: 420px; flex: auto; }
  .in-frame-row { grid-template-columns: 1fr; gap: 1.25rem; }
  .in-frame-rule { display: none; }
  .in-frame-gallery .in-frame-row:first-of-type { grid-template-columns: 1fr; }
  .in-frame-gallery { padding: 0; } /* 17 Sep: all six In Frame images = home hero width (100vw − 48px = 342px at 390) — drops the gallery's second inset (Richard) */
  .in-frame-page > .in-frame-row { padding: 0; } /* 17 Sep: rows 2–3 freed to match; overrides the ≤960 mirror-padding rule (same specificity, later source wins) */

  /* type + spacing steps */
  .category-blurb { font-size: 1.25rem; }
  .wordmark-sub { font-size: 0.95rem; letter-spacing: 0.14em; }
  .licensing-rule { padding: 1.5rem 1.25rem; }
  .form-submit { align-self: stretch; }
  .category-section { padding: 2rem 1.25rem; }
  .category-section + .category-section { padding-top: 2.5rem; }
}

/* ─────────────── BOTTOM TAB BAR (15 Sep, Richard: Airbnb-style) ───────────────
   Permanent five-tab bar at ≤760: Home, Portfolio, About, In Frame, Contact.
   Icon over a 10px label; active tab in the site gold. Replaces the burger
   sheet as the mobile nav. Appended LAST so these rules win source order
   over the burger rules above (equal-specificity trap, skill rule 8a). */
.bottom-nav { display: none; }
.client-key { display: none; }

@media (max-width: 760px) {
  .about-hero { row-gap: 1rem; } /* 16 Sep: phone text→photo gap 32→16 (−50%, Richard); must live AFTER the ≤960 block's `gap: 2rem` shorthand or it loses */
  .bottom-nav {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 300;
    background: var(--bg);
    border-top: 1px solid var(--rule);
    box-shadow: 0 -4px 18px rgba(26, 26, 26, 0.08);
    padding: 0.35rem 0.25rem calc(0.35rem + env(safe-area-inset-bottom, 0px));
  }
  .bottom-nav a {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 0.25rem 0 0.1rem;
    color: var(--slate);
    text-decoration: none;
    font-family: var(--sans);
    font-size: 0.625rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .bottom-nav a svg { width: 22px; height: 22px; }
  .bottom-nav a[aria-current="page"] { color: #B8860B; }

  /* page content clears the permanent bar */
  body { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }

  /* the bar is the nav now: burger + sheet retire on mobile */
  .nav-burger { display: none; }
  .primary-nav { display: none; }
  .nav-toggle:checked ~ .primary-nav { display: none; }

  /* Client Area door: quiet key, top-right, wordmark stays centred (15 Sep) */
  .site-header { position: relative; }
  .client-key {
    display: flex;
    position: absolute;
    top: 21px; /* 15 Sep: horseshoe bottom edge level with the top of the "n" in Hamilton; same right-hand vertical line */
    right: 0.75rem;
    z-index: 5; /* above the centred wordmark stack, which paints over auto-z positioned siblings */
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    color: #B8860B; /* trial 15 Sep: same gold as bottom-bar active tab */
  }
  .client-key svg { width: 20px; height: 20px; }
}

/* Morphing door: gold rule hidden in pre-install state, shows after flip (17 Sep, Tara-approved). */
.client-door-type.door-morph .client-door-rule { display: none; }


/* ── Live-promotion order replicas (18 Sep): preview achieved phone tile order
   via HTML source order; live keeps the laptop source order (16 Sep sign-off),
   so the approved phone order is applied here instead. Phone-only; the desktop
   grid is untouched. ── */
@media (max-width: 760px) {
  /* Home gallery: visual [3,2,1,4,5,8,7,6] */
  .selected-work .grid .tile:nth-child(1) { order: 3; }
  .selected-work .grid .tile:nth-child(2) { order: 2; }
  .selected-work .grid .tile:nth-child(3) { order: 1; }
  .selected-work .grid .tile:nth-child(4) { order: 4; }
  .selected-work .grid .tile:nth-child(5) { order: 5; }
  .selected-work .grid .tile:nth-child(6) { order: 8; }
  .selected-work .grid .tile:nth-child(7) { order: 7; }
  .selected-work .grid .tile:nth-child(8) { order: 6; }
  /* Portfolio Partner: visual [3,6,5,2,1,4] */
  #partner .category-grid .tile:nth-child(1) { order: 5; }
  #partner .category-grid .tile:nth-child(2) { order: 4; }
  #partner .category-grid .tile:nth-child(3) { order: 1; }
  #partner .category-grid .tile:nth-child(4) { order: 6; }
  #partner .category-grid .tile:nth-child(5) { order: 3; }
  #partner .category-grid .tile:nth-child(6) { order: 2; }
  /* Portfolio Eyes: visual [1,8,6,7,2,3,5,4] */
  #eyes .category-grid .tile:nth-child(1) { order: 1; }
  #eyes .category-grid .tile:nth-child(2) { order: 5; }
  #eyes .category-grid .tile:nth-child(3) { order: 6; }
  #eyes .category-grid .tile:nth-child(4) { order: 8; }
  #eyes .category-grid .tile:nth-child(5) { order: 7; }
  #eyes .category-grid .tile:nth-child(6) { order: 3; }
  #eyes .category-grid .tile:nth-child(7) { order: 4; }
  #eyes .category-grid .tile:nth-child(8) { order: 2; }
  /* Portfolio Equine Art: visual [ea-1, ea-5, ea-2, ea-4, ea-3]; cols flatten via display:contents */
  #portraits .in-frame-col { display: contents; }
  #portraits .in-frame-tile:has(img[src*="ea-1"]) { order: 1; }
  #portraits .in-frame-tile:has(img[src*="ea-5"]) { order: 2; }
  #portraits .in-frame-tile:has(img[src*="ea-2"]) { order: 3; }
  #portraits .in-frame-tile:has(img[src*="ea-4"]) { order: 4; }
  #portraits .in-frame-tile:has(img[src*="ea-3"]) { order: 5; }
}