/* ============================================================
   QUAD™ — components.css
   Nav, footer, buttons, cards, REDBOX. Mobile-first.
   ============================================================ */

/* ---------- Nav ---------- */

/* The nav is a full-width pine strip: chalk type always sits on a
   known ground, so it is legible on every page.

   This replaced mix-blend-mode: difference, which never actually
   worked — .nav is fixed with a z-index, so it forms its own stacking
   context and the blended children isolated against the nav's own
   transparent background instead of the page, rendering plain white.
   That read fine over the dark hero and was invisible on every light
   page. A solid strip is also cheaper: no per-frame re-composite over
   playing video. */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-nav);
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: var(--gutter);
  background: var(--pine);
  color: var(--chalk);
  transition: transform 0.45s var(--ease-out),
              background 0.4s var(--ease-out);
}

/* Over a full-bleed dark hero the strip is redundant — the media and
   its scrim already carry the contrast. Pages mark such a section with
   [data-nav-overlay] and main.js toggles this while it is in view. */
.nav--over-media {
  background: transparent;
}

.nav.is-hidden {
  transform: translateY(-100%);
}

.nav__wordmark {
  font-family: var(--font-display);
  font-size: 1.375rem;
  letter-spacing: var(--tracking-display);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* Mobile: collapse section links, keep wordmark + bag */
.nav__link {
  display: none;
}

@media (min-width: 48em) {
  .nav__link {
    display: inline-block;
    position: relative;
  }

  /* underline draw on hover */
  .nav__link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -0.3em;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--dur-fast) var(--ease-out);
  }

  .nav__link:hover::after,
  .nav__link[aria-current="page"]::after {
    transform: scaleX(1);
    transform-origin: left;
  }
}

.nav__bag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.nav__bag-count {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  color: var(--signal);
}

/* ---------- Footer ---------- */

/* Positioned so the footer always paints above anything that bleeds
   out of <main> — a sticky section that overflows its container would
   otherwise cover it (see .lb-chapter). Later in the DOM, so with both
   positioned the footer wins. */
.footer {
  position: relative;
  z-index: 1;
  background: var(--pine);
  color: var(--chalk);
  padding-block: var(--space-6) var(--space-4);
}

.footer__manifesto {
  font-family: var(--font-display);
  font-size: var(--text-title);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-display);
  max-width: 18ch;
  /* --leading-display (0.95) makes the line box shorter than Zodiak's
     glyphs, so descenders — the y in "luxury." — spill past the element
     box and get trimmed. Pad the box to contain them and take the same
     amount off the margin, so the leading and the spacing below are
     both unchanged. */
  padding-bottom: 0.18em;
  margin-bottom: calc(var(--space-6) - 0.18em);
}

.footer__grid {
  display: grid;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
}

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

.footer__heading {
  margin-bottom: var(--space-3);
  opacity: 0.6;
}

.footer__list li {
  margin-bottom: var(--space-2);
}

.footer__list a:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.footer__newsletter-form {
  display: flex;
  border-bottom: 1px solid var(--chalk);
  margin-top: var(--space-2);
}

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

.footer__newsletter-input::placeholder {
  color: var(--chalk);
  opacity: 0.5;
}

.footer__fineprint {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: space-between;
  opacity: 0.6;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-stretch: var(--stretch-expanded);
  font-weight: 600;
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  padding: 1em 2.25em;
  background: var(--ink);
  color: var(--chalk);
  transition: background var(--dur-fast) var(--ease-out);
}

.btn:hover {
  background: var(--pine);
}

.btn--pine {
  background: var(--pine);
}

.btn--pine:hover {
  background: var(--ink);
}

.btn--full {
  width: 100%;
}

.btn--ghost {
  background: none;
  color: currentColor;
  border: 1px solid currentColor;
}

.btn--ghost:hover {
  background: var(--ink);
  color: var(--chalk);
  border-color: var(--ink);
}

/* ---------- Product card ---------- */

.card {
  display: block;
}

/* Two stacked .media crossfade on hover (flat → model).
   Works identically for redboxes and real imgs.        */
.card__media {
  position: relative;
}

.card__media .media {
  transition: opacity 0.45s var(--ease-out);
}

.card__media .media + .media {
  position: absolute;
  inset: 0;
  opacity: 0;
}

@media (hover: hover) {
  .card:hover .card__media .media + .media { opacity: 1; }
  .card:hover .card__media .media:first-child { opacity: 0; }
}

.card__name {
  display: inline-block;
  position: relative;
  margin-top: var(--space-3);
}

.card__name::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.2em;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur-fast) var(--ease-out);
}

.card:hover .card__name::after {
  transform: scaleX(1);
  transform-origin: left;
}

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

/* Sold-out: rubber stamp over the media, muted card */
.card__stamp {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-12deg);
  z-index: 2;
  border: 2px solid var(--signal);
  color: var(--signal);
  padding: 0.4em 0.9em;
  letter-spacing: 0.18em;
  background: rgb(246 246 244 / 0.85);
}

.card--soldout .card__media .media:first-child {
  opacity: 0.55;
}

/* sold-out cards keep the flat view — no hover crossfade */
.card--soldout .card__media .media + .media {
  opacity: 0;
}

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

/* ---------- Page transition layer ---------- */

.transition {
  position: fixed;
  inset: 0;
  z-index: var(--z-transition);
  background: var(--pine);
  color: var(--chalk);
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden; /* GSAP autoAlpha drives visibility */
  pointer-events: none;
}

.transition__title {
  font-family: var(--font-display);
  font-size: var(--text-title);
  letter-spacing: var(--tracking-display);
}

/* ============================================================
   REDBOX — placeholder system (never in final UI)
   Authored as:
   <div class="media redbox"
        data-type="IMG|VID"
        data-ratio="4/5"
        data-file="pdp-rugby-01-front.png"
        data-prompt="…full Midjourney prompt…"
        data-motion="slow pan across empty gym">   ← VID only
   main.js (initRedboxes) builds the inner label markup.
   ============================================================ */

.redbox {
  background: var(--redbox);
  border: 1px solid var(--ink);
  color: var(--chalk);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  line-height: 1.5;
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  overflow: hidden;
  /* .media supplies aspect-ratio via --ratio */
}

.redbox__tag {
  font-weight: 600;
  letter-spacing: 0.06em;
  word-break: break-all;
}

.redbox__loop {
  letter-spacing: 0.06em;
}

.redbox__prompt {
  opacity: 0.85;
  font-size: 0.6875rem;
  overflow: hidden;
  min-height: 0;
}

/* Alt-state redboxes in a crossfade stack get a diagonal chalk stripe
   so the two states are visually distinguishable while placeholder. */
.redbox--alt {
  background:
    repeating-linear-gradient(
      -45deg,
      transparent 0 12px,
      rgb(246 246 244 / 0.12) 12px 24px
    ),
    var(--redbox);
}