/* 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; }
}

/* Sector initials inside the circles (Insiders masthead, homepage Today's Read),
   same treatment as the byline badges: editorial serif, white. All widths. */
html .editor-mini-portrait, html .issue-spotlight-portrait {
  display: flex; align-items: center; justify-content: center;
  color: white; font-family: var(--font-editorial); font-weight: 500; line-height: 1;
}
html .editor-mini-portrait { font-size: 28px; }
html .issue-spotlight-portrait { font-size: 16px; }

/* Footer wordmark never wider than its column */
html .footer-wordmark img { max-width: 100%; height: auto; }

/* ── Mobile menu (hamburger), injected by assets/js/tgn-menu.js ── */
html .tgn-burger, html .tgn-menu { display: none; }
@media (max-width: 720px) {
  html .tgn-burger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; margin-left: -8px; flex: 0 0 auto;
    background: none; border: 0; color: var(--ink, #132240); cursor: pointer;
  }
  html .tgn-burger .tgn-burger-close { display: none; }
  html.tgn-menu-open .tgn-burger .tgn-burger-open { display: none; }
  html.tgn-menu-open .tgn-burger .tgn-burger-close { display: block; }
  /* The burger replaces the sub-nav and the square mark on phones */
  html nav.subnav { display: none; }
  html .site-header .header-mark { display: none; }
  html .site-header .header-name img { max-width: 180px; }
  html .tgn-menu:not([hidden]) {
    display: block; background: var(--page-bg, #F0F2F5);
    border-bottom: 1px solid var(--rule, #D9DEE5);
  }
  html .tgn-menu ul { list-style: none; margin: 0; padding: 6px 16px 14px; }
  html .tgn-menu li + li { border-top: 1px solid var(--rule, #D9DEE5); }
  html .tgn-menu a {
    display: block; padding: 15px 2px; text-decoration: none;
    font-family: var(--font-editorial, Georgia, serif); font-size: 22px; color: var(--ink, #132240);
  }
  html .tgn-menu a.active { font-weight: 600; }
}

/* ── Reading-progress bars: off on phones. Mobile browsers draw their own
   floating address bar over the top edge, so a fixed bar there reads as a glitch. ── */
@media (max-width: 720px) {
  html .tgn-progress, html .progress-bar, html #progressBar { display: none !important; }
}

/* ── Carousels: visible arrows on touch screens (desktop shows them on hover) ── */
@media (hover: none), (max-width: 900px) {
  html .tgn-carousel .tgn-arrow:not(:disabled) { display: inline-flex; }
  html .tgn-arrow { width: 36px; height: 36px; font-size: 20px; }
  html .tgn-arrow.prev { left: 4px; }
  html .tgn-arrow.next { right: 4px; }
}

/* Big display headlines never spill past a phone screen */
@media (max-width: 720px) {
  html .insiders-hero-title { font-size: clamp(30px, 9.5vw, 44px); line-height: 1.12; }
  html h1, html h2 { overflow-wrap: break-word; }
}