/* ─────────────────────────────────────────
   THE LEDGER — mobile.css
   All responsive breakpoints
   ───────────────────────────────────────── */

/* ── TABLET (≤1024px) ── */
@media (max-width: 1024px) {

  :root { --gutter: 24px; }

  .masthead-inner {
    grid-template-columns: 1fr auto;
  }
  .mh-left { display: none; }

  /* Hero: stack image above content, hide sidebar */
  .bh-inner {
    grid-template-columns: 1fr;
  }
  .bh-lead {
    border-right: none;
    padding-right: 0;
    padding-bottom: 32px;
  }
  .bh-sidebar { display: none; }

  /* Pillar feed: 2-col wrap */
  .pillar-feed-inner {
    grid-template-columns: 1fr 1fr;
  }
  .pf-col:nth-child(n+3) {
    border-top: 1px solid var(--rule);
  }
  .pf-col:nth-child(2) { border-right: none; }
  .pf-col:nth-child(4) { border-right: none; }

  /* Tools: 2-col */
  .tools-grid { grid-template-columns: 1fr 1fr; }

  /* Articles: 2-col */
  .article-grid { grid-template-columns: 1fr 1fr; }

  /* Footer: 2-col */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

/* ── MOBILE (≤768px) ── */
@media (max-width: 768px) {

  :root { --gutter: 16px; }

  /* Utility bar: compact */
  .utility-bar { padding: 5px var(--gutter); flex-wrap: wrap; gap: 6px; }
  .ub-right a { margin-left: 10px; font-size: 8px; }
  #ub-date { display: none; }

  /* Masthead */
  .masthead-inner { height: 58px; }
  .logo { font-size: 24px; }
  .logo-sub { font-size: 6px; letter-spacing: 3px; }
  .mh-btn:not(.primary) { display: none; }
  .hamburger { display: block; }

  /* Mobile nav: collapse */
  .section-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 300;
    box-shadow: 0 8px 32px rgba(0,0,0,.3);
  }
  .section-nav.open { display: block; }
  .section-nav-inner {
    flex-direction: column;
    padding: 0;
  }
  .snav-item {
    padding: 14px 20px;
    border-right: none;
    border-bottom: 1px solid var(--nav-border);
    font-size: 11px;
  }
  .snav-divider { display: none; }

  /* Ticker: smaller text */
  .tick-item { padding: 0 14px; }
  .tick-name { font-size: 8px; }
  .tick-val  { font-size: 9.5px; }
  .tick-chg  { display: none; }
  .ticker-label { font-size: 7.5px; padding: 0 10px; }
  .ticker-track { padding-left: 100px; }

  /* Hero: full width, compact */
  .broadsheet-hero { padding: 0; }
  .bh-inner { display: block; }
  .bh-lead { padding: 0 var(--gutter) 28px; border-right: none; }
  .bh-image-wrap {
    margin: 0 0 20px;
    border-radius: 0;
    aspect-ratio: 16/8;
  }
  .bh-headline { font-size: clamp(22px, 5vw, 32px); letter-spacing: -0.5px; }
  .bh-deck { font-size: 14px; }
  .bh-kicker { font-size: 8px; }

  /* Pillar feed: single column horizontal scroll */
  .pillar-feed { overflow-x: auto; }
  .pillar-feed-inner {
    grid-template-columns: repeat(5, 260px);
    padding-bottom: 16px;
  }
  .pf-col {
    padding: 20px 16px;
    border-right: 1px solid var(--rule) !important;
    border-top: none !important;
  }

  /* Chips to scroll section nav on mobile */
  .mobile-section-chips {
    display: flex;
    overflow-x: auto;
    gap: 8px;
    padding: 12px var(--gutter);
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    -webkit-overflow-scrolling: touch;
  }
  .mobile-section-chips::-webkit-scrollbar { display: none; }
  .chip {
    font-family: 'DM Mono', monospace;
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 6px 14px;
    border: 1px solid var(--rule);
    white-space: nowrap;
    color: var(--ink-muted);
    background: var(--cream);
    cursor: pointer;
    transition: all .2s;
    text-decoration: none;
    display: inline-block;
  }
  .chip:hover, .chip.active { background: var(--ink); color: var(--cream); border-color: var(--ink); }
  .chip.agri       { border-color: var(--agri);       color: var(--agri); }
  .chip.banking    { border-color: var(--banking);    color: var(--banking); }
  .chip.econ       { border-color: var(--econ);       color: var(--econ); }
  .chip.data       { border-color: var(--data);       color: var(--data); }
  .chip.leadership { border-color: var(--leadership); color: var(--leadership); }

  /* Tools: single column */
  .tools-grid { grid-template-columns: 1fr; }
  .tool-card { padding: 24px 20px; }

  /* Articles: single column */
  .article-grid { grid-template-columns: 1fr; background: none; gap: 0; }
  .article-card { border-bottom: 1px solid var(--rule); }

  /* Newsletter: stack */
  .nl-bar { padding: 28px var(--gutter); }
  .nl-inner { flex-direction: column; gap: 20px; }
  .nl-form { min-width: 100%; width: 100%; }
  .nl-text h3 { font-size: 18px; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom { flex-direction: column; text-align: center; gap: 8px; }
  footer { padding: 36px var(--gutter) 24px; }

  /* Article page */
  .article-wrap { padding: 28px var(--gutter); }
  .article-headline { letter-spacing: -.5px; }
  .article-deck { font-size: 16px; }
  .article-body { font-size: 16px; }

  /* Ad slot */
  .ad-slot.lb { height: 60px; }

  /* Sec label */
  .sec-label h2 { font-size: 9px; letter-spacing: 3px; }
}

/* ── SMALL MOBILE (≤480px) ── */
@media (max-width: 480px) {

  .logo { font-size: 20px; }
  .bh-headline { font-size: 22px; }
  .bh-image-wrap { aspect-ratio: 4/3; }

  .pillar-feed-inner { grid-template-columns: repeat(5, 240px); }

  .mh-btn.primary { font-size: 8px; padding: 6px 10px; letter-spacing: 1px; }

  .the-brief li { font-size: 11px; }
}

/* ── PRINT ── */
@media print {
  .utility-bar, .section-nav, .ticker-wrap, .nl-bar, footer, .hamburger { display: none !important; }
  .masthead { position: static; border-bottom: 2px solid #000; }
  body { font-size: 12pt; }
  .article-body { font-size: 11pt; line-height: 1.6; }
}