/* ============================================================
   QUAD™ — pages.css
   Page-specific styles. Mobile-first.
   ============================================================ */

/* ============================================================
   index.html
   ============================================================ */

/* ---------- Hero — campaign reel ---------- */

.home-hero {
  position: relative;
  min-height: 100svh;
  background: var(--pine);
  color: var(--chalk);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  padding-block: var(--nav-height) var(--space-5);
}

/* Campaign reel: four full-bleed loops, one visible at a time.
   A cut is a class toggle — deliberately no transition (hard
   cut). Swapping a slide's redbox for a real <video> changes
   nothing here. */
.home-hero__reel {
  position: absolute;
  inset: 0;
}

.home-hero__slide {
  position: absolute;
  inset: 0;
  visibility: hidden;
}

.home-hero__slide.is-active {
  visibility: visible;
}

/* keep the placeholder's label clear of the fixed nav */
.home-hero__slide .redbox {
  padding-top: calc(var(--nav-height) + var(--space-3));
}

/* pine scrim keeps the wordmark legible over any frame of any loop */
.home-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgb(30 58 42 / 0.85),
    rgb(30 58 42 / 0.1) 45%,
    rgb(30 58 42 / 0.3)
  );
}

.home-hero__content {
  position: relative;
  z-index: 2;
}

.home-hero__wordmark {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(4.5rem, 19vw, 22rem);
  line-height: 0.85;
  letter-spacing: -0.03em;
}

.home-hero__wordmark sup {
  font-size: 0.22em;
  vertical-align: 1.6em;
  letter-spacing: 0.02em;
}

.home-hero__meta {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

/* ---------- Drop strip ---------- */

.drop-strip {
  background: var(--pine);
  color: var(--chalk);
  border-top: 1px solid rgb(246 246 244 / 0.16);
}

.drop-strip__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  padding-block: var(--space-3);
}

.drop-strip__link {
  position: relative;
}

.drop-strip__link:hover {
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

.countdown {
  color: var(--signal);
  font-variant-numeric: tabular-nums;
}

/* ---------- Featured — editorial to grid ---------- */

.feature__head {
  margin-bottom: var(--space-5);
}

.feature__head .eyebrow {
  display: block;
  margin-bottom: var(--space-3);
  color: var(--pine);
}

.feature__campaign {
  margin-bottom: var(--space-6);
}

.feature__grid {
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 48em) {
  .feature__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.feature__cta {
  margin-top: var(--space-5);
}

/* ---------- Fabric story ---------- */

.fabric {
  background: var(--court);
}

.fabric__grid {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 48em) {
  .fabric__grid {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--space-6);
  }
}

.fabric__eyebrow {
  display: block;
  margin-bottom: var(--space-3);
  color: var(--pine);
}

.fabric__title {
  max-width: 14ch;
  margin-bottom: var(--space-4);
}

.spec-table {
  border-bottom: 1px solid var(--ink);
}

.spec-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-2);
  border-top: 1px solid var(--ink);
}

.spec-row dd {
  text-align: right;
}

/* ---------- Lookbook teaser ---------- */

.teaser {
  position: relative;
}

.teaser__media {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.teaser__media .media-frame:first-child {
  grid-column: 1 / 8;
  grid-row: 1;
}

.teaser__media .media-frame:last-child {
  grid-column: 6 / 13;
  grid-row: 1;
  margin-top: 55%;
  z-index: 2;
}

.teaser__caption {
  position: relative;
  z-index: 3;
  margin-top: calc(-1 * var(--space-6));
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: flex-start;
}

@media (min-width: 48em) {
  .teaser__caption {
    position: absolute;
    left: var(--gutter);
    bottom: var(--space-7);
    margin-top: 0;
  }
}

.teaser__link:hover {
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

/* ============================================================
   shop.html
   ============================================================ */

.shop-head {
  padding-top: calc(var(--nav-height) + var(--space-6));
  margin-bottom: var(--space-5);
}

.shop-head__eyebrow {
  display: block;
  margin-bottom: var(--space-3);
  color: var(--pine);
}

.shop-head [data-shop-count] {
  margin-top: var(--space-2);
  color: var(--pine);
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-5);
  border-bottom: 1px solid var(--court);
  padding-bottom: var(--space-3);
}

.filter {
  position: relative;
  padding-bottom: 0.3em;
  opacity: 0.5;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.filter:hover,
.filter[aria-pressed="true"] {
  opacity: 1;
}

/* underline draw for the active filter */
.filter::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur-fast) var(--ease-out);
}

