/* ============================================================
   RESPONSIVE OVERRIDES for the main (desktop-first) build.

   The page artboards use inline styles, which can't hold media
   queries - so this sheet adapts them from outside with
   !important rules keyed on style-attribute contents. Loaded by
   index.html only (the m. build has its own mobile.css).

   Breakpoints:
     <= 1024px  tablet - wide grids drop to 2 columns
     <=  680px  phone  - single column, compact chrome
   ============================================================ */

/* ---------- TABLET ---------- */
@media (max-width: 1024px) {
  .etp [style*="repeat(5, 1fr)"],
  .etp [style*="repeat(4, 1fr)"],
  .etp [style*="repeat(3, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Editorial rows with fixed side tracks don't fit tablet widths */
  .etp [style*="grid-template-columns: 88px 1fr 320px"],
  .etp [style*="grid-template-columns: 120px 1fr 360px"] {
    grid-template-columns: 1fr !important;
  }

  .etp section[style],
  .etp header[style],
  .etp footer[style],
  .etp > div[style] {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }

  /* The five-link nav + CTA is ~1050px wide by nature: below that,
     switch to the compact Reserve + Menu pair (full-screen overlay). */
  .etp .etp-nav { display: none !important; }
  .etp .etp-header-actions { display: flex !important; }
  .etp header[style] {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }
}

/* ---------- PHONE ---------- */
@media (max-width: 680px) {
  html, body { overflow-x: hidden; }

  /* Every inline grid -> single column... */
  .etp [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  /* ...except tight label/value rows (kept two-column, order wins) */
  .etp [style*="grid-template-columns: 14px 1fr"] { grid-template-columns: 14px 1fr !important; }
  .etp [style*="grid-template-columns: 18px 1fr"] { grid-template-columns: 18px 1fr !important; }
  .etp [style*="grid-template-columns: 20px 1fr"] { grid-template-columns: 20px 1fr !important; }
  .etp [style*="grid-template-columns: 24px 1fr"] { grid-template-columns: 24px 1fr !important; }
  .etp [style*="grid-template-columns: 28px 1fr"] { grid-template-columns: 28px 1fr !important; }
  .etp [style*="grid-template-columns: 32px 1fr"] { grid-template-columns: 32px 1fr !important; }
  .etp [style*="grid-template-columns: 40px 1fr"] { grid-template-columns: 40px 1fr !important; }
  .etp [style*="grid-template-columns: 60px 1fr"] { grid-template-columns: 60px 1fr !important; }
  /* ...and the footer link columns stay paired */
  .etp footer [style*="repeat(4, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }

  /* Gutters */
  .etp section[style],
  .etp header[style],
  .etp footer[style],
  .etp > div[style] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Type scale - inline heading sizes are desktop-tuned */
  .etp h1[style] { font-size: clamp(38px, 11vw, 56px) !important; }
  .etp h2[style] { font-size: clamp(30px, 8.5vw, 42px) !important; }
  .etp h3[style] { font-size: clamp(24px, 7vw, 34px) !important; }
  .etp p[style*="font-size: 26px"] { font-size: 19px !important; }
  .etp p[style*="font-size: 22px"] { font-size: 18px !important; }

  /* Announcement bar: keep the message, drop the right-hand tag */
  .etp header[style] + div[style]:not([role="dialog"]) span:last-child { display: none; }

  /* Sticky panels flow normally on phones */
  .etp [style*="position: sticky"] { position: static !important; }

  /* Tall min-heights lose their purpose in single-column stacks */
  .etp [style*="min-height: 2"],
  .etp [style*="min-height: 3"],
  .etp [style*="min-height: 4"],
  .etp [style*="min-height: 5"],
  .etp [style*="min-height: 6"] {
    min-height: 0 !important;
  }

  /* Wide flex rows may wrap; stacking gaps tightened */
  .etp [style*="display: flex"][style*="gap: 64px"],
  .etp [style*="display: flex"][style*="gap: 48px"] {
    flex-wrap: wrap !important;
    gap: 24px !important;
  }
  .etp [style*="gap: 80px"] { gap: 32px !important; }
  .etp [style*="gap: 64px"] { gap: 32px !important; }
  .etp [style*="gap: 48px"] { gap: 28px !important; }
}

/* ============================================================
   PHOTOGRAPHY - StoryPhoto figures
   Wide cinematic bands (21:9) become taller 4:3 frames on
   phones so the photograph keeps real presence at 390px.
   ============================================================ */
@media (max-width: 680px) {
  .etp figure > div[style*="21 / 9"] {
    aspect-ratio: 4 / 3 !important;
  }
}