/* footer-pdp — site footer on the PDP (brief/footer-pdp.md)
   Desktop 2195:18163 (1920 x 1255.96) · Mobile 2209:19819 (390 x 1103.14) · no tablet layer (pseudo-tablet 768–1023).
   Pattern B-edge + .container--full: <footer class="footer-pdp container container--bleed container--full"> paints the
   red + texture to the viewport edge; .footer-pdp__content carries the gutter + block padding (never a padding
   shorthand on the footer). Mobile-first: base = mobile (anchor 390, 0.015) · 768–1023 pseudo-tablet (0.025, from
   M-767) · 1024+ desktop (x / 1920). Every rule is .footer-pdp-scoped (GLOBAL-SCOPE LOCK). */

/* ---------- Mobile (base) ---------- */
.footer-pdp {
  --fp-pad-block:   clamp(46px, calc(56px + (var(--max-vw) - 390px) * 0.015), 80px);
  --fp-gap-root:    clamp(39px, calc(48px + (var(--max-vw) - 390px) * 0.015), 64px);
  --fp-gap-brand:   clamp(20px, calc(24px + (var(--max-vw) - 390px) * 0.015), 64px);
  --fp-gap-top:     clamp(33px, calc(40px + (var(--max-vw) - 390px) * 0.015), 40px);
  --fp-gap-signup:  clamp(20px, calc(24px + (var(--max-vw) - 390px) * 0.015), 24px);
  --fp-gap-news:    clamp(33px, calc(40px + (var(--max-vw) - 390px) * 0.015), 40px);
  --fp-gap-social:  clamp(20px, calc(24px + (var(--max-vw) - 390px) * 0.015), 40px);
  --fp-social:      clamp(39px, calc(48px + (var(--max-vw) - 390px) * 0.015), 48px);
  --fp-links-row:   clamp(10px, calc(12px + (var(--max-vw) - 390px) * 0.015), 12px);
  --fp-links-pad:   0px;
  --fp-link-pad:    clamp(8px, calc(10px + (var(--max-vw) - 390px) * 0.015), 10px);
  --fp-input-h:     clamp(46px, calc(56px + (var(--max-vw) - 390px) * 0.015), 56px);
  --fp-input-pad:   clamp(13px, calc(16px + (var(--max-vw) - 390px) * 0.015), 16px);
  --fp-btn-gap:     clamp(4px, calc(5px + (var(--max-vw) - 390px) * 0.015), 5px);
  --fp-arrow:       clamp(16px, calc(20px + (var(--max-vw) - 390px) * 0.015), 20px);
  --fp-coin:        clamp(99px, calc(121px + (var(--max-vw) - 390px) * 0.015), 179px);
  /* mobile nodes bind DESKTOP type styles (D-FTP-11) — slice overrides, not tokens */
  --fp-text-lead:   clamp(16px, calc(20px + (var(--max-vw) - 390px) * 0.015), 20px);
  --fp-text-body:   clamp(13px, calc(16px + (var(--max-vw) - 390px) * 0.015), 16px);

  position: relative;
  isolation: isolate;
  background-color: var(--color-accent);
  color: var(--color-white);
}

/* Red paper-grain texture: Figma IMAGE paint opacity .6 + exposure −0.06 / saturation −0.10 (D-FTP-18) */
.footer-pdp__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  opacity: .6;
  filter: saturate(.9) brightness(.95);
  pointer-events: none;
}

.footer-pdp__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--fp-gap-root);
  padding-top: var(--fp-pad-block);
  padding-bottom: var(--fp-pad-block);
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* ---- Top block: newsletter → links ---- */
.footer-pdp__top {
  display: flex;
  flex-direction: column;
  gap: var(--fp-gap-top);
  width: 100%;
}

.footer-pdp__newsletter {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--fp-gap-news);
}

.footer-pdp__signup {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--fp-gap-signup);
  width: 100%;
}

.footer-pdp__lead {
  font-weight: var(--weight-regular);
  font-size: var(--fp-text-lead);
  line-height: var(--lh-body-lg);
  letter-spacing: var(--ls-body-lg);
  color: var(--color-white);
}

/* ---- Newsletter form (stub submit — js/footer-pdp.js) ---- */
.footer-pdp__form {
  position: relative;
  width: 100%;
}

