/* =============================================================================
   KilusNa — RESPONSIVE
   Every breakpoint rule for the page lives here (mobile-first base styles are
   in layout.css / components.css).

   Breakpoint map (base styles are mobile-first in layout.css / components.css)
     ≤480  tighten hero/modal/card padding
     ≤647  master-prompt type floor: body copy ≥16px, form inputs 16px (iOS)
     ≤767  header search hidden (mobile search strip takes over)
     ≥640  Log In / Sign Up appear in the header
     ≥641  report card: desktop 3-col grid, 175×112 thumbnail (base = 2-col)
     ≥768  header pill search appears · hero padding 40px · hero title 2rem
     ≥1024 primary nav row · left rail 250px · hamburger hidden
     ≥1280 right rail 340px (JS also relocates its cards into main below this)
   ============================================================================= */

/* ===== ≤767px — actions need their own right alignment =================== */
@media (max-width: 767px) {
  .header-actions { margin-left: auto; }
}

/* ===== ≤647px — type floor (master-prompt override of the 14px base) ===== */
@media (max-width: 647px) {
  body { font-size: 16px; }

  /* card content */
  .report-title { font-size: 16.5px; }
  .report-summary,
  .report-meta,
  .report-author,
  .report-footer,
  .react-count,
  .react-btn,
  .petition-meta-text,
  .video-title,
  .deep-result-excerpt,
  .deep-result-title { font-size: 16px; }

  /* compact labels inside the meta row stay pill-shaped but get legible */
  .report-category { font-size: 14px; }
  .verdict-badge { font-size: 12px; }
  .pub-pill { font-size: 14px; }
  .pub-pill small { font-size: 13px; }
  .vote-num { font-size: 14px; }

  /* page + section copy */
  .panel-header p,
  .hero-description,
  .hero-feature,
  .cta-text,
  .cta-title,
  .responsible-quote,
  .responsible-item,
  .sidebar-card-title,
  .topic-filter-bar,
  .empty-state,
  .loading-state,
  .error-state,
  .results-count,
  .search-empty,
  .search-result-title,
  .search-result-subtitle,
  .deep-result-meta,
  .deep-result-date,
  .anonymous-alias,
  .trending-tag,
  .toast { font-size: 16px; }

  .impact-label,
  .trending-count,
  .video-meta { font-size: 15px; }

  /* compact uppercase labels & image chips (not body copy, kept legible) */
  .hero-eyebrow,
  .deep-result-type,
  .search-result-type,
  .video-category,
  .thumb-count { font-size: 13px; }

  .footer-soon { font-size: 12px; }

  /* controls */
  input,
  select,
  textarea,
  .form-control,
  .header-search input,
  .mobile-search-wrapper input { font-size: 16px; }

  .btn,
  .pub-filter-btn,
  .reports-cat-btn,
  .filter-btn,
  .sort-btn,
  .feed-tab,
  .nav-link,
  .sidebar-nav-link,
  .pub-preview-viewall,
  .btn-clear-filter,
  .search-deep-link { font-size: 16px; }

  .form-group label { font-size: 14px; }

  .footer-bottom,
  .footer-pending,
  .footer-socials-title { font-size: 16px; }
}

/* ===== ≤480px — tighter sheets ========================================== */
@media (max-width: 480px) {
  .page-layout { padding: 0 var(--s4); }

  .hero { padding: var(--s5) var(--s4); }
  .hero-title { font-size: 1.5rem; }

  .report-card { padding: var(--s4); }

  .modal { padding: var(--s5) var(--s4); }

  .header-logo-img { height: 34px; }
}

/* ===== ≥640px — auth actions in the header ============================== */
@media (min-width: 640px) {
  .header-actions .btn { display: inline-flex; }
}

/* ===== ≥641px — desktop report-card grid ================================ */
@media (min-width: 641px) {
  .report-card.has-thumb {
    grid-template-columns: 24px minmax(0, 1fr) 175px;
    grid-template-areas: "vote body thumb";
  }

  .report-thumb {
    width: 175px;
    height: 112px;
  }
}

/* ===== ≥768px — header search + roomier hero ============================ */
@media (min-width: 768px) {
  .header-search { display: flex; }
  .mobile-search { display: none; }

  .hero { padding: 40px; }
  .hero-title { font-size: 2rem; }
  .hero-description { font-size: 15px; }
}

