/* footer.small.css — the closing poster below 900px
 *
 * TWO BANDS: the designed mobile layout first, then the undesigned tablet
 * fallback at the end of the file. The tablet block is fenced with
 * `min-width: 768px`, so it cannot reach into the mobile block and the order
 * between them carries no meaning.
 *
 * From the Footer design system exploration mobile handoff (version 7c). Auto
 * height rather than a full viewport, a 20px gutter throughout, and the poster
 * re-stacked top to bottom: watermark, meta bar, headline block, capacity
 * banner, two contact rows, a two-column social grid, legal.
 *
 * The desktop centres its headline; this one is flush left. The watermark comes
 * BACK — the old undesigned fallback dropped it, the mobile design bleeds it off
 * the left edge instead.
 *
 * NOTE ON THE BREAKPOINT: this handoff says to switch at ~900px. The rest of the
 * page switches at 768px and the 768-900 band already has a coherent tablet
 * treatment for every section, so the mobile footer owns the same range as
 * everything else. The 900px band keeps the old stacking rules.
 */

@media (max-width: 767.98px) {

  .ftr {
    min-height: 0;
    display: block;
  }

  /* Bled off the left edge, no centring transform — this is not the desktop
     watermark scaled down, it is a different placement. */
  .ftr__watermark {
    display: block;
    left: -38px; top: 118px;
    transform: none;
    font-size: 6.4rem;
    line-height: .78;
    color: rgba(244, 242, 237, .045);
  }


  /* --- meta bar ------------------------------------------------------------ */

  .ftr__meta {
    padding: 22px 20px 0;
    font-size: .55rem;
    letter-spacing: .14em;
    color: var(--red-dark);
  }
  .ftr__live { gap: 8px; }
  .ftr__dot { width: 6px; height: 6px; box-shadow: 0 0 10px 1px var(--red-dark); }
  /* The place name is dropped; the offset stays, after the clock rather than
     before it, and drops to the muted grey. */
  .ftr__zonelabel, .ftr__div { display: none; }
  .ftr__zone { order: 2; color: var(--on-dark-3); }
  .ftr__clock {
    order: 1;
    /* 1.55x the .66rem this used to be, on Zsolt's instruction. That lands at
       16.3px, which is where the desktop clock's clamp starts — so the two
       breakpoints now read at the same size rather than the mobile one being a
       shrunk version of it. The .55rem meta row around it is unchanged, so the
       clock is deliberately the loud element in that bar. */
    font-size: 1.02rem;
    letter-spacing: .12em;
    text-shadow: 0 0 14px rgba(var(--red-accent-rgb), .5);
  }


  /* --- headline block — flush left ---------------------------------------- */

  .ftr__hero {
    flex: none;
    align-items: flex-start;
    text-align: left;
    padding: 46px 20px 44px;
  }
  .ftr__eyebrow { font-size: .55rem; letter-spacing: .18em; margin-bottom: 18px; }
  .ftr__h2 {
    font-size: 2.35rem;
    line-height: .94;
    letter-spacing: -.04em;
    max-width: none;
  }
  /* THREE LINES HERE, ONE SENTENCE ON DESKTOP. The three spans read inline above
     768px and stack below it, which is the whole of what copy.js's mob.ftrH2a/b/c
     used to do by carrying a second copy of each with a trailing "\n". The
     spaces inside the desktop strings collapse at the end of a line, so nothing
     has to change in the copy. */
  .ftr__h2 > span { display: block; }

  /* The other half of the pair in footer.css. */
  .wide-only   { display: none; }
  .narrow-only { display: block; }
  .ftr__lede { margin-top: 20px; font-size: .94rem; line-height: 1.6; max-width: none; text-wrap: pretty; }


  /* --- capacity banner ----------------------------------------------------
     Still the only CTA in the section — do not add a second. The white square
     moves from the line to the CTA row, so it is drawn there as a pseudo-element
     rather than reordered: a flex column cannot put it back on the label's row. */

  .ftr__banner {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 20px;
  }
  .ftr__banner-sq { display: none; }
  .ftr__banner-line { font-size: 1.06rem; line-height: 1.25; letter-spacing: -.01em; }
  .ftr__banner-cta { gap: 10px; font-size: .63rem; letter-spacing: .18em; }
  .ftr__banner-cta::before {
    content: '';
    width: 8px; height: 8px;
    background: #fff;
    flex: none;
  }
  .ftr__banner-arrow { font-size: .9rem; }


  /* --- contact rows — two full-width links -------------------------------- */

  .ftr__rows { grid-template-columns: 1fr; border-top: 0; }
  .ftr__row,
  .ftr__row--last {
    padding: 20px;
    border-right: 0;
    border-top: 0;
    justify-content: space-between;
    gap: 16px;
  }
  /* The rule sits between the two rows, not above the pair. */
  .ftr__row--last { border-top: 1px solid rgba(244, 242, 237, .10); }
  /* The 01 · EMAIL index is a desktop column label; the row itself says it. */
  .ftr__row-idx { display: none; }
  .ftr__row-val { font-size: 1.02rem; letter-spacing: .015em; }
  .ftr__row-act { font-size: .55rem; letter-spacing: .18em; }


  /* --- social — a header row and a two-column grid ------------------------ */

  .ftr__social {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: baseline;
  }
  .ftr__follow {
    grid-row: 1; grid-column: 1;
    padding: 14px 20px 10px;
    border-right: 0;
    font-size: .55rem;
    letter-spacing: .18em;
  }
  .ftr__chanmeta {
    grid-row: 1; grid-column: 2;
    justify-content: flex-end;
    padding: 14px 20px 10px;
    font-size: .55rem;
    letter-spacing: .16em;
  }
  .ftr__channels {
    grid-row: 2; grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .ftr__chan {
    flex: none;
    min-width: 0;
    gap: 4px;
    padding: 14px 20px;
    border-right: 0;
    border-top: 1px solid rgba(244, 242, 237, .10);
  }
  .ftr__chan-name { font-size: .9rem; letter-spacing: .015em; }
  .ftr__chan-handle { font-size: .55rem; letter-spacing: .08em; }


  /* --- legal --------------------------------------------------------------
     Policy links on their own row, then the wordmark against ↑ TOP under a
     hairline. The hairline is drawn as two abutting borders — column-gap is 0
     so they read as one rule. */

  .ftr__legal {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 0;
    row-gap: 12px;
    align-items: baseline;
    padding: 18px 20px 24px;
    font-size: .575rem;
    letter-spacing: .14em;
  }
  .ftr__links { grid-row: 1; grid-column: 1 / -1; gap: 18px; }
  .ftr__mark {
    grid-row: 2; grid-column: 1;
    padding-top: 12px;
    border-top: 1px solid rgba(244, 242, 237, .10);
    letter-spacing: .22em;
  }
  .ftr__top {
    grid-row: 2; grid-column: 2;
    padding-top: 12px;
    border-top: 1px solid rgba(244, 242, 237, .10);
    text-align: right;
  }
}


/* =========================================================================
   TABLET FALLBACK — 768 to 900px
   Not designed. Follows the desktop handoff's recommendation: stack the contact
   rows, let the social strip scroll, drop the watermark, and pull the gutter in
   from 56px to 24px. Below 768px the mobile handoff's own layout takes over
   (footer.small.css), so this band is fenced off from it.
   ========================================================================= */

@media (min-width: 768px) and (max-width: 900px) {
  .ftr { min-height: 0; }
  .ftr__watermark { display: none; }

  .ftr__meta { padding: 24px 24px 0; flex-direction: column; align-items: flex-start; gap: 10px; }
  .ftr__hero { padding: 56px 24px; }
  .ftr__h2 { font-size: 2.6rem; }
  .ftr__lede { font-size: 1rem; }

  .ftr__banner { padding: 18px 24px; flex-direction: column; align-items: flex-start; gap: 14px; }
  .ftr__banner-line { font-size: 1.1rem; }

  .ftr__rows { grid-template-columns: 1fr; }
  .ftr__row,
  .ftr__row--last {
    padding: 20px 24px;
    border-right: none;
    border-bottom: 1px solid rgba(244, 242, 237, .10);
    flex-wrap: wrap;
    gap: 8px 16px;
  }
  .ftr__row-val { font-size: 1.15rem; }

  .ftr__social { display: block; }
  .ftr__follow {
    padding: 14px 24px;
    border-right: none;
    border-bottom: 1px solid rgba(244, 242, 237, .10);
  }
  /* Horizontal scroll rather than squeezing three cells into 390px. */
  .ftr__channels {
    overflow-x: auto;
    scrollbar-width: none;
  }
  .ftr__channels::-webkit-scrollbar { display: none; }
  .ftr__chan { flex: 0 0 auto; min-width: 44vw; padding: 16px 24px; }
  .ftr__chanmeta { padding: 14px 24px; border-top: 1px solid rgba(244, 242, 237, .10); }

  .ftr__legal {
    padding: 18px 24px 22px;
    flex-direction: column; align-items: flex-start; gap: 14px;
  }
}