.footer-pdp__field {
  display: flex;
  align-items: center;
  gap: var(--fp-input-pad);
  height: var(--fp-input-h);
  padding-left: var(--fp-input-pad);
  padding-right: var(--fp-input-pad);
  border-bottom: 1px solid var(--color-white);
}
.footer-pdp__field:has(.footer-pdp__input:focus-visible) {
  outline: 2px solid var(--color-white);
  outline-offset: 2px;
}

.footer-pdp__input {
  flex: 1 1 0;
  min-width: 0;
  align-self: stretch;
  font-weight: var(--weight-regular);
  font-size: var(--fp-text-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--color-white);
  caret-color: var(--color-white);
}
/* RESPONSIVE (2026-10-19) — mobile band only: 16px is drawn on BOTH layers (design-invariant, brief §5) and iOS Safari
   zooms the page on focus below 16 — the band token fell to 15.78 at 375 / 14.95 at 320. Hold 16 under the anchor.
   (768+ untouched: the tablet token is 16; the desktop band scales with the frame by rule.) */
@media (max-width: 767px) {
  .footer-pdp__input { font-size: max(16px, var(--fp-text-body)); }
}
.footer-pdp__input::placeholder {
  color: var(--color-white-80);
  opacity: 1;
}
.footer-pdp__input:focus,
.footer-pdp__input:focus-visible { outline: none; }   /* the ring is drawn on .footer-pdp__field */
.footer-pdp__input:-webkit-autofill {
  -webkit-text-fill-color: var(--color-white);
  caret-color: var(--color-white);
  transition: background-color 9999s ease-out 0s;     /* keep the field transparent on the red band */
}

.footer-pdp__submit {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: var(--fp-btn-gap);
  padding: 2px 0;
  font-weight: var(--weight-medium);
  font-size: var(--fp-text-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--color-white);
  white-space: nowrap;
  border-radius: 0;
}
.footer-pdp__submit-label {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  transition: text-decoration-color 150ms ease;
}
.footer-pdp__submit:hover .footer-pdp__submit-label,
.footer-pdp__submit:focus-visible .footer-pdp__submit-label { text-decoration-color: currentColor; }
.footer-pdp__submit-icon {
  width: var(--fp-arrow);
  height: var(--fp-arrow);
  flex: 0 0 auto;
}

.footer-pdp__form-msg {
  position: absolute;           /* the drawn Default state has no message row — it must not move the layout */
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  font-size: var(--text-body-sm);
  line-height: var(--lh-body-sm);
  letter-spacing: var(--ls-body-sm);
  color: var(--color-white-80);
}

/* ---- Social links ---- */
.footer-pdp__social {
  display: flex;
  flex: 0 0 auto;
  gap: var(--fp-gap-social);
}
.footer-pdp__social-item { display: flex; }
.footer-pdp__social-link {
  display: inline-flex;
  width: var(--fp-social);
  height: var(--fp-social);
  transition: opacity 150ms ease;
}
.footer-pdp__social-link img {
  width: 100%;
  height: 100%;
}
.footer-pdp__social-link:hover { opacity: .8; }

/* ---- Footer navigation: ONE list, three compositions (D-FTP-2) ---- */
.footer-pdp__nav { width: 100%; }

.footer-pdp__links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(5, auto);
  grid-auto-flow: column;
  column-gap: 0;
  row-gap: var(--fp-links-row);
  padding-top: var(--fp-links-pad);
  padding-bottom: var(--fp-links-pad);
}
.footer-pdp__links > li { display: flex; }

.footer-pdp__link {
  display: block;
  padding-top: var(--fp-link-pad);
  padding-bottom: var(--fp-link-pad);
  font-weight: var(--weight-medium);
  font-size: var(--text-body-lg);
  line-height: var(--lh-body-lg);
  letter-spacing: var(--ls-body-lg);
  color: var(--color-white);
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  transition: text-decoration-color 150ms ease;
}
.footer-pdp__link:hover,
.footer-pdp__link:focus-visible { text-decoration-color: currentColor; }

/* per-layer labels for links 1 + 5 (D-FTP-3): short below 768, long from 768 */
.footer-pdp__label--long { display: none; }

/* focus ring: white on the red band (BA-FTP-1) */
.footer-pdp__submit:focus-visible,
.footer-pdp__social-link:focus-visible,
.footer-pdp__link:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 2px;
}

/* ---- Brand block: coin → giant logotype (D-FTP-4/5/6) ---- */
.footer-pdp__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--fp-gap-brand);
  width: 100%;
}
.footer-pdp__coin-pic {
  display: block;
  width: var(--fp-coin);
}
.footer-pdp__coin {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 179 / 180;
  object-fit: cover;
}
.footer-pdp__logo {
  display: block;
  width: 100%;
  height: auto;
}

