/* =============================================================
   BBI - Footer
   assets/css/footer.css

   1:1 with the Figma `Footer` frame (88:191) — a 1728×415
   slab in #D9D9D9 (same layout as legacy `Group 189`).

   Figma absolute coordinates (artboard 1728 wide):

     y=60   | Brand wordmark 258x55 at x=39
            | Social rail icons at right edge (x≈1650):
            |   IG 36x36 @ y=60, X 24x24 @ y=106, YT 38x38 @ y=140
     y=74   | Three uppercase column headings at x=874 / 1180 / 1431
            |   BILLBOARD / LEGAL / SITEMAP  (20px Neue Haas Bold)
     y=118  | Each column's links (14px Azeret Mono Light #1E1E1E)
     y=167  | "THE DAILY" heading at x=39 (30px Neue Haas Bold)
            | Subline at x=234, y=181 (SIDE-BY-SIDE, not stacked)
     y=215  | Email input 536x56 (white) + Sign Up 111x56 (#00FF99)
            | "Sign Up" label 18px Zalando Sans Bold
     y=291  | 675-wide legal microcopy (10px Zalando Sans Light)
   ============================================================= */

.site-footer {
  background-color: var(--color-footer-bg);
  color: var(--color-text);
  margin-block-start: var(--space-20);
  padding: 0;
}

.site-footer__inner {
  position: relative;
  width: 100%;
  max-width: none;
  width: 100%;
  margin-inline: auto;
  padding: 60px var(--site-chrome-inline); /* Figma: 60px top; 40px side gutter */
  padding-block-end: 60px;              /* Figma: legal ends ~y=315 -> 100px breathing */
  min-height: 415px;
  box-sizing: border-box;
}

/* -------------------------------------------------------------
   5-column grid that mirrors Figma column anchors:
     [ brand / newsletter  ][ BILLBOARD ][ LEGAL ][ SITEMAP ][ ICONS ]
       x=39 .. ~720           x=874       x=1180   x=1431     x=1650
   ------------------------------------------------------------- */

.site-footer__grid {
  display: grid;
  grid-template-columns:
    minmax(0, 369px)                    /* featured image */
    auto                                /* logo + links — left-aligned beside image */
    1fr                                 /* flexible spacer — pushes social to right edge */
    auto;                               /* social rail */
  column-gap: 60px;
  row-gap: 0;
  align-items: start;
}

/* SITEMAP column temporarily hidden (bbi_footer_show_sitemap). */
.site-footer__grid--no-sitemap {
  grid-template-columns:
    minmax(0, 369px)
    auto
    1fr
    auto;
}

/* Newsletter block temporarily hidden (bbi_footer_show_newsletter). */
.site-footer__grid--no-newsletter .site-footer__brand {
  margin-bottom: 0;
}

.site-footer__col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* -------------------------------------------------------------
   Column 1: brand wordmark + newsletter block
   ------------------------------------------------------------- */

.site-footer__col--brand {
  grid-column: 1;
  align-self: stretch;
}

.site-footer__right-content {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: start;
}

.site-footer__logo-wrapper {
  margin-bottom: 40px; /* Exact 40px spacing between logo and link lists */
  margin-left: -10px;
}

.site-footer__logo-wrapper .site-footer__brand {
  margin-bottom: 0;
}

.site-footer__featured-media {
  width: 100%;
  max-width: 369px;
  height: auto;
  aspect-ratio: 369 / 480;
  overflow: hidden;
  margin-bottom: 30px;
}

.site-footer__featured-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.site-footer__links-subgrid {
  display: grid;
  grid-template-columns:
    minmax(180px, max-content)          /* BILLBOARD */
    minmax(160px, max-content)          /* LEGAL */
    minmax(120px, max-content);         /* SITEMAP */
  column-gap: 60px;
  align-items: start;
}

.site-footer__grid--no-sitemap .site-footer__links-subgrid {
  grid-template-columns:
    minmax(180px, max-content)
    minmax(160px, max-content);
}

.site-footer__col--social {
  grid-column: 4;
}

.site-footer__brand {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;               /* Flex column stretch was widening the hit target */
  width: fit-content;
  max-width: 100%;
  text-decoration: none;
  color: var(--color-text);
  margin: 0 0 52px;                     /* Figma: 167 - 60 - 55 = 52px logo->THE DAILY */
}

