/* =========================================================================
   10-footer — orange site footer.
   Link columns (collapse into accordions <=1023px), app badges, certification
   badges, social buttons, language dropdown, animated SPIRIT ONE wordmark, legal
   copy and partnership cards. Every rule scoped under ._footer. Utilities
   (.flex, .grid, .g-row-full, .color-orange …) come from base.css.
   ========================================================================= */

._footer {
  color: var(--orange);
  padding-top: var(--60-16);
  padding-bottom: var(--140);
}

/* ---- Responsive utility pairs the footer markup relies on --------------- */
/* These mirror the source's global utilities but aren't in base.css; scoped
   under ._footer so they map onto existing tokens without polluting globals. */
._footer .mt-80-32 { margin-top: var(--80-32); }
._footer .mt-96-32 { margin-top: var(--96-32); }
._footer .mt-24-16 { margin-top: var(--24-16); }
._footer .gap-32-16 { gap: var(--32-16); }
._footer .br-20-16 { border-radius: var(--20-16); }
._footer .opacity-10 { opacity: .1; }

/* ---- Link columns ------------------------------------------------------- */
._footer .links {
  display: grid;
  gap: var(--24-12);
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  grid-template-rows: 1fr;
}
._footer .links a,
._footer .links button {
  padding: var(--4) 0;
}
/* Desktop: headers are always-open labels; hide the accordion +/- icon */
._footer .links button {
  background: transparent;
  text-align: left;
  cursor: default;
}
._footer .links button ._icon { display: none; }
._footer .links ._accordion .accordion-content {
  height: auto;
  overflow: visible;
}

/* Group header label */
._footer .link-group-header { gap: var(--16); }

/* ---- Footer link (animated underline on hover) -------------------------- */
._footer .footer-link {
  position: relative;
  display: block;
  width: max-content;
  padding: var(--4) 0;
  border-radius: 8px;
  color: var(--orange);
  font-size: 16px;
  font-weight: var(--fw-book);
  line-height: 1.5;
  letter-spacing: .03em;
  overflow: hidden;
  transition: opacity var(--dur) var(--ease-in-out);
}
._footer .footer-link::before {
  content: "";
  position: absolute;
  inset: 0 -4px;
  border-radius: inherit;
}
._footer .footer-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 3px;
  width: 100%;
  height: 1px;
  background-color: var(--orange);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur) var(--ease-in-out);
  will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
  ._footer .footer-link:hover { opacity: .8; }
  ._footer .footer-link:hover::after {
    transform: scaleX(1);
    transform-origin: left;
  }
}
@media only screen and (min-width: 1023px) {
  ._footer .footer-link:focus-visible::before {
    box-shadow: 0 0 0 1px var(--orange), 0 0 0 3px rgba(10, 10, 10, .35);
  }
}

/* ---- App-store badges --------------------------------------------------- */
._footer ._app-button {
  display: inline-flex;
  align-items: center;
  height: auto;
}
._footer ._app-button .ph-badge {
  border-color: var(--orange);
  color: var(--orange);
}
/* (eyebrow + name typography now lives on .ph-badge globally) */

/* ---- Socials ------------------------------------------------------------ */
._footer .externals .socials { gap: var(--20); }

/* ---- Divider ------------------------------------------------------------ */
._footer .divider { height: 1px; }

/* ---- Language dropdown (footer uses the shared ._dropdown atom) ---------- */
._footer ._language-select .overlay-container { right: auto; left: 0; }

