/* ============================================================================
   MABA — MOBILE LAYER
   The redesign pages are ported verbatim from a desktop-only design (zero media
   queries) built almost entirely from INLINE styles. This file is the entire
   responsive fix: a stylesheet layered over those inline styles. Because inline
   styles outrank normal stylesheet rules, every rule here uses !important to win
   (the same pattern the hover layer uses). NO markup or inline-style edits.
   Loaded LAST in the stamped <head>, on all 9 pages. Breakpoints: 900 / 600.
   ========================================================================== */

/* Never allow a sideways scroll, at any width. */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, video { max-width: 100%; }

/* ── TABLET & PHONE (<= 900px) ─────────────────────────────────────────────── */
@media (max-width: 900px) {

  /* 1 · Every multi-column grid collapses to a single column. The design's grid
        templates are all inline (repeat(4,…), minmax(0,1.55fr) minmax(0,.72fr),
        1.3fr 1fr 1fr, minmax(0,1.4fr) repeat(3,…), …) — one blanket override. */
  [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }

  /* 2 · Fluid headings — override the inline `font: … <px>/… ` shorthand's size by
        targeting the semantic tags (robust; no per-size attribute selectors). */
  h1 { font-size: clamp(2rem, 8.5vw, 5.75rem) !important; line-height: 1.03 !important; }
  h2 { font-size: clamp(1.6rem, 6vw, 3.9rem) !important; line-height: 1.06 !important; }
  h3 { font-size: clamp(1.35rem, 4.6vw, 2.5rem) !important; line-height: 1.1 !important; }
  h4 { font-size: clamp(1.05rem, 3vw, 1.4rem) !important; }
  #heroWord { font-size: clamp(2.4rem, 12vw, 6rem) !important; }          /* hero rotator span */
  /* Non-heading display numerals that overflow at fixed px */
  [style*="900 62px/1"], [style*="900 58px/1"], [style*="900 56px/1"],
  [style*="900 44px/1"] { font-size: clamp(2rem, 9vw, 3.4rem) !important; }

  /* 3 · Side padding: the design's 48–56px gutters → fluid. Targets the max-width
        content wrappers (homepage/inner) and the legal-page containers. */
  [style*="max-width:1280px"], [style*="max-width:1200px"], [style*="max-width:1000px"],
  .container, .narrow, .site-nav__inner {
    max-width: 100% !important;
    padding-left: clamp(16px, 5vw, 56px) !important;
    padding-right: clamp(16px, 5vw, 56px) !important;
  }

  /* 4 · Flex rows that can't fit → wrap (audio player top row, CTA bands, footer
        bottom bar, "at a glance" rows, source/time readout, etc.). */
  [style*="justify-content:space-between"] { flex-wrap: wrap !important; }

  /* 5 · Fixed heights → min-height so scaled content isn't clipped or over-tall. */
  [style*="height:120px"] { height: auto !important; min-height: 92px !important; }  /* hero rotator row */
  [style*="height:136px"] { height: auto !important; min-height: 92px !important; }

  /* Ticker: keep the marquee readable, don't let it force width. */
  [style*="animation:mb-marquee"] { width: max-content !important; }
}

/* ── PHONE (<= 600px) ──────────────────────────────────────────────────────── */
@media (max-width: 600px) {

  /* Tighten grid gaps once stacked. */
  [style*="grid-template-columns"] { gap: 12px !important; }

  /* CTA bands (red / any) with an h2 + button laid out side-by-side: full-width stack. */
  [style*="justify-content:space-between"] > * { max-width: 100% !important; }
  [style*="background:#ef2803"][style*="justify-content:space-between"] > a,
  [style*="background:#17150f"] [style*="justify-content:space-between"] > a { width: 100% !important; text-align: center !important; }

  /* Hero audio player: the play+title block and the format chips each take a full row. */
  #heroWord { font-size: clamp(2rem, 13vw, 3.4rem) !important; }

  /* Language / feature tiles: comfortable single-column. */
  [style*="grid-template-columns"] { gap: 10px !important; }

  /* URL/action input+button rows → stack full width (download "Fetch video" form, the
     /dub "paste a link" row). Matches only `display:flex;gap:10px` rows — NOT the pill
     rows, which are `display:flex;flex-wrap:wrap;gap:10px` (flex-wrap breaks the substring). */
  [style*="display:flex;gap:10px"] { flex-direction: column !important; align-items: stretch !important; }
  [style*="display:flex;gap:10px"] > * { width: 100% !important; }

  /* Long unbreakable strings (emails, Kannada display) must not overflow. */
  a[href^="mailto:"] { word-break: break-word !important; overflow-wrap: anywhere !important; }

  /* Trim the biggest section vertical paddings a little on phones. */
  [style*="padding:82px"], [style*="padding:78px"], [style*="padding:76px"] {
    padding-top: clamp(40px, 12vw, 78px) !important;
    padding-bottom: clamp(40px, 12vw, 78px) !important;
  }
}