/* ---- Legal (ink on red, contrast as drawn — page decision) ---- */
.footer-pdp__legal {
  width: 100%;
  font-weight: var(--weight-regular);
  font-size: var(--fp-text-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--color-ink);
}

/* ---------- Pseudo-tablet 768–1023 (FD-BL: newsletter desktop-compressed, links grid-3, brand stack-centred) ---------- */
@media (min-width: 768px) {
  .footer-pdp__label--long { display: inline; }
  .footer-pdp__label--short { display: none; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .footer-pdp {
    --fp-pad-block:   clamp(61.66px, calc(61.66px + (var(--max-vw) - 768px) * 0.025), 80px);
    --fp-gap-root:    clamp(53.66px, calc(53.66px + (var(--max-vw) - 768px) * 0.025), 64px);
    --fp-gap-brand:   clamp(29.66px, calc(29.66px + (var(--max-vw) - 768px) * 0.025), 64px);
    --fp-gap-social:  clamp(29.66px, calc(29.66px + (var(--max-vw) - 768px) * 0.025), 40px);
    --fp-coin:        clamp(126.66px, calc(126.66px + (var(--max-vw) - 768px) * 0.025), 179px);
    --fp-gap-top:     40px;
    --fp-gap-signup:  24px;
    --fp-social:      48px;
    --fp-links-row:   12px;
    --fp-link-pad:    10px;
    --fp-input-h:     56px;
    --fp-input-pad:   16px;
    --fp-btn-gap:     5px;
    --fp-arrow:       20px;
    --fp-text-lead:   var(--text-body-lg);
    --fp-text-body:   var(--text-body);
  }
  .footer-pdp__newsletter {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 0;
  }
  .footer-pdp__signup {
    flex: 1 1 0;
    max-width: 66%;
  }
  .footer-pdp__links {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: none;
    grid-auto-flow: row;
  }
}

/* ---------- Desktop 1024+ (x / 1920) ---------- */
@media (min-width: 1024px) {
  .footer-pdp {
    --fp-pad-block:   clamp(43px, calc(80px * (var(--max-vw) / var(--vw-base))), 80px);
    --fp-gap-root:    clamp(34px, calc(64px * (var(--max-vw) / var(--vw-base))), 64px);
    --fp-gap-brand:   clamp(34px, calc(64px * (var(--max-vw) / var(--vw-base))), 64px);
    --fp-gap-top:     clamp(21px, calc(40px * (var(--max-vw) / var(--vw-base))), 40px);
    --fp-gap-signup:  clamp(9px, calc(16px * (var(--max-vw) / var(--vw-base))), 16px);
    --fp-gap-social:  clamp(21px, calc(40px * (var(--max-vw) / var(--vw-base))), 40px);
    --fp-social:      clamp(26px, calc(48px * (var(--max-vw) / var(--vw-base))), 48px);
    --fp-links-pad:   clamp(17px, calc(32px * (var(--max-vw) / var(--vw-base))), 32px);
    --fp-link-pad:    clamp(5px, calc(10px * (var(--max-vw) / var(--vw-base))), 10px);
    --fp-input-h:     clamp(30px, calc(56px * (var(--max-vw) / var(--vw-base))), 56px);
    --fp-input-pad:   clamp(9px, calc(16px * (var(--max-vw) / var(--vw-base))), 16px);
    --fp-btn-gap:     clamp(3px, calc(5px * (var(--max-vw) / var(--vw-base))), 5px);
    --fp-arrow:       clamp(11px, calc(20px * (var(--max-vw) / var(--vw-base))), 20px);
    --fp-coin:        clamp(95px, calc(179px * (var(--max-vw) / var(--vw-base))), 179px);
    --fp-signup-w:    clamp(256px, calc(480px * (var(--max-vw) / var(--vw-base))), 480px);
    --fp-text-lead:   var(--text-body-lg);
    --fp-text-body:   var(--text-body);
  }
  .footer-pdp__newsletter {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 0;
  }
  .footer-pdp__signup {
    flex: 0 0 auto;
    width: var(--fp-signup-w);
  }
  .footer-pdp__links {
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .footer-pdp__link,
  .footer-pdp__submit-label,
  .footer-pdp__social-link { transition: none; }
}