.filter[aria-pressed="true"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ---------- Locker rail ----------
   Default (mobile, reduced motion, no JS): vertical stack.
   .rail--active is added by shop.js on desktop with motion
   allowed — horizontal styling depends on JS so the fallback
   can never strand content sideways. */

.rail {
  position: relative;
}

.rail__track {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding-inline: var(--gutter);
}

.rail-panel {
  width: 100%;
}

.rail-panel__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.rail-panel__id {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  min-width: 0;
}

.rail-panel__index {
  color: var(--pine);
}

.rail-panel__name {
  font-family: var(--font-display);
  font-size: var(--text-subtitle);
  letter-spacing: var(--tracking-display);
  line-height: 1.1;
  margin-top: 0;
}

.rail-panel__price {
  color: var(--pine);
}

.card--soldout .rail-panel__price {
  color: var(--signal);
}

/* Horizontal mode (JS-activated, desktop, motion allowed) */
.rail--active {
  height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.rail--active .rail__track {
  flex-direction: row;
  /* top-align frames — name-wrap differences must not stagger panels */
  align-items: flex-start;
  gap: clamp(var(--space-5), 6vw, var(--space-8));
  padding-inline: var(--gutter);
  will-change: transform;
}

.rail--active .rail-panel {
  flex: 0 0 auto;
  width: min(calc(56svh * 0.8), 78vw);
}

.rail__progress {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--pine);
}

.rail__progress-line {
  flex: 1;
  height: 2px;
  background: var(--court);
  overflow: hidden;
}

.rail__progress-fill {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
}

/* ============================================================
   product.html — PDP core
   ============================================================ */

.pdp {
  padding-top: calc(var(--nav-height) + var(--space-5));
}

.pdp__grid {
  display: grid;
  /* minmax(0,…) stops the carousel's max-content from widening the track */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}

/* grid items may not force the column wider than the container */
.pdp__grid > * {
  min-width: 0;
}

.spec-row dd {
  overflow-wrap: anywhere;
}

@media (min-width: 48em) {
  .pdp__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: var(--space-6);
    align-items: start;
  }

  /* info follows while the gallery scrolls */
  .pdp__info {
    position: sticky;
    top: calc(var(--nav-height) + var(--space-4));
  }
}

/* Gallery: mobile scroll-snap carousel, desktop stacked column */
.pdp__gallery {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  margin-inline: calc(-1 * var(--gutter));
  padding-inline: var(--gutter);
  scrollbar-width: none;
}

.pdp__gallery::-webkit-scrollbar {
  display: none;
}

.pdp__gallery .media-frame {
  flex: 0 0 86%;
  scroll-snap-align: center;
}

@media (min-width: 48em) {
  .pdp__gallery {
    display: grid;
    gap: var(--gutter);
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
  }

  .pdp__gallery .media-frame {
    flex: none;
  }
}

.pdp__eyebrow {
  display: block;
  color: var(--pine);
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}

.pdp__price {
  color: var(--pine);
  margin-block: var(--space-2) var(--space-4);
}

.pdp__fabric {
  margin-bottom: var(--space-4);
}

.size-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.size-chip {
  min-width: 3rem;
  padding: 0.65em 0.5em;
  text-align: center;
  border: 1px solid var(--ink);
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}

