/* TGN mobile pass, 2026-10-16.
   Loaded last on every page. Rules are prefixed with `html` so they win over
   page-level <style> blocks of equal specificity. */

/* Safety net: no sideways page scroll on any page. clip (not hidden) keeps sticky working. */
html, html body { overflow-x: clip; }

/* Wide tables scroll inside their own box instead of widening the page */
html .data-table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 720px) {

  /* ── Top strip: one calm line, no duplicate CTA ── */
  html .promo-strip-row {
    justify-content: space-between; gap: 12px;
    padding: 8px 16px; font-size: 11.5px; line-height: 1.35; text-align: left;
  }
  html .promo-strip-social { gap: 12px; flex: 0 0 auto; }

  /* ── Header: mark + wordmark + compact button on one row ── */
  html .site-header .header-row { padding: 12px 16px; gap: 12px; }
  html .site-header .header-name { flex: 1 1 auto; min-width: 0; justify-content: flex-start; }
  html .site-header .header-subscribe {
    padding: 9px 14px; font-size: 13px; line-height: 1.2; white-space: nowrap; flex: 0 0 auto;
  }
  html .site-header .header-icon, html .site-header .header-signin { display: none; }

  /* ── Sub-nav: swipeable, no visible scrollbar, no two-line items ── */
  html .subnav .subnav-row, html .subnav-row {
    justify-content: flex-start; gap: 22px; padding: 12px 16px;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  html .subnav-row::-webkit-scrollbar { display: none; }
  html .subnav-link { white-space: nowrap; flex: 0 0 auto; font-size: 13px; }

  /* ── Homepage hero: text sits in the card, nothing cut off ── */
  html .hero { margin: 20px auto 36px; padding: 0 16px; }
  html .hero-card { aspect-ratio: auto; min-height: 460px; display: flex; }
  html .hero-overlay {
    position: relative; inset: auto; width: 100%;
    padding: 28px 22px; align-items: flex-end;
    background: linear-gradient(180deg, rgba(8,16,30,0.30) 0%, rgba(8,16,30,0.62) 40%, rgba(8,16,30,0.90) 100%);
  }
  html .hero-blur { -webkit-mask-image: none; mask-image: none; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
  html .hero-tile-label { display: none; }
  html .hero-title { font-size: 27px; line-height: 1.15; }
  html .hero-dek { font-size: 14.5px; }

  /* ── Four Elements: one card per row, nothing overflows ── */
  html .four-elements { padding: 56px 0; }
  html .four-elements-grid { grid-template-columns: 1fr; gap: 14px; }
  html .element-card { padding: 26px 22px 22px; }
  html .element-name { overflow-wrap: anywhere; }

  /* ── Insider envelope: name and tag stack instead of overlapping ── */
  html .insider-strip-v2 { padding: 56px 16px; }
  html .insider-strip-v2-envelope { width: 78%; }
  html .insider-strip-v2-envelope-name { font-size: 20px; bottom: auto; top: 46%; right: 8%; line-height: 1.15; }
  html .insider-strip-v2-envelope-tag { bottom: 9%; right: 8%; }

  /* ── About: pillar cards one per row ── */
  html .about-pillars-v2-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  html .ap-card { padding: 26px 22px; }

  /* ── Insiders: tier card and waitlist form fit the screen ── */
  html .tiers { padding: 48px 16px; }
  html .tiers-grid { grid-template-columns: minmax(0, 1fr); }
  html .tier-card { padding: 32px 22px; min-width: 0; }
  html .waitlist-form { flex-direction: column; }
  html .waitlist-input { width: 100%; min-width: 0; }

  /* ── Section rhythm: no dead gaps between blocks ── */
  html .issue-spotlight { margin-bottom: 0; }
  html .latest-issues { padding-top: 48px; }

  /* ── Article key-number strips and meta lines ── */
  html .kicker { flex-wrap: wrap; row-gap: 6px; }
}

/* Wordmark: "The Greek Narrative" is always ONE line. On phones it scales to the
   space left beside the mark and a short "Subscribe" button. */
html .header-subscribe .hs-short { display: none; }
@media (max-width: 600px) {
  html .header-subscribe .hs-long { display: none; }
  html .header-subscribe .hs-short { display: inline; }
  html .site-header .header-name { display: flex; align-items: center; }
  html .site-header .header-name a { display: block; min-width: 0; max-width: 100%; }
  html .site-header .header-name img { height: auto; max-height: 15px; width: 100%; max-width: 200px; }
  html .site-header .header-mark img { width: 28px; height: 28px; }
}

/* Very narrow phones */
@media (max-width: 380px) {
  html .site-header .header-subscribe { padding: 8px 11px; font-size: 12px; }
  html .promo-strip-social { display: none; }
}