/* ─────────────────────────────────────────────────────────────────────────────
   AIC — aim-mobile.css
   3-tier responsive uplift (tablet 1024px · mobile 768px · small-mobile 390px)
   Per consumer-seo-mobile-doctrine.md §6 + BRIEF FE-3 §2.2
   Do NOT edit base.css — all mobile/tablet overrides live here.
   This file loads AFTER base.css, which is required for inline-style overrides.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Tablet (≤ 1024px) ─────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .bandgrid,
  .cols { grid-template-columns: repeat(6, 1fr); }

  /* ── AIC inline-span override cure (doctrine §6.3) ──
     bandgrid children use inline style="grid-column:span N"
     which base.css cannot override. This file CAN because it loads after base.css.
  */
  .bandgrid > [style*="grid-column"] { grid-column: span 6 !important; }

  .pub-nav { gap: var(--space-3); }
}

/* ── Mobile (≤ 768px) ──────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Grid reset — override inline span styles */
  .bandgrid,
  .grid,
  .cols { grid-template-columns: 1fr !important; }

  [class^="col-"],
  [style*="grid-column"] { grid-column: 1 / -1 !important; }

  /* ── AIC inline-span override cure — full reset at 768px ── */
  .bandgrid > [style*="grid-column"] { grid-column: 1 / -1 !important; }

  /* Table horizontal scroll — jurisdiction matrix + all tables */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
  }

  .bcard table,
  .pub-wrap table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Nav collapse */
  .pub-nav { flex-wrap: wrap; gap: var(--space-2); font-size: var(--text-sm); }

  /* Typography scale */
  h1 { font-size: var(--text-2xl); }
  h2 { font-size: var(--text-xl); }
  .pub-mast { font-size: var(--text-xl); }
  .hero h1 { font-size: clamp(1.5rem, 5vw, 2rem); }

  /* Hero CTA pair */
  .hero .pub-cta {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    margin-left: 0;
  }
  .hero .pub-cta + .pub-cta { margin-top: var(--space-3); }

  /* KPI band cards full-width */
  .bcard { padding: var(--space-4); }
  .bbig  { font-size: var(--text-3xl); }

  /* Feed list */
  .feeds { grid-template-columns: 1fr; }
  .feed  { padding: var(--space-3); }

  /* Pub-head — allow logo + nav to wrap */
  .pub-head__inner { flex-wrap: wrap; gap: var(--space-3); }
  .pub-nav         { flex-wrap: wrap; gap: var(--space-2); font-size: var(--text-sm); }

  /* Section padding */
  .section   { padding-block: var(--space-6); }
  .pub-wrap  { padding-inline: var(--space-4); }

  /* Hero CTA (generic) */
  .pub-cta                  { display: block; text-align: center; width: 100%; }
  .hero .pub-cta + .pub-cta { margin-top: var(--space-3); margin-left: 0; }
}

/* ── Small mobile (≤ 390px) ────────────────────────────────────────────────── */
@media (max-width: 390px) {
  .pub-head__inner { flex-direction: column; gap: var(--space-3); }
  .pub-mast        { font-size: 1.25rem; }
  .pub-nav a       { font-size: 0.75rem; }
  .hero h1         { font-size: clamp(1.375rem, 5vw, 1.75rem); }
  .bbig            { font-size: var(--text-2xl); }

  /* AI-UNVERIFIED badge — wrap without overflow */
  .pub-aiu { font-size: 0.65rem; white-space: normal; }
}

/* ── Tap target enforcement ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .pub-nav a,
  .pub-cta,
  .pub-cta--ghost {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}