/* aph-athletic-fashion — SITE-ONLY visual refinements.
   Never a fleet-shared file: this is linked from THIS site's pages only,
   loaded after base.css + the retail skin, so it wins ties without editing
   either shared file. Requested by the client 2026-09-01/02 — see
   SITE-CLAUDE.md for the full changelog behind each rule below. */

:root{
  /* Navy hero tint, same 3-stop shape retail.css already uses (.55/.25/.62),
     just recolored from warm black (25,20,15) to the brand's new navy-black
     dark token (see config.php color_dark #141B33) so the hero reads as part
     of the same palette instead of a leftover warm skin default. */
  --hero-overlay: linear-gradient(180deg, rgba(15,21,42,.58), rgba(15,21,42,.24) 50%, rgba(15,21,42,.66));
}

/* ---- Hero banner: show the whole illustration, never crop the sides ---- */
/* base.css's .hero-media img is object-fit:cover, which fills whatever box
   the .hero section happens to be (min-height:76vh, full viewport width) —
   on any normal desktop/laptop screen that box lands somewhere around 2:1,
   narrower than this photo's real 3:1 shape, so cover was cropping the
   LEFT/RIGHT edges to fill it: the client's actual complaint ("I want to see
   whole of the cartoon girls" — the outer two women were the first cut).
   Nothing in the SOURCE was ever cropped (see hero.jpg's own build note in
   SITE-CLAUDE.md) — this was purely how the box was filling, so the fix is
   here, not a re-crop. contain guarantees the full width renders on every
   device, letterboxed top/bottom instead of cropped left/right. The
   background on .hero-media fills that letterbox space with the same navy
   the overlay already uses, so the bars read as a deliberate frame rather
   than empty gaps behind a smaller photo. */
.hero-media{background:#141B33}
.hero-media img{object-fit:contain}

/* ---- Bigger logo, header + footer ---- */
/* Fleet default is 48px header / 40px mobile / 32px footer (base.css) — reads
   small for this brand's hexagon patch mark. */
.brand img{height:66px}
.foot-logo{height:46px}
@media (max-width:860px){ .brand img{height:54px} }

/* ---- Breathing room: eyebrow badge ("header in a blue bubble") to the
   heading/text that follows it ---- */
/* First pass (2026-09-02) only fixed this inside .hero; client feedback made
   clear the same tight gap was true everywhere else .eyebrow is used (every
   section on every page opens with one). Generalized to plain .eyebrow so
   it's fixed everywhere at once instead of page by page. */
.eyebrow{margin-bottom:1rem}

/* ---- Hero eyebrow badge: black text, not teal ---- */
/* base.css sets .hero .eyebrow{color:var(--accent)} — light-colored text
   meant to read against a photo. retail.css's plain .eyebrow ALSO fills the
   badge with a solid var(--accent) background (the pill shape used
   everywhere else on the site), and that background rule isn't touched by
   the hero-specific one, so this badge has been rendering teal text on a
   teal pill this whole time — legible only because of the dark text-shadow
   base.css adds as a safety net for text-over-photo. Client asked for the
   text to just be black. Matches every OTHER eyebrow on the site already
   (retail.css's own default is color:var(--dark)) — this makes the hero
   one consistent with the rest instead of the one exception, and reads
   far more clearly against the solid accent pill: measured 9.19:1.
   2026-09-10: that same text-shadow (dark blur, meant to help LIGHT text
   read over a variable photo backdrop) is dead weight now that the text is
   dark AND sitting on its own solid, opaque pill background, not the photo
   directly — a dark shadow behind already-dark text just muddies the
   letter edges. Client asked for it gone; canceled explicitly rather than
   left in as harmless, since it visibly was not. */
.hero .eyebrow{color:var(--dark);text-shadow:none}

/* ---- Product tiles + featured photos: show the whole piece, with real
   breathing room ---- */
/* retail.css bleeds .tile > img to the card's OUTER edge (negative margin,
   width:calc(100% + 3rem)) and hard-crops it to 4:3 — right for a landscape
   source shown edge-to-edge, wrong for us twice over: every APH product
   photo is a square (1:1) render, and the client asked the product itself to
   read smaller/more "zoomed out" within its frame, not fill it. Box canceled
   from the bleed to a plain inset (was 100%+3rem, now 84%); the source is
   never cropped (aspect-ratio matches the 1:1 photos).
   2026-09-02 (later): the matted look this rule used to add — padding +
   #f7f4ee background around each photo — read as an unwanted "border" per
   the client and was REMOVED; the box-size reduction and uncrop stay, the
   photo just sits directly in its (smaller) box again with no mat. */
.tile > img{
  margin:0 auto 1.1rem;
  width:84%;
  max-width:84%;
  /* height:auto is NOT optional here — every <img> on this site carries HTML
     width/height attributes (1254x1254, for CLS), and a browser's own
     presentational hint for height keeps applying to whichever box property
     this rule DOESN'T explicitly set. Override width without also writing
     height:auto and height stays pinned to the raw 1254px attribute value —
     a definite height leaves aspect-ratio nothing to fill in, so it's
     silently ignored, and `.tile{overflow:hidden}` then clips that oversized
     box down to whatever the surrounding text pushes the card to. That
     clipping was quietly cropping MORE off every tile photo than the old 4:3
     rule alone did — likely the real reason the first two "zoom out" passes
     (ratio, then a smaller box) never looked like enough: this was still
     cropping underneath both of them. Documented trap, site-factory/CLAUDE.md
     "Layout standards": "an explicit height beats aspect-ratio." KEEP THIS
     even though the padding/background it originally shipped alongside was
     removed — it is an unrelated correctness fix, not part of the "border" look. */
  height:auto;
  aspect-ratio:1/1;
  object-fit:contain;
  display:block;
}
/* The large single "flagship" photo on each product page (.split, always
   paired with text beside it — distinct from .tile, which sits in a grid
   next to OTHER photos). Capped at 340px/260px from an earlier "zoom out"
   round; client asked specifically for THESE (image-next-to-text, not
   grid) to read bigger. Fleet default is 420px/320px (base.css) — sized
   past that, not just back to it, since "bigger" was the explicit ask.
   The .9fr/.1fr .split column comfortably holds 480px at a normal 1140px
   wrap (~627px column), so this doesn't crowd the text beside it. */
.split img{
  max-width:calc(480px * var(--photo-ratio,1));
}
@media (max-width:860px){
  .split img{max-width:calc(340px * var(--photo-ratio,1))}
}

/* ---- Consistent space around every button ---- */
.btn{margin-top:.5rem;margin-bottom:.6rem}
.cta-row{margin-top:1.7rem;margin-bottom:1rem;row-gap:1rem}
.tile p:last-child{margin-top:.9rem}
.lead-form .fine{margin-top:1.1rem}
.faq{margin-top:2rem}
/* A lone "See it →"-style link sitting in its own <p> right after a .btn
   row (product pages, tile captions) needs the same gap below the button
   that .cta-row already gets — .btn's own margin-bottom (above) covers most
   of these; this catches the plain-paragraph case that follows one directly. */
.btn + p, .cta-row + p{margin-top:1rem}