.site-footer__logo {
  display: block;
  /* Footer wordmark slot (524×111 desktop). cover + left center mimics the
     Figma mask (image scales to fill, anchored to the left edge) so the logo
     reads at full size instead of being letterboxed by object-fit:contain. */
  --footer-logo-width: 524;
  --footer-logo-height: 111;
  width: min(calc(var(--footer-logo-width) * 1px), 100%);
  height: auto;
  aspect-ratio: var(--footer-logo-width) / var(--footer-logo-height);
  min-width: 0;
  flex-shrink: 0;
  object-fit: cover;
  object-position: left center;
}

/* Typographic fallback when no logo is uploaded. Sized to match the logo slot. */
.site-footer__wordmark {
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(48px, 9.3vw, 97px);
  font-weight: 900;
  text-transform: lowercase;
  letter-spacing: -0.04em;
  color: var(--color-text);
  line-height: 0.9;
}

/* -------------------------------------------------------------
   THE DAILY newsletter block

   Figma puts the heading at (39, 167) and the subline at
   (234, 181). They sit on the same visual row — the subline
   baseline drops ~14px below the heading baseline. We model
   that with a flex row using baseline alignment.
   ------------------------------------------------------------- */

.bbi-newsletter {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 720px;                     /* roughly the left half of the footer */
}

.bbi-newsletter__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 20px;                            /* Figma: 234 - (39 + ~178) = ~17px */
  margin: 0 0 18px;                     /* Figma: 215 - 167 - 30 = 18px head->form */
}

.bbi-newsletter__heading {
  margin: 0;
  font-family: var(--font-display);
  /* Figma desktop: 30px. Allow a touch of fluidity for compact tablets. */
  font-size: clamp(24px, 2.4vw, 30px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--color-text);
}

.bbi-newsletter__sub {
  margin: 0;
  font-family: var(--font-body);
  font-size: 14px;                      /* Figma: 14px */
  font-weight: 300;
  line-height: 1.4;
  color: var(--color-byline);
  /* Figma 88:200: single-line subhead (whitespace-nowrap). */
  white-space: nowrap;
}

/* -- Form: white field + 20px gap + neon-green Sign Up ---------- */

.bbi-newsletter__form {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
}

.bbi-newsletter__field-group {
  display: flex;
  align-items: stretch;
  /* Figma 88:195 / 88:197: input 536 + 20px gap + button 111 = 667. */
  gap: 20px;
  width: 100%;
  max-width: 667px;
  height: 56px;                         /* Figma input/button height */
  background: transparent;              /* Gap shows the footer slab, not white. */
  border: 0;
}

.bbi-newsletter__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 56px;
  background-color: var(--color-white);
  border: 0;
  padding-inline: 20px;                 /* Figma 88:211: placeholder x ≈ 3.41% frame (~20px pad from field) */
  font-family: var(--font-body);
  font-size: 16px;                      /* Figma: 16px Zalando Sans Light */
  font-weight: 300;
  line-height: 1;
  color: var(--color-text);
  outline: none;
}

.bbi-newsletter__input::placeholder {
  color: var(--color-text);
  font-weight: 300;
  opacity: 1;
}

.bbi-newsletter__input:focus,
.bbi-newsletter__input:focus-visible {
  background-color: var(--color-white);
  outline: 2px solid var(--color-accent-green);
  outline-offset: 0;
}

.bbi-newsletter__submit {
  flex: 0 0 111px;
  width: 111px;
  height: 56px;
  background-color: var(--color-accent-green);
  color: var(--color-black);
  border: 0;
  cursor: pointer;
  font-family: var(--font-body);        /* Figma: Zalando Sans */
  font-size: 18px;                      /* Figma: 18px */
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;                 /* Figma: sentence case "Sign Up" */
  transition: background-color var(--transition-fast);
}

/* Respect HTML `hidden` — a lone `display: inline-flex` would override [hidden] (same specificity). */
.bbi-newsletter__success[hidden] {
  display: none !important;
}

.bbi-newsletter__success:not([hidden]) {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 12px 0 0;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text);
}

/* -- 10px legal microcopy ------------------------------------- */

.bbi-newsletter__notice {
  margin: 20px 0 0;                     /* Figma: 291 - 215 - 56 = 20px form->legal */
  max-width: 675px;                     /* Figma: 675 wide */
  font-family: var(--font-body);
  font-size: 10px;                      /* Figma: 10px */
  font-weight: 300;
  line-height: 1.4;                     /* Figma 88:210: leading 1.4 on microcopy */
  color: var(--color-byline);
}

.bbi-newsletter__notice a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* -------------------------------------------------------------
   Columns 2/3/4: BILLBOARD / LEGAL / SITEMAP link lists
   Figma: heading at y=74, list starting y=118. We offset the
   whole column down by 14px so heading aligns ~14px below the
   logo's top edge, matching Figma's 60->74.
   ------------------------------------------------------------- */