/* ---- Animated SPIRIT ONE wordmark --------------------------------------- */
._footer .wordmark { overflow: hidden; }
._footer ._wordmark {
  display: block;
  position: relative;
  width: 100%;
}
/* Giant display-font "Spirit One" — sized off the viewport, one line. */
._footer ._wordmark .glyphs {
  display: flex;
  justify-content: center;
  color: var(--orange);
  font-family: var(--font-display);
  font-weight: 500; /* medium */
  font-size: clamp(53px, 18.15vw, 330px); /* +10% */
  line-height: 1;
  /* tighter tracking so the +10% letters still fit inside the viewport */
  letter-spacing: -.05em;
}
/* Word gap between "Spirit" and "One" (flex items collapse whitespace). */
._footer ._wordmark .glyph.word-gap { margin-left: .22em; }
._footer ._wordmark[data-tone=neutral] .glyphs { color: #fff; }
._footer ._wordmark .glyph {
  display: block;
  will-change: transform;
  /* No CSS start-offset here: the lowered start lives ONLY in the GSAP
     fromTo (yPercent:70). A CSS translateY(70%) gets parsed by GSAP into a
     baked-in PIXEL y-offset (matrices lose the %), which then survives the
     whole tween and keeps the letters sunken. Without JS the letters simply
     rest in place — the safest fallback. */
}

/* ---- Legal copy --------------------------------------------------------- */
._footer .caption {
  font-size: var(--body-small);
  line-height: 1.5;
  letter-spacing: .02em;
}

/* ---- Partnership cards -------------------------------------------------- */
._footer .bottom-cards {
  display: flex;
  flex-wrap: wrap;
  gap: var(--grid-gap);
}
._footer .bottom-cards[data-count="2"] ._partnership-card { flex: 0 0 49.23%; }
._footer .bottom-cards[data-count="3"] ._partnership-card { flex: 0 0 32.3%; }
._footer .bottom-cards[data-count="4"] ._partnership-card { flex: 0 1 23.8%; }

._footer ._partnership-card {
  position: relative;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  min-height: clamp(200px, 176.171px + 100vw * .0611, 280px);
  padding: 0 var(--32-16);
  overflow: hidden;
  /* radius comes from the .br-20-16 utility on the markup (responsive 16→20px) */
}
._footer ._partnership-card .background {
  object-position: 50% 50%;
}
._footer ._partnership-card .gradient {
  background: linear-gradient(180deg, rgba(122, 39, 57, 0) 15%, var(--background-color, transparent) 69%);
}
._footer ._partnership-card .badge {
  position: relative;
  height: clamp(44px, 39.242px + 100vw * .0122, 60px);
  width: clamp(180px, 30vw, 360px);
  margin-bottom: 20px;
}

/* =========================================================================
   Breakpoints (match source)
   ========================================================================= */

/* ---- <=1023px : columns become collapsible accordions ------------------- */
@media only screen and (max-width: 1023px) {
  ._footer .links {
    display: flex;
    flex-direction: column;
    gap: 0;
    --color: var(--orange);
  }
  ._footer .links ._accordion {
    border-bottom: 1px solid rgba(247, 59, 32, .1);
  }
  ._footer .links button {
    cursor: pointer;
  }
  ._footer .links button > .link-group-header {
    opacity: 1;
    padding: 16px 0;
  }
  ._footer .links button > .link-group-header ._icon { display: block; }
  ._footer .links ._accordion .accordion-content {
    height: 0;
    overflow: hidden;
    transition: height var(--dur) var(--ease-in-out);
  }
  ._footer .links ._accordion ul { margin-bottom: 32px; }
  /* expanded: hide the vertical bar so the "+" reads as "-" */
  ._footer .links ._accordion button[aria-expanded=true] ._icon path:first-child {
    opacity: 0;
  }
  ._footer .links a {
    width: 100%;
    padding: 8px 16px;
  }

  ._footer .bottom-cards {
    flex-direction: column-reverse;
    gap: 16px;
  }
}

/* ---- <=743px : stack the externals row, widen social gaps --------------- */
@media only screen and (max-width: 743px) {
  ._footer .externals {
    flex-direction: column;
    margin-bottom: 32px;
  }
  ._footer .externals .socials { gap: 40px; }
}

/* ---- >=2000px : switch to vw scale (matches source) --------------------- */
@media only screen and (min-width: 2000px) {
  ._footer .footer-link { font-size: .8vw; }
  ._footer .footer-link::after { bottom: .15vw; }
  ._footer ._partnership-card { min-height: 14vw; }
  ._footer ._partnership-card .badge {
    height: 3vw;
    margin-bottom: 1vw;
  }
}