/* ==========================================================================
   AllCalci.com — responsive.css
   Mobile-first overrides. Breakpoints: 640 / 900 / 1024 / 1280
   ========================================================================== */

/* ---- < 1280px : drop the content sidebar ---- */
@media (max-width: 1279px) {
  .content-layout { grid-template-columns: minmax(0, 1fr); }
  .content-sidebar { display: none; }
}

/* ---- < 1024px : stack the calculator workspace ---- */
@media (max-width: 1023px) {
  .calc-workspace { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
  .calc-results-col { position: static; }
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
  .footer-about { grid-column: 1 / -1; max-width: 460px; }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- < 900px : mobile nav ---- */
@media (max-width: 899px) {
  :root { --header-h: 56px; }

  .nav {
    position: fixed; inset: var(--header-h) 0 auto 0;
    flex-direction: column; align-items: stretch;
    gap: 0;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
    padding: var(--sp-2);
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
    transform: translateY(-8px);
    opacity: 0; visibility: hidden;
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav-link { padding: var(--sp-3) var(--sp-4); font-size: var(--text-md); }

  .menu-btn { display: grid; }
  .search-trigger { min-width: 0; width: 36px; padding: 0; justify-content: center; }
  .search-trigger .label, .search-trigger .kbd { display: none; }

  .header-inner { gap: var(--sp-3); }
  .brand-name { font-size: var(--text-md); }
}

/* ---- < 640px : single column ---- */
@media (max-width: 639px) {
  :root {
    --text-3xl: 1.75rem;
    --text-2xl: 1.375rem;
    --text-4xl: 2rem;
  }

  .container { padding-inline: var(--sp-4); }
  .section { padding-block: var(--sp-10); }
  .section--tight { padding-block: var(--sp-8); }

  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
  .grid--auto { grid-template-columns: minmax(0, 1fr); }

  .field-row, .field-row--3 { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }

  .calc-panel-body { padding: var(--sp-4); }
  .calc-panel-head { padding: var(--sp-3) var(--sp-4); }
  .region-bar { flex-wrap: wrap; padding: var(--sp-3) var(--sp-4); }
  .region-bar .select-wrap { margin-left: 0; width: 100%; }

  .result-hero { padding: var(--sp-5) var(--sp-4); }
  .result-tiles { grid-template-columns: minmax(0, 1fr); }
  .result-tile { border-right: 0; }
  .result-tile:last-child { border-bottom: 0; }
  .breakdown, .chart-box { padding: var(--sp-4); }

  .calc-actions { flex-direction: column-reverse; }
  .calc-actions .btn { width: 100%; }

  .related-grid { grid-template-columns: minmax(0, 1fr); }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
  .footer-bottom { flex-direction: column; align-items: flex-start; }

  .search-overlay { padding: var(--sp-4) var(--sp-3); }
  .search-results { max-height: 60vh; }

  .prose h2 { margin-top: var(--sp-8); }
  .data-table th, .data-table td { padding: var(--sp-2) var(--sp-3); font-size: var(--text-sm); }

  /* Sticky mobile result summary */
  .mobile-result-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    background: var(--color-bg-card);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -4px 16px -4px rgba(15, 23, 42, .12);
    transform: translateY(100%);
    transition: transform var(--dur) var(--ease);
  }
  .mobile-result-bar.is-visible { transform: none; }
  .mobile-result-bar-label { font-size: var(--text-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .05em; }
  .mobile-result-bar-value {
    font-family: var(--font-mono); font-size: var(--text-lg); font-weight: 700;
    color: var(--color-primary); font-variant-numeric: tabular-nums;
  }
}

@media (min-width: 640px) {
  .mobile-result-bar { display: none; }
}

/* ---- Touch target sizing ---- */
@media (pointer: coarse) {
  .nav-link, .calc-link, .btn, .icon-btn { min-height: 44px; }
  .slider::-webkit-slider-thumb { width: 22px; height: 22px; }
  .segmented button { height: 40px; }
}

/* ---- Wide screens ---- */
@media (min-width: 1440px) {
  .calc-workspace { gap: var(--sp-8); }
}