/* ============================================================
   MOBILE.CSS — ClinicalIQ / PatientIQ
   Handles class-based responsive styles.
   Inline style overrides are handled by mobile.js
   ============================================================ */

/* ── Base container ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .container,
  .container--narrow { padding: 0 16px !important; }

  /* ── Typography ─────────────────────────────────────────────── */
  h1 { font-size: 1.5rem !important; line-height: 1.25 !important; }
  h2 { font-size: 1.2rem !important; }
  h3 { font-size: 1.05rem !important; }
  p  { font-size: 14px !important; }

  /* ── Header ─────────────────────────────────────────────────── */
  .site-header { position: sticky; top: 0; z-index: 1000; }
  .header-top  { height: 58px !important; gap: 10px !important; padding: 0 16px; }
  .logo-text   { font-size: 17px !important; }
  .logo-tagline,
  .logo-mark div { display: none !important; }
  .header-search,
  .search-bar  { display: none !important; }
  .header-actions .btn-outline { display: none !important; }
  .btn-primary.btn-sm { padding: 7px 12px !important; font-size: 12px !important; }

  /* ── Breaking ticker ─────────────────────────────────────────── */
  .ticker { font-size: 12px !important; height: 30px !important; }
  .ticker-label { padding: 0 10px !important; font-size: 10px !important; }

  /* ── Nav ─────────────────────────────────────────────────────── */
  .header-nav  { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .nav-list    { flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 0 !important; }
  .nav-link    { padding: 10px 12px !important; font-size: 12px !important; white-space: nowrap; }
  .mega-menu   { display: none !important; }

  /* ── Area / condition chip strips ────────────────────────────── */
  .area-strip,
  .condition-strip { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .area-strip-inner,
  .condition-strip-inner { flex-wrap: nowrap !important; gap: 8px !important; padding: 10px 16px !important; }
  .area-chip,
  .condition-chip { font-size: 12px !important; padding: 6px 12px !important; flex-shrink: 0; }

  /* ── CSS grid classes ─────────────────────────────────────────── */
  .grid-main,
  .grid-2,
  .grid-3,
  .grid-4 { grid-template-columns: 1fr !important; gap: 16px !important; }

  .hero-grid,
  .hero-inner { grid-template-columns: 1fr !important; gap: 20px !important; }

  /* ── Hero ────────────────────────────────────────────────────── */
  .hero { padding: 28px 0 !important; }
  .hero-title { font-size: 1.4rem !important; }
  .hero-excerpt,
  .hero-text p { font-size: 14px !important; }
  .hero-stats { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .hero-stat  { padding: 14px !important; }
  .hero-stat-num { font-size: 1.4rem !important; }
  .hero-search { border-radius: 10px !important; }
  .hero-search input { padding: 12px 14px !important; font-size: 14px !important; }
  .hero-search button { padding: 12px 14px !important; font-size: 13px !important; }
  .hero-trust { gap: 8px !important; }
  .trust-badge { font-size: 11px !important; padding: 4px 10px !important; }

  /* ── Condition grid ──────────────────────────────────────────── */
  .condition-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .condition-card { padding: 14px 10px !important; }
  .condition-icon { font-size: 28px !important; }
  .condition-name { font-size: 12px !important; }

  /* ── Cards ───────────────────────────────────────────────────── */
  .card { border-radius: 10px !important; }
  .card-h { flex-direction: row !important; }
  .card-h .card-thumb { width: 90px !important; flex-shrink: 0; }

  /* ── Sidebar ─────────────────────────────────────────────────── */
  .sidebar { display: none !important; position: static !important; }
  aside    { display: none !important; }

  /* ── Community ───────────────────────────────────────────────── */
  .community-groups { grid-template-columns: 1fr !important; }

  /* ── Trial finder form ───────────────────────────────────────── */
  .trial-finder { padding: 20px !important; }
  .trial-finder-form { grid-template-columns: 1fr !important; gap: 10px !important; }

  /* ── Newsletter ──────────────────────────────────────────────── */
  .newsletter-box { flex-direction: column !important; padding: 24px 20px !important; gap: 16px !important; }
  .newsletter-form { flex-direction: column !important; width: 100% !important; }
  .nl-input { width: 100% !important; min-width: 0 !important; }
  .newsletter-inline { flex-direction: column !important; }
  .newsletter-inline-form { width: 100% !important; }

  /* ── Footer ──────────────────────────────────────────────────── */
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 24px !important; }
  .footer-bottom { flex-direction: column !important; gap: 8px !important; text-align: center; }
  .footer-brand { grid-column: 1 / -1 !important; }

  /* ── Sections ────────────────────────────────────────────────── */
  section { padding: 28px 0 !important; }
  section.tight { padding: 16px 0 !important; }

  /* ── Form inputs ─────────────────────────────────────────────── */
  .form-field select,
  .form-field input,
  input[type="email"],
  input[type="text"],
  input[type="search"],
  textarea,
  select { width: 100% !important; font-size: 16px !important; /* prevents iOS zoom */ }

  /* ── CTA register row ────────────────────────────────────────── */
  .cta-register { flex-direction: column !important; padding: 28px 0 !important; gap: 16px !important; }
  .cta-register-form { flex-wrap: wrap !important; }
  .input-reg { width: 100% !important; min-width: 0 !important; }

  /* ── CPD / Education cards ───────────────────────────────────── */
  .cpd-grid,
  .module-grid { grid-template-columns: 1fr !important; }

  /* ── Webinar cards ───────────────────────────────────────────── */
  [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }

  /* ── Single post ─────────────────────────────────────────────── */
  article { padding: 0 !important; }
  .article-body { font-size: 15px !important; line-height: 1.7 !important; }

  /* ── Images ──────────────────────────────────────────────────── */
  img { max-width: 100% !important; height: auto !important; }

  /* ── Tables ──────────────────────────────────────────────────── */
  table { font-size: 13px !important; }

  /* ── Sponsor slots ───────────────────────────────────────────── */
  .sponsor-mpu { display: none !important; }

  /* ── Source badges row ───────────────────────────────────────── */
  .badge-row { flex-wrap: wrap !important; gap: 6px !important; }

  /* ── Stats bar ───────────────────────────────────────────────── */
  .stats-bar { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap !important; }
}

/* ── Very small screens ──────────────────────────────────────── */
@media (max-width: 400px) {
  .header-top { height: 54px !important; }
  .logo-text   { font-size: 15px !important; }
  .condition-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .footer-grid { grid-template-columns: 1fr !important; }
  .condition-card { padding: 12px 8px !important; }
  .condition-icon { font-size: 24px !important; }
  h1 { font-size: 1.3rem !important; }
}