/* =========================================================
   RESPONSIVE
   Breakpoints: 480 (large mobile), 768 (tablet), 1024 (laptop), 1280 (desktop)
   ========================================================= */

/* ---- Tablet and below: collapse nav ---- */
@media (max-width: 900px) {
  /* .st-nav-links becomes position:fixed and .st-nav-cta hides, so the
     toggle button is the only in-flow child left in .st-nav — the desktop
     gap between former siblings would otherwise still reserve space and
     crowd/misalign the toggle against the brand mark. */
  .st-nav { gap: 0; }
  .st-nav-toggle {
    display: inline-flex;
    margin-left: auto;
  }
  .st-nav-links {
    position: fixed;
    inset: var(--st-header-height) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--st-paper-raised);
    border-bottom: var(--st-border-width) solid var(--st-border);
    padding: var(--st-space-3) var(--st-space-5) var(--st-space-5);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: transform var(--st-transition), opacity var(--st-transition), visibility var(--st-transition);
  }
  .st-nav-links[data-open="true"] {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }
  .st-nav-links a {
    padding: var(--st-space-3) 0;
    border-bottom: var(--st-border-width) solid var(--st-border);
    width: 100%;
  }
  .st-nav-cta { display: none; }

  .st-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--st-space-6) var(--st-space-5);
  }
  .st-footer-brand { grid-column: 1 / -1; }
}

/* Hero grid/visual responsive behavior now lives in components.css
   alongside .st-hero-visual's other rules (kept together since they're
   part of the same component, not generic page layout). */

/* ---- Large mobile ---- */
@media (max-width: 640px) {
  h1 { font-size: var(--st-fs-2xl); }
  h2 { font-size: var(--st-fs-xl); }
  .st-section { padding-block: var(--st-space-6); }
  .st-footer-grid { grid-template-columns: 1fr; }
  .st-search-results-grid { grid-template-columns: 1fr; }
  .st-category-row { flex-direction: column; align-items: flex-start; }
  .st-category-row__count { align-self: flex-start; }
  .st-btn--block-mobile { width: 100%; }
}

/* ---- Small mobile ---- */
@media (max-width: 400px) {
  .st-container { padding-inline: var(--st-space-4); }
  h1 { font-size: var(--st-fs-xl); }
  .st-empty-state .st-num-display { font-size: 4rem; }
}

/* ---- Category / calculator grid density by breakpoint ---- */
.st-calc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--st-space-3);
}
@media (max-width: 1024px) {
  .st-calc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .st-calc-grid { grid-template-columns: 1fr; }
}

/* ---- Touch target sizing ---- */
@media (pointer: coarse) {
  .st-btn, .st-chip, .st-nav-toggle, .st-faq-q { min-height: 44px; }
}