/* ===== ≥1024px — primary nav row + left rail ============================ */
@media (min-width: 1024px) {
  .header-menu { display: none; }
  .nav-bar { display: block; }

  .page-layout {
    grid-template-columns: var(--col-l) minmax(0, 1fr);
  }

  /* Independent rail scroll. Sticky lives on the <aside> grid child — never on
     the -inner wrapper JS relocates into .rail-below — so relocated cards can
     inherit neither sticky nor overflow. align-self: start keeps the grid child
     from stretching (a stretched child cannot stick); max-height caps the rail
     to the viewport below the header; overflow-y: auto keeps overflowing
     content scrollable while its scrollbar is suppressed in layout.css, so no
     bar, no gutter and no shift ever appear. */
  .sidebar-left {
    display: block;
    position: sticky;
    align-self: start;
    top: var(--sticky-top);
    max-height: calc(100vh - var(--sticky-top));
    overflow-y: auto;
  }
}

/* ===== ≥1280px — right rail ============================================= */
@media (min-width: 1280px) {
  .page-layout {
    grid-template-columns: var(--col-l) minmax(0, 1fr) var(--col-r);
  }

  /* Same independent-scroll contract as the left rail (see ≥1024). Scoped to
     this breakpoint so nothing below 1280 — including the cards JS relocates
     into .rail-below — is ever sticky. */
  .sidebar-right {
    display: block;
    position: sticky;
    align-self: start;
    top: var(--sticky-top);
    max-height: calc(100vh - var(--sticky-top));
    overflow-y: auto;
  }
}

/* ===== Submit wizard (submit.html) ========================================
   Breakpoints for css/wizard.css, which ships no media queries (project
   rule: every breakpoint lives here). wizard.css's grids are 1-column at
   base, so the ≤480 category grid needs no rule of its own — the grids grow
   below. Editor toolbar wrapping is base too (flex-wrap + 6×44px tools fit
   a 360px row, and wrap covers 200% zoom). Every track is minmax(0, 1fr),
   so no width here can force a horizontal scrollbar at 360px. */

/* ≤480 — stepper labels drop (nodes + connectors carry the meaning), padding
   tightens, the gate buttons go full-width and the action bar stacks with
   Cancel first, Back/Next filling the row beneath */
@media (max-width: 480px) {
  .wizard { padding: var(--s4); }
  .submit-gate { padding: var(--s6) var(--s4); }
  .submit-gate-actions .btn { width: 100%; min-width: 0; }
  .wizard-stepper { margin-bottom: var(--s5); }
  .wizard-step-label { display: none; }
  .review-section { padding: var(--s3); }
  .editor-toolbar { gap: 4px; padding: 4px; }

  .wizard-actions { flex-direction: column; align-items: stretch; gap: var(--s2); }
  .wizard-actions-right { width: 100%; }
  .wizard-actions-right .btn { flex: 1; }
}

/* ≤647 — master-prompt type floor for wizard copy (inputs, selects and
   textareas are already floored by the shared control block above; headings
   go through .wizard so the class rules in wizard.css can't win). Connectors
   give their width back so the labels that survive past 480 keep one line. */
@media (max-width: 647px) {
  .wizard h3 { font-size: 16.5px; }   /* .category-title / .review-section-title */
  .wizard h4 { font-size: 16px; }     /* info-card / additional-info / tips titles */

  .wizard-subtitle,
  .wizard-step-label,
  .wizard-precheck-q,
  .submit-gate-text,
  .category-desc,
  .info-card-text,
  .form-hint,
  .image-upload-text,
  .article-editor,
  .entity-name,
  .additional-info-linked-label,
  .review-content-box,
  .article-editor-tips li,
  .checkbox-item label,
  .review-confirm label { font-size: 16px; }

  /* secondary labels & meta stay smaller but legible */
  .label-note,
  .image-upload-hint,
  .entity-role,
  .char-counter,
  .article-stat { font-size: 14px; }

  .wizard-step-line { width: 12px; }
}

/* ≥641 — two category cards per row */
@media (min-width: 641px) {
  .category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ≥768 — Additional Information two-up */
@media (min-width: 768px) {
  .additional-info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ≥1024 — desktop grids: three categories per row, details form 3-column
   (the columns stack below this, per the ≤1023 single-column base) */
@media (min-width: 1024px) {
  .category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .form-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}