/* ==========================================================================
   ATLETIKA — Page: Home
   Layout glue only. Every section composes existing components
   (.section, .section-head, .rail, .media, .btn, .usp, .t-*, .reveal);
   this sheet positions them. Tokens only — the few page-specific
   dimensions are declared once below as page-scoped properties so they
   can be audited in one place (see handoff notes for token requests).
   ========================================================================== */
.home {
  /* Spec-literal values with no global token yet — flagged for tokens.css. */
  --home-hero-max-h:   900px;                 /* hero cap ≥768: min(90vh, 900px)   */
  --home-hero-focus:   center 30%;            /* object-position on the hero crop  */
  --home-hover-scale:  1.02;                  /* tile hover zoom                    */
  --home-hero-measure: 42ch;                  /* hero lede max width               */
  --home-copy-measure: 48ch;                  /* editorial copy max width          */
  --home-split:        55fr 45fr;             /* editorial image / text            */
}

/* ==========================================================================
   HEADER (overlay variant) — homepage only
   The header is fixed at top:0, but the announcement bar sits above it in
   the flow and scrolls away. home.js sets --hdr-top to the bar's still
   visible height (36 → 0 over the first 36px of scroll) so the header
   never covers the bar and lands at the viewport top exactly when the
   bar leaves.
   ========================================================================== */
.home .header--overlay { top: var(--hdr-top, 0px); }

/* ==========================================================================
   1. HERO — full-bleed, LCP
   Height is reserved with min-height (independent of the image) so CLS
   is 0. The image is absolutely positioned inside and fades in on load.
   ========================================================================== */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 100svh;
  overflow: hidden;
  background: var(--c-surface-sunken);    /* holds the space while loading */
  color: var(--c-on-inverse);
}
@media (min-width: 768px) {
  .hero { min-height: min(90vh, var(--home-hero-max-h)); }
}

.hero__picture,
.hero__picture img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero__picture img {
  object-fit: cover;
  object-position: var(--home-hero-focus);
  opacity: 0;
  transition: opacity var(--dur-reveal) var(--ease-reveal);
}
.hero__picture img.is-loaded,
.no-js .hero__picture img { opacity: 1; }

/* Bottom-weighted scrim keeps the copy legible on any crop. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--scrim-50);
  pointer-events: none;
}

.hero__body {
  position: relative;
  z-index: var(--z-raised);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-4);
  padding-block: calc(var(--header-h) + var(--s-8)) var(--s-12);
}
@media (min-width: 768px) {
  .hero__body { padding-block-end: var(--s-16); }
}
.hero__body .t-eyebrow { color: inherit; }
.hero__lede { max-width: var(--home-hero-measure); }
.hero__actions { --cluster-gap: var(--s-6); margin-block-start: var(--s-2); }

/* ==========================================================================
   2 & 5. PRODUCT RAILS
   .rail wraps the section head (with arrows) and the track, so the arrows
   can find their track without ids. Skeleton tiles reserve the row until
   home.js renders the cards; they are hidden without JS in favour of the
   <noscript> "View all" link.
   ========================================================================== */
.rail .section-head .rail__arrows { align-self: center; }
.rail__arrows .btn-icon:active { opacity: 0.4; }

.rail__ph { display: block; }
.no-js .rail__ph { display: none; }
.rail__ph .skeleton { aspect-ratio: var(--ratio-product); }
.rail__fallback {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

/* ==========================================================================
   3. CATEGORIES — 5 tiles
   2 columns → 5 at 1024. The fifth tile spans the row below 1024 and takes
   the hero ratio so it reads as a landscape band rather than a giant 3:4.
   ========================================================================== */
.cats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-1);
}
.cats__tile:nth-child(5) {
  grid-column: span 2;
  aspect-ratio: var(--ratio-hero);
}
@media (min-width: 1024px) {
  .cats { grid-template-columns: repeat(5, 1fr); }
  .cats__tile:nth-child(5) {
    grid-column: auto;
    aspect-ratio: var(--ratio-product);
  }
}

.cats__tile picture,
.cats__tile img {
  width: 100%;
  height: 100%;
}
.cats__tile img {
  object-fit: cover;
  transition: transform var(--dur-reveal) var(--ease-reveal);
}
.cats__tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--scrim-30);
  pointer-events: none;
}
/* Covering link carries the visible label, so the link text is the label. */
.cats__link {
  position: absolute;
  inset: 0;
  z-index: var(--z-raised);
  display: flex;
  align-items: flex-end;
  padding: var(--s-4);
  color: var(--c-on-inverse);
}
.cats__label {
  transition: opacity var(--dur-fast) var(--ease-standard);
}
.cats__link:active .cats__label { opacity: 0.6; }
/* The tile clips overflow, so the ring is drawn inside the edge. */
.cats__link:focus-visible { outline-offset: calc(var(--focus-offset) * -1); }
@media (hover: hover) and (pointer: fine) {
  .cats__tile:hover img,
  .cats__tile:focus-within img { transform: scale(var(--home-hover-scale)); }
}

/* ==========================================================================
   4. EDITORIAL — brand statement
   ========================================================================== */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-8);
}
@media (min-width: 1024px) {
  .split {
    grid-template-columns: var(--home-split);
    gap: var(--s-10);
    align-items: center;
  }
}
.split__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-4);
  max-width: var(--home-copy-measure);
  padding: var(--gutter);
}
.split__body .btn { margin-block-start: var(--s-2); }
.split__copy p + p { margin-block-start: var(--s-4); }

/* ==========================================================================
   7. LOOKBOOK STRIP — @atletikawear
   4 tiles (2×2 → 4×1 at 768) → 6 at 1024. Square crops of 3:4 media.
   ========================================================================== */
.strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-1);
}
.strip__tile:nth-child(n + 5) { display: none; }
@media (min-width: 768px) {
  .strip { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1024px) {
  .strip { grid-template-columns: repeat(6, 1fr); }
  .strip__tile:nth-child(n + 5) { display: block; }
}
.strip__tile { aspect-ratio: 1; }
.strip__link {
  display: block;
  width: 100%;
  height: 100%;
}
.strip__link:focus-visible { outline-offset: calc(var(--focus-offset) * -1); }
.strip__tile picture,
.strip__tile img {
  width: 100%;
  height: 100%;
}
.strip__tile img {
  object-fit: cover;
  transition: transform var(--dur-reveal) var(--ease-reveal),
              opacity   var(--dur-fast)   var(--ease-standard);
}
.strip__link:active img { opacity: 0.8; }
@media (hover: hover) and (pointer: fine) {
  .strip__link:hover img,
  .strip__link:focus-visible img { transform: scale(var(--home-hover-scale)); }
}