.size-chip:hover {
  background: var(--pine);
  border-color: var(--pine);
  color: var(--chalk);
}

.size-chip[aria-pressed="true"] {
  background: var(--ink);
  color: var(--chalk);
}

.pdp__hint {
  color: var(--signal);
  margin-bottom: var(--space-2);
}

.pdp__add {
  margin-top: var(--space-2);
}

.pdp__note {
  margin-top: var(--space-3);
  opacity: 0.6;
}

/* Mobile sticky add-to-bag bar (Gymshark) */
.pdp-bar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--gutter);
  background: var(--chalk);
  border-top: 1px solid var(--ink);
  transform: translateY(100%);
  transition: transform 0.35s var(--ease-out);
}

.pdp-bar.is-visible {
  transform: none;
}

.pdp-bar__meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

@media (min-width: 48em) {
  .pdp-bar {
    display: none;
  }
}

/* ---------- Garment Breakdown ---------- */

.breakdown__head {
  margin-bottom: var(--space-5);
}

.breakdown__head .eyebrow {
  display: block;
  color: var(--pine);
  margin-bottom: var(--space-3);
}

.breakdown__index {
  color: var(--signal);
  margin-bottom: var(--space-2);
}

.breakdown__rule {
  display: block;
  height: 1px;
  background: var(--ink);
  margin-block: var(--space-3);
}

.breakdown__note {
  color: var(--pine);
}

/* Pinned mode (desktop, motion allowed — set by product.js) */
.breakdown--pinned .breakdown__stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: center;
  min-height: 100svh;
}

.breakdown--pinned .breakdown__stack {
  position: relative;
  /* keep the 4/5 stack inside the pinned viewport */
  width: min(100%, calc(78svh * 0.8));
}

.breakdown--pinned .breakdown__stack .media-frame {
  position: absolute;
  inset: 0;
}

.breakdown--pinned .breakdown__stack .media-frame:first-child {
  position: relative;
}

.breakdown--pinned .breakdown__stack .media-frame + .media-frame {
  clip-path: inset(100% 0 0 0);
}

.breakdown--pinned .breakdown__steps {
  position: relative;
}

.breakdown--pinned .breakdown__step {
  position: absolute;
  inset: 0;
}

.breakdown--pinned .breakdown__step:first-child {
  position: relative;
}

.breakdown--pinned .breakdown__step + .breakdown__step {
  opacity: 0;
  visibility: hidden;
}

/* the annotation rule reaches back across the column gap
   toward the image edge before meeting its spec text */
.breakdown--pinned .breakdown__rule {
  margin-left: calc(-1 * var(--space-6));
}

/* Static mode (mobile / reduced motion) */
.breakdown__list {
  display: grid;
  gap: var(--space-6);
}

.breakdown__pair {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 48em) {
  .breakdown__pair {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--space-6);
  }
}

/* Complete the fit */
.related__title {
  margin-bottom: var(--space-5);
}

/* ============================================================
   lookbook.html
   ============================================================ */

.lb-title {
  min-height: 100svh;
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  gap: var(--space-3);
  padding-inline: var(--gutter);
}

.lb-title .mono {
  color: var(--pine);
}

/* Chapter: media holds (sticky) while the caption scrolls over it.

   min-height is load-bearing, not decoration. The section's natural
   height is 45svh + caption height (the caption is pulled up 55svh
   over the 100svh media), which only just exceeded the media's own
   100svh — about 9svh of slack. A sticky element taller than its
   container overflows the bottom of it, so in Safari, where the
   caption measures slightly shorter, the image spilled out of the
   section and painted over the footer. Pinning a floor well above
   100svh removes that dependency — and the surplus IS the hold, so
   the media now actually stays put while the caption travels. */
.lb-chapter {
  position: relative;
  min-height: 150svh;
}

.lb-chapter__media {
  position: sticky;
  top: 0;
  height: 100svh;
}