.site-footer__col--links {
  padding-block-start: 0;
}

.site-footer__heading {
  margin: 0 0 24px;                     /* Figma: 118 - 74 - ~20 = 24px head->list */
  padding: 0;
  border: 0;
  font-family: var(--font-display);
  font-size: 20px;                      /* Figma: 20px */
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--color-text);
  overflow-wrap: break-word;
}

.site-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  /* Figma 88:203 etc.: each link is a paragraph with a blank line (14px LH) between. */
  gap: 20px;
}

.site-footer__list a {
  display: inline-block;
  color: var(--color-body-soft);
  text-decoration: none;
  font-family: var(--font-mono);        /* Figma: Azeret Mono */
  font-size: 14px;                      /* Figma: 14px */
  font-weight: 300;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
  transition: color var(--transition-fast), padding-inline-start var(--transition-fast);
}

.site-footer__list a:hover,
.site-footer__list a:focus-visible {
  padding-inline-start: 2px;
}

/* -------------------------------------------------------------
   Column 5: stacked social icon rail
   All icons are the same size for visual consistency.
   ------------------------------------------------------------- */

.site-footer__col--social {
  align-self: start;
  align-items: flex-end;
  padding-block-start: 0;               /* aligned with brand at y=60 */
}

.site-footer__socials {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;                            /* vertical gap between icons */
}

.site-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--bbi-social-icon-size);
  height: var(--bbi-social-icon-size);
  padding: 0;
  background: transparent;             /* Figma: NO chip / NO black square */
  color: var(--color-text);
  border: 0;
  border-radius: 0;
  text-decoration: none;
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.site-footer__social-link:hover,
.site-footer__social-link:focus-visible {
  background: transparent;
  transform: translateY(-1px);
}

/* -------------------------------------------------------------
   Responsive cascade

   Below 1200px the Figma slab no longer fits at 1:1, so we relax
   the grid: link columns collapse to 3-up across the row, then
   the social rail wraps under, and finally everything stacks.
   ------------------------------------------------------------- */

/* =============================================================
   Tablet — 768px–1199px
   Layout mirrors desktop: [image] | [logo / Billboard+Legal side-by-side] | [social]
   ============================================================= */
