/* footer.css — medex-landing, section 13 `footer` (BUILD-SECTION).
   Source: brief/footer.md + cache/footer.{desktop,mobile}.json (desktop 3271:661, mobile 3271:1290).
   Pattern B-edge on both layers: the red ground is on `.footer.container` itself (bounded by the
   1920 body cap), content sits in the gutter column. Vertical padding = padding-block longhands only.
   Every rule is scoped under .footer. */

/* ---------------------------------------------------------------------------
   SECTION TOKENS — moved out of the page's tokens.css.

   Read by THIS block and nothing else on the site, so they belong here rather
   than in a site-wide :root. In Shopify a section can be dropped onto any
   template from the theme editor, so a section that reads a token from a
   page-level scope breaks the moment it is moved; scoped to the block's own
   class, it travels with it.

   EVERY band is carried verbatim from the old tokens.css, in that file's own
   order — so the cascade is unchanged whether the page was written
   desktop-first (base + max-width overrides) or mobile-first (base +
   min-width overrides). Verified by computed-style diff at
   375/768/1024/1440/1920.
--------------------------------------------------------------------------- */

.footer--landing {
  --c-accent:    #e63329;
  --c-on-footer: #f9fcff;
}

/* ---- mobile band (base, 0–767): clamp(M-min, calc(M-base + (max-vw - 390px) * 0.015), M-max) ---- */
.footer--landing {
  --footer-pad-top:    clamp(26px, calc(32px + (var(--max-vw) - 390px) * 0.015), 63px);
  --footer-pad-bottom: clamp(26px, calc(32px + (var(--max-vw) - 390px) * 0.015), 63px);
  --footer-logo-w:     clamp(95px, calc(116px + (var(--max-vw) - 390px) * 0.015), 228px);
  --footer-logo-gap:   clamp(13px, calc(16px + (var(--max-vw) - 390px) * 0.015), 31px);
  --footer-para-gap:   clamp(10px, calc(12px + (var(--max-vw) - 390px) * 0.015), 24px);
  --text-footer-lead:  clamp(9px, calc(11px + (var(--max-vw) - 390px) * 0.015), 22px);
  --text-footer-legal: clamp(8px, calc(10px + (var(--max-vw) - 390px) * 0.015), 20px);
  --lh-footer: 1.65; /* D-FT-8: measured ratio on both layers and both roles */
}

.footer--landing {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-block-start: var(--footer-pad-top);
  padding-block-end: var(--footer-pad-bottom);
  background-color: var(--c-accent);
  color: var(--c-on-footer);
  font-family: var(--font-sans);
}

.footer--landing .footer__logo {
  display: block;
  flex: none;
  border-radius: 2px;
}

.footer--landing .footer__logo picture {
  display: block;
}

.footer--landing .footer__logo-img {
  display: block;
  width: var(--footer-logo-w);
  height: auto;
}

.footer--landing .footer__text {
  width: 100%; /* D-FT-7: 100% of the column, never the drawn 351 */
  margin-top: var(--footer-logo-gap);
}

.footer--landing .footer__lead,
.footer--landing .footer__legal,
.footer--landing .footer__meta {
  margin: 0;
  color: var(--c-on-footer);
  line-height: var(--lh-footer);
  letter-spacing: 0;
  text-align: left;
}

.footer--landing .footer__lead {
  font-size: var(--text-footer-lead);
  font-weight: 700;
}

.footer--landing .footer__legal,
.footer--landing .footer__meta {
  margin-top: var(--footer-para-gap);
  font-size: var(--text-footer-legal);
  font-weight: 400;
}

.footer--landing .footer__phone {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: from-font;
}

/* ---- states (D-FT-3; not drawn): white focus ring on the red ground ---- */
.footer--landing .footer__logo:hover { opacity: .85; }
.footer--landing .footer__phone:hover { text-decoration-thickness: 2px; }

.footer--landing .footer__logo:focus-visible,
.footer--landing .footer__phone:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

.footer--landing .footer__phone:focus-visible { border-radius: 2px; }

@media (prefers-reduced-motion: no-preference) {
  .footer--landing .footer__logo { transition: opacity 150ms ease; }
}

/* ---- pseudo-tablet band (768–1023): clamp(M-base, calc(M-base + (max-vw - 768px) * 0.025), D-base) ---- */
@media (min-width: 768px) and (max-width: 1023px) {
  .footer--landing {
    --footer-pad-top:    clamp(32px, calc(32px + (var(--max-vw) - 768px) * 0.025), 39px);
    --footer-pad-bottom: clamp(32px, calc(32px + (var(--max-vw) - 768px) * 0.025), 50.35px);
    --footer-logo-w:     clamp(116px, calc(116px + (var(--max-vw) - 768px) * 0.025), 171px);
    --footer-logo-gap:   clamp(16px, calc(16px + (var(--max-vw) - 768px) * 0.025), 53.28px);
    --footer-para-gap:   clamp(12px, calc(12px + (var(--max-vw) - 768px) * 0.025), 14.73px);
    --text-footer-lead:  clamp(11px, calc(11px + (var(--max-vw) - 768px) * 0.025), 15.222px);
    --text-footer-legal: clamp(10px, calc(10px + (var(--max-vw) - 768px) * 0.025), 13.73px);
  }
}

/* ---- desktop band (1024+): clamp(D-min, calc(D-base * (max-vw / vw-base)), D-max) ---- */
@media (min-width: 1024px) {
  .footer--landing {
    --footer-pad-top:    clamp(25px, calc(39px * (var(--max-vw) / var(--vw-base))), 46px);
    --footer-pad-bottom: clamp(32px, calc(50.35px * (var(--max-vw) / var(--vw-base))), 60px);
    --footer-logo-w:     clamp(108px, calc(171px * (var(--max-vw) / var(--vw-base))), 203px);
    --footer-logo-gap:   clamp(34px, calc(53.28px * (var(--max-vw) / var(--vw-base))), 63px);
    --footer-para-gap:   clamp(9px, calc(14.73px * (var(--max-vw) / var(--vw-base))), 17px);
    --footer-text-max:   clamp(639px, calc(1009.85px * (var(--max-vw) / var(--vw-base))), 1198px);
    --text-footer-lead:  clamp(10px, calc(15.222px * (var(--max-vw) / var(--vw-base))), 18px);
    --text-footer-legal: clamp(9px, calc(13.73px * (var(--max-vw) / var(--vw-base))), 16px);
  }

  /* D-FT-9 MUST-APPLY: the 1009.85 cap sets the desktop line breaks */
  .footer--landing .footer__text {
    max-width: var(--footer-text-max);
  }
}