.lb-chapter__caption {
  position: relative;
  z-index: 2;
  color: var(--chalk);
  margin-top: -55svh;
  padding-bottom: 30svh;
}

.lb-chapter__num {
  margin-bottom: var(--space-3);
}

.lb-chapter__sub {
  max-width: 34ch;
  margin-top: var(--space-3);
  font-size: var(--text-small);
}

.lb-chapter__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-5);
}

.chip {
  display: inline-block;
  border: 1px solid currentColor;
  padding: 0.45em 0.9em;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}

.chip:hover {
  background: var(--chalk);
  color: var(--ink);
}

/* ============================================================
   drop.html
   ============================================================ */

.drop-hero {
  position: relative;
  min-height: 100svh;
  background: var(--pine);
  color: var(--chalk);
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-block: var(--nav-height);
}

/* teaser loop behind, heavily darkened */
.drop-hero__bg {
  position: absolute;
  inset: 0;
  opacity: 0.18;
  mix-blend-mode: luminosity;
}

.drop-hero__bg .redbox {
  padding-top: calc(var(--nav-height) + var(--space-3));
}

.drop-hero__content {
  position: relative;
  z-index: 2;
  display: grid;
  gap: var(--space-4);
  justify-items: start;
}

.drop-hero__count {
  display: flex;
  align-items: baseline;
  gap: clamp(var(--space-3), 4vw, var(--space-6));
  color: var(--signal);
  font-variant-numeric: tabular-nums;
}

.drop-hero__seg {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.drop-hero__digits {
  display: inline-block;
  font-size: clamp(2.75rem, 9vw, 8rem);
  line-height: 1;
}

.drop-hero__label {
  color: var(--chalk);
  opacity: 0.6;
}

.drop-form {
  display: flex;
  width: min(28rem, 100%);
  border-bottom: 1px solid var(--chalk);
  margin-top: var(--space-3);
}

.drop-form__input {
  flex: 1;
  background: none;
  border: 0;
  color: var(--chalk);
  font: inherit;
  padding-block: var(--space-2);
  min-width: 0;
}

.drop-form__input::placeholder {
  color: var(--chalk);
  opacity: 0.5;
}

.drop-archive__title {
  margin-bottom: var(--space-5);
}

.drop-archive {
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 48em) {
  .drop-archive {
    grid-template-columns: repeat(3, 1fr);
  }
}

.drop-card {
  display: block;
}

.drop-card .media-frame {
  position: relative;
}

.drop-card__date {
  display: block;
  margin-top: var(--space-1);
  color: var(--pine);
}

.drop-card--soldout .media {
  opacity: 0.55;
}

/* ============================================================
   about.html
   ============================================================ */

.about-statement {
  min-height: 80svh;
  display: grid;
  align-content: center;
  gap: var(--space-4);
  padding-top: var(--nav-height);
}

.about-statement__eyebrow {
  color: var(--pine);
}

.about-statement__body {
  max-width: 52ch;
  display: grid;
  gap: var(--space-3);
}

.about-triptych {
  display: grid;
  gap: var(--gutter);
  grid-template-columns: repeat(2, 1fr);
}

.about-triptych .media-frame:nth-child(2) {
  margin-top: var(--space-6);
}

@media (min-width: 48em) {
  .about-triptych {
    grid-template-columns: repeat(3, 1fr);
  }

  .about-triptych .media-frame:nth-child(3) {
    margin-top: var(--space-7);
  }
}

.about-standards {
  background: var(--court);
  padding-block: var(--space-7);
}

.about-standards__title {
  margin-bottom: var(--space-4);
}

.about-contact {
  display: grid;
  gap: var(--space-4);
  justify-items: start;
}

/* Display-only address — no hover affordance, since it isn't a link */
.about-contact__mail {
  word-break: break-word;
}

.about-contact__rows {
  display: grid;
  gap: var(--space-2);
  color: var(--pine);
}

.related-grid {
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 48em) {
  .related-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}