/* ==========================================================================
   Media Bezirgan live front end: MOBILE / TABLET pass (loaded last).
   The approved mockups are desktop compositions: desktop.css (wide container, multi-column news
   layouts) applies at every width, and the mockup base blocks only hide the nav below 900px. This
   file folds those layouts into one column on phones and keeps a usable navigation row.
   ========================================================================== */

/* ---------- Tablet / small laptop ---------- */
@media (max-width: 1180px) {
  :root { --gut: 28px; }
  .cols, .s-cols { grid-template-columns: minmax(0,1fr) 320px; gap: 40px; }
  .article-layout { grid-template-columns: minmax(0,1fr) 320px; gap: 40px; }
  .drow { grid-template-columns: 280px minmax(0,1fr); gap: 24px; }
  .timeline li.has-thumb { grid-template-columns: 260px minmax(0,1fr); gap: 22px; }
  .grid4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid4 .dcard:nth-child(2n+1)::before { display: none; }
  .cgrid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .lead-rel li a { grid-template-columns: 96px minmax(0,1fr); }
}

/* ---------- Phones and narrow tablets ---------- */
@media (max-width: 900px) {
  :root { --gut: 18px; }
  body { font-size: 16px; }

  /* Header: brand + Donate on one line, the section links as a scrollable row beneath. */
  .header-inner { height: auto; flex-wrap: wrap; row-gap: 0; padding: 12px var(--gut) 0; }
  .brand-mark { font-size: 1.55rem; }
  .nav { display: flex !important; order: 3; width: 100%; gap: 22px; padding: 10px 0 12px; margin-top: 10px;
    border-top: 1px solid rgba(246,243,238,.14); overflow-x: auto; white-space: nowrap; font-size: 13px; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .nav .btn { padding: 7px 14px; font-size: 12px; margin-left: auto; }

  /* Footer */
  .site-footer { padding: 40px var(--gut) 28px; }
  .footer-inner { grid-template-columns: 1fr 1fr !important; gap: 28px; }
  .footer-inner > div:first-child { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; gap: 6px; }

  /* Shared blocks */
  .section-head h2, .list-head h2 { font-size: 1.55rem; }
  .list-head { flex-wrap: wrap; gap: 6px 16px; }
  .edition { flex-direction: column; align-items: flex-start; gap: 6px; font-size: 11px; }
  .lead-pkg { grid-template-columns: 1fr; gap: 20px; padding: 20px 0 28px; }
  /* Phone order: image, then the lead text, then "More on this investigation" (desktop keeps the list under the image). */
  .lead-left { display: contents; }
  .lead-pkg > .lead-left > .lead-media { order: 1; }
  .lead-pkg > .lead-text { order: 2; }
  .lead-pkg > .lead-left > .lead-rel { order: 3; }
  .lead-text { gap: 12px; }
  .lead-text h1, .lead-text h2 { font-size: 2.05rem; }
  .lead-dek { font-size: 1.05rem; }
  .lead-rel ul { grid-template-columns: 1fr; gap: 12px; }
  .lead-rel li a { grid-template-columns: 112px minmax(0,1fr); }
  .grid4 { gap: 22px; }
  .dcard h3 { font-size: 1.25rem; }
  .dcard p { font-size: 14.5px; }
  .blk { padding: 28px 0 4px; }
  .cols { grid-template-columns: 1fr !important; gap: 32px; padding: 24px 0 40px; }
  .rail { position: static; gap: 20px; }
  .rbox { padding: 18px 18px 20px; }
  .drow { grid-template-columns: 132px minmax(0,1fr); gap: 14px; padding: 18px 0; }
  .drow h3 { font-size: 1.22rem; line-height: 1.08; }
  .drow p { font-size: 14.5px; }
  .drow .kline { gap: 6px; }
  .kick { font-size: 11px; }
  .donate-inner { padding-top: 28px; padding-bottom: 28px; }
  .donate-copy h2 { font-size: 1.6rem; }
  .dstrip p { font-size: 15.5px; }
  .pager { flex-wrap: wrap; justify-content: center; }

  /* Categories index */
  .ix-hero { padding-top: 28px; }
  .ix-hero .inner { grid-template-columns: 1fr; gap: 16px; padding-bottom: 20px; }
  .ix-hero h1 { font-size: 3rem; }
  .ix-hero p { font-size: 1.05rem; }
  .cgrid { grid-template-columns: 1fr !important; gap: 20px; margin: 20px 0; }
  .ccard.span2 { grid-column: auto; }
  .ctop { min-height: 0; padding: 18px; }
  .ctop .num { font-size: 3.6rem; }
  .ctop h2 { font-size: 1.4rem; }
  .clead { padding: 16px 18px 4px; }
  .clead h3 { font-size: 1.3rem; }
  .ccard .heads { padding: 4px 18px 8px; }
  .ccard .heads li { grid-template-columns: 104px minmax(0,1fr); gap: 12px; }
  .cfoot { flex-wrap: wrap; gap: 10px; }
  .tile2 { grid-template-columns: 1fr; padding: 18px; }
  .docs { padding: 4px 18px 18px; }
  .docs-row { grid-template-columns: 1fr 1fr; }

  /* Category / tag / Watch hero */
  .c-hero { padding: 26px 0 24px; }
  .c-hero .wrap { grid-template-columns: 1fr; gap: 18px; }
  .c-hero h1 { font-size: 2.5rem; margin: 6px 0 10px; }
  .c-hero p.c-desc { font-size: 1.05rem; }
  .c-stat b { font-size: 1.9rem; }
  .c-stat:nth-child(even) { padding-left: 18px; }
  .c-stat:nth-child(odd) { padding-right: 14px; }
  .earlier { padding: 12px 0 40px; }

  /* Story page */
  .article-wrap { padding: 22px var(--gut) 16px; }
  .article-layout { grid-template-columns: 1fr !important; gap: 32px; }
  .article-header h1 { font-size: 2.2rem; }
  .article-header .dek { font-size: 1.12rem; }
  .byline { flex-wrap: wrap; gap: 4px 14px; }
  .prose { font-size: 1.1rem; }
  .mb-prose [data-ricos-paragraph], .mb-prose ul, .mb-prose ol { font-size: 1.1rem !important; }
  .mb-prose #viewer-mb-lead-para, .mb-prose #viewer-mb-lead-para * { font-size: calc(1.1rem * 1.18) !important; }
  .mb-prose blockquote [data-ricos-paragraph] { font-size: 1.18rem !important; }
  .article-cta { flex-direction: column; align-items: flex-start; padding: 22px; }
  .sidebar { position: static; }
  .related-item { grid-template-columns: 120px minmax(0,1fr); }
  .more-from { padding-bottom: 40px; }

  /* Series */
  .s-hero { padding: 30px 0 28px; }
  .s-hero-grid { grid-template-columns: 1fr; gap: 20px; }
  .s-hero h1 { font-size: 2.3rem; }
  .s-meta { flex-wrap: wrap; gap: 8px 16px; font-size: 12px; }
  .s-cols { grid-template-columns: 1fr !important; gap: 28px; padding: 28px 0 16px; }
  .s-intro { font-size: 1.1rem; margin-bottom: 32px; }
  .timeline li { padding: 0 0 26px 22px; }
  .timeline li.has-thumb { grid-template-columns: 1fr; gap: 12px; }
  .t-title { font-size: 1.35rem; }
  .t-dek { font-size: 15px; }
  .donate-block { padding: 24px 20px; margin-bottom: 40px; }
  .donate-block h2 { font-size: 1.65rem; }
  .sgrid.sgrid-4 { grid-template-columns: 1fr 1fr; }

  /* Donate / About */
  .page-hero { padding-left: var(--gut); padding-right: var(--gut); }
  .about-wrap { padding-left: var(--gut); padding-right: var(--gut); }
  .cta-strip { flex-direction: column; align-items: flex-start; }
  .mb-auth-wrap { padding-top: 32px; }
  .mb-auth-card { padding: 20px; }
}

@media (max-width: 600px) {
  .grid4 { grid-template-columns: 1fr; }
  .grid4 .dcard::before { display: none !important; }
  .sgrid, .sgrid.sgrid-4 { grid-template-columns: 1fr; }
  .drow { grid-template-columns: 112px minmax(0,1fr); }
  .drow p { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
  .docs-row { grid-template-columns: 1fr 1fr; gap: 12px; }
  .ix-hero h1 { font-size: 2.7rem; }
  .c-hero h1 { font-size: 2.2rem; }
  .mb-field-row { grid-template-columns: 1fr; }
  .pager .pg-nums { order: 3; width: 100%; justify-content: center; margin-top: 8px; }
}
@media (max-width: 900px) {
  /* Keep Donate visible beside the brand; the scrollable row carries the section links. */
  .header-inner { position: relative; }
  .nav .btn { position: absolute; top: 12px; right: var(--gut); margin: 0; }
}

/* ---------- Email sign-up band / inline box ---------- */
@media (max-width: 900px) {
  .nl-band .nl-inner { grid-template-columns: 1fr; gap: 22px; padding-top: 36px; padding-bottom: 40px; }
  .nl-band h2 { font-size: 2rem; }
  .nl-band .nl-copy p { font-size: 16.5px; }
  .nl-inline { padding: 22px 18px 20px; margin-top: 28px; }
  .nl-inline h2 { font-size: 1.5rem; }
}
@media (max-width: 600px) {
  /* Phone order: email, consent, then the button. */
  .nl-form:not([hidden]) { display: flex; flex-direction: column; }
  .nl-row { display: contents; }
  .nl-row input[type=email] { order: 1; width: 100%; }
  .nl-consent { order: 2; font-size: 14px; margin: 12px 0 14px; }
  .nl-row .btn { order: 3; width: 100%; }
  .nl-status { order: 4; }
}

/* Oct 8: footer tip column + socials, /contact */
@media (max-width:1180px){ .footer-inner{grid-template-columns:1.6fr 1fr 1fr 1.2fr !important;gap:32px} }
@media (max-width:900px){
  .footer-inner{grid-template-columns:1fr 1fr !important}
  .footer-inner > div:first-child{grid-column:1 / -1}
  .footer-tip{grid-column:1 / -1}
  .ct-grid{grid-template-columns:1fr}
}
@media (max-width:600px){
  .ct-wrap{padding-top:24px;padding-bottom:44px}
  .ct-main{padding:22px 18px 24px}
  .ct-card{padding:18px}
  .ct-lead{font-size:1.1rem}
  .ct-btn{width:100%;justify-content:center}
  .soc-icons a{width:42px;height:42px}
  .soc-list li{flex:1 1 calc(50% - 4px)}
  .soc-list a{width:100%;padding:11px 12px}
  .yt-sub{width:100%;justify-content:center}
}
/* Oct 8: six nav links + Donate between 901 and 1180px — keep the brand on one line, drop the cue, tighten gaps. */
@media (min-width:901px) and (max-width:1180px){
  .brand-mark{white-space:nowrap}
  .brand-cue{display:none}
  .nav{gap:22px !important}
}
/* Oct 8: /donate v2 */
@media (max-width:600px){
  .amount-chips{display:grid;grid-template-columns:repeat(3,1fr)}
  .amount-chip{min-width:0;padding:12px 6px}
}
@media (max-width:600px){
  .tier{gap:10px;padding:11px 12px}
  .tier-name{font-size:14px;line-height:1.3}
  .tier-amt{font-size:15px}
}
/* Oct 8: wordmark size on phones/tablets; tagline only above 1180px (all page bases). */
@media (max-width:1180px){ .brand-cue{display:none !important} }
@media (max-width:900px){ .brand-mark{font-size:28.75px} }