@media (min-width: 768px) and (max-width: 1199px) {

  .site-footer__inner {
    padding: 60px 40px;
    min-height: 0;
  }

  /* Only flatten right-content so logo-wrapper and links-subgrid
     become direct grid children. links-subgrid keeps display:grid
     so Billboard + Legal stay side-by-side (desktop style). */
  .site-footer__right-content {
    display: contents;
  }

  /* links-subgrid: flex row → Billboard | Legal side by side */
  .site-footer__links-subgrid {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 32px;
  }

  .site-footer__col--footer-billboard,
  .site-footer__col--footer-legal {
    flex: 0 0 auto;
    min-width: 0;
  }

  /* -------------------------------------------------------------------
     3-column grid — mirrors desktop exactly, scaled for tablet:
       Col 1 (fixed): featured image (tall, portrait)
       Col 2 (1fr):   logo (row 1) + Billboard/Legal row (row 2)
       Col 3 (auto):  vertical social rail
  ------------------------------------------------------------------- */
  .site-footer__grid {
    display: grid;
    grid-template-columns:
      minmax(0, 280px)   /* featured image */
      1fr                /* logo + links */
      auto;              /* social rail */
    grid-template-areas:
      "media  logo   social"
      "media  links  social";
    column-gap: 48px;
    row-gap: 0;
    align-items: start;
  }

  .site-footer__grid--no-sitemap {
    grid-template-columns:
      minmax(0, 280px)
      1fr
      auto;
    grid-template-areas:
      "media  logo   social"
      "media  links  social";
  }

  /* Grid area assignments */
  .site-footer__col--left-media   { grid-area: media; align-self: start; }
  .site-footer__logo-wrapper      { grid-area: logo;  margin-bottom: 32px; margin-left: 0; }
  .site-footer__links-subgrid     { grid-area: links; }
  .site-footer__col--social       { grid-area: social; align-self: start; align-items: flex-end; }

  /* Featured image: portrait column scaled for tablet */
  .site-footer__featured-media {
    width: 100%;
    max-width: 280px;
    aspect-ratio: 369 / 480;
    margin-bottom: 0;
  }

  /* Logo scaled for tablet */
  .site-footer__logo {
    width: min(clamp(240px, 34vw, 400px), 100%);
    height: auto;
    aspect-ratio: 524 / 111;
    object-fit: cover;
    object-position: left center;
  }

  .site-footer__brand {
    margin: 0;
  }

  .site-footer__col--links {
    padding-block-start: 0;
  }

  .site-footer__heading {
    font-size: 16px;
    margin-bottom: 16px;
  }

  .site-footer__list {
    gap: 14px;
  }

  .site-footer__list a {
    font-size: 13px;
  }

  /* Vertical social rail */
  .site-footer__col--social .site-footer__socials {
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
  }

  .site-footer__col--social .site-footer__socials > li {
    margin: 0;
    padding: 0;
    flex: 0 0 auto;
  }

  .site-footer__col--social .site-footer__social-link {
    flex: 0 0 auto;
    width: var(--bbi-social-icon-size);
    height: var(--bbi-social-icon-size);
    min-width: 0;
    min-height: 0;
    max-width: var(--bbi-social-icon-size);
    max-height: var(--bbi-social-icon-size);
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
}

/* iPad portrait (768–900px): tighten gutters slightly */
@media (min-width: 768px) and (max-width: 900px) {
  .site-footer__inner {
    padding: 50px 28px;
  }

  .site-footer__grid {
    grid-template-columns:
      minmax(0, 210px)
      1fr
      auto;
    column-gap: 32px;
  }

  .site-footer__featured-media {
    max-width: 210px;
  }

  .site-footer__logo {
    width: min(clamp(190px, 30vw, 320px), 100%);
  }

  .site-footer__links-subgrid {
    gap: 24px;
  }

  .site-footer__heading {
    font-size: 14px;
    margin-bottom: 12px;
  }

  .site-footer__list a {
    font-size: 12px;
  }
}

/* WoMI label is two <span>s in markup; desktop keeps a single line. */
@media (min-width: 768px) {
  .site-footer__list-link--womi-split .site-footer__list-link-line {
    display: inline;
  }

  .site-footer__list-link--womi-split .site-footer__list-link-line + .site-footer__list-link-line::before {
    content: ' ';
  }
}

/* =============================================================
   Mobile — requested order: LOGO → IMAGE → COLUMNS → SOCIAL ICONS
   (max-width: 767px)
   ============================================================= */
@media (max-width: 767px) {
  .site-footer {
    margin-block-start: 40px;
  }

  .site-footer__inner {
    padding: 60px var(--container-padding, 20px) 60px;
    min-height: 0;
  }

  /* ------------------------------------------------------------------
     Flatten the grid into a single-column flex stack so we can
     control order freely regardless of DOM structure.
     The right-content and links-subgrid wrappers become transparent
     to layout (display:contents).
  ------------------------------------------------------------------ */
  .site-footer__grid {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  /* Flatten wrapper elements so their children participate directly
     in the flex stack with correct order.
     Note: links-subgrid is NOT flattened here — it stays as a flex row
     container for the link columns (overrides tablet display:contents). */
  .site-footer__right-content {
    display: contents;
  }

  /* ------------------------------------------------------------------
     ORDER:
       1. Logo wrapper          (order: 1)
       2. Left-media / image    (order: 2)
       3. Billboard column      (order: 3)
       4. Legal column          (order: 3) — side-by-side with billboard
       5. Sitemap column        (order: 3) — same row
       6. Social icons          (order: 4)
  ------------------------------------------------------------------ */

  /* 1 — Logo */
  .site-footer__logo-wrapper {
    order: 1;
    margin-bottom: 30px;
    margin-left: 0; /* reset desktop -10px shift */
  }

  /* 2 — Featured image */
  .site-footer__col--left-media {
    order: 2;
    margin-bottom: 30px; /* controls gap to link columns */
  }

  /* Featured image: full width on mobile.
     Zero out the base margin-bottom (which is for the newsletter gap on
     desktop) so it doesn't double-stack with the col's own margin-bottom. */
  .site-footer__featured-media {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 536 / 697;
    margin-bottom: 0;
  }

  /* 3 — Link columns: wrap horizontally in their own row */
  .site-footer__col--footer-billboard,
  .site-footer__col--footer-legal,
  .site-footer__col--footer-sitemap {
    order: 3;
  }

  /* Group the link columns into a horizontal flex row by
     wrapping them in a pseudo-row using a sub-flex approach.
     Because display:contents on .site-footer__links-subgrid
     makes the columns direct flex children, we use a row
     wrapping trick — set them as inline-block inside a
     flex wrapper. Instead, we rely on the grid approach for columns. */

  /* Reset display:contents for mobile — use a flex row for link columns */
  .site-footer__links-subgrid {
    display: flex; /* overrides tablet display:contents */
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: clamp(16px, 5vw, 32px);
    order: 3;
    margin-bottom: 32px;
  }

  .site-footer__col--footer-billboard,
  .site-footer__col--footer-legal,
  .site-footer__col--footer-sitemap {
    flex: 1 1 0;
    min-width: 0;
    order: unset; /* order managed by parent flex container */
  }

  /* 4 — Social icons */
  .site-footer__col--social {
    order: 4;
    align-items: flex-start;
    align-self: stretch;
    margin-top: 0;
    padding-block-start: 0;
  }

  /* ---- Logo ---- */
  .site-footer__brand {
    display: block;
    width: 100%;
    max-width: 100%;
    align-self: stretch;
    margin: 0;
  }

  .site-footer__logo {
    width: min(175px, 100%); /* 175.17×37.17 target, responsive */
    height: auto;
    aspect-ratio: 524 / 111;
    min-width: 0;
    object-fit: cover;
    object-position: left center;
  }

  .site-footer__wordmark {
    width: 100%;
  }

  /* ---- Newsletter (inside col--left-media if shown) ---- */
  .bbi-newsletter {
    width: 100%;
    max-width: 100%;
  }

  .bbi-newsletter__head {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 12px;
    margin: 0 0 16px;
  }

  .bbi-newsletter__heading {
    flex: 0 0 auto;
    font-size: 20px;
    line-height: 1;
  }

  .bbi-newsletter__sub {
    flex: 1 1 12rem;
    min-width: 0;
    font-size: 10px;
    line-height: 1.4;
    white-space: normal;
  }

  .bbi-newsletter__field-group {
    height: 35px;
    gap: 12px;
    max-width: 100%;
  }

  .bbi-newsletter__input {
    height: 35px;
    font-size: 12px;
    padding-inline: 12px;
  }

  .bbi-newsletter__submit {
    flex: 0 0 80px;
    width: 80px;
    height: 35px;
    font-size: 14px;
  }

  .bbi-newsletter__notice {
    margin-top: 12px;
    max-width: 100%;
    font-size: 8px;
    line-height: 1.5;
  }

  /* ---- Link columns typography ---- */
  .site-footer__col--links {
    padding-block-start: 0;
    min-width: 0;
  }

  .site-footer__heading {
    font-size: 14px;
    margin-bottom: 8px;
    white-space: nowrap;
    overflow-wrap: normal;
  }

  .site-footer__list {
    gap: 5px;
  }

  .site-footer__list a {
    font-size: 11px;
    line-height: 1.2;
    padding-block: 0;
  }

  /* WoMI footer label — two lines on mobile */
  .site-footer__list-link--womi-split {
    display: block;
    white-space: normal;
    line-height: 1.25;
  }

  .site-footer__list-link-line {
    display: block;
  }

  /* ---- Horizontal social icons ---- */
  .site-footer__col--social .site-footer__socials {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    width: auto;
    max-width: none;
    gap: 16px;
    column-gap: 16px;
    row-gap: 0;
  }

  .site-footer__col--social .site-footer__socials > li {
    margin: 0;
    padding: 0;
    flex: 0 0 auto;
  }

  .site-footer__col--social .site-footer__social-link {
    position: relative;
    flex: 0 0 auto;
    width: var(--bbi-social-icon-size);
    height: var(--bbi-social-icon-size);
    min-width: 0;
    min-height: 0;
    max-width: var(--bbi-social-icon-size);
    max-height: var(--bbi-social-icon-size);
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }

  /* Expanded tap target */
  .site-footer__col--social .site-footer__social-link::before {
    content: "";
    position: absolute;
    inset: -12px;
    z-index: 0;
  }

  .site-footer__col--social .site-footer__social-link .bbi-icon-svg,
  .site-footer__col--social .site-footer__social-link .screen-reader-text {
    position: relative;
    z-index: 1;
  }
}

/* Touch phones: footer.css loads after components; keep gap-only spacing on mobile. */
@media (max-width: 767px) and (hover: none) and (pointer: coarse) {
  .site-footer__list a {
    padding-block: 0;
  }

  .site-footer__col--social .site-footer__social-link {
    min-width: 0;
    min-height: 0;
  }
}

/* Tiny phones: keep the same mobile structure; only tighten gutters. */
@media (max-width: 479px) {
  .site-footer__inner {
    padding-inline: var(--container-padding, 16px);
  }

  .site-footer__grid {
    column-gap: 10px;
    row-gap: 0;
  }

  .bbi-newsletter__head {
    gap: 6px 10px;
  }

  .bbi-newsletter__sub {
    flex-basis: 100%;
  }
}