/* ==========================================================================
   DoCalc — Responsive fine-tuning
   Mobile-first breakpoints: 320, 480, 768, 1024, 1440 (per project spec).
   Base rules already flex/clamp in styles.css + calculator.css; this file
   handles the grid-column collapses and touch-target/legibility rules.
   ========================================================================== */

/* ---- 1440px+ : roomier grids on very large screens ---- */
@media (min-width: 1440px) {
  .container { max-width: 1260px; }
}

/* ---- 1024px and below : tablets ---- */
@media (max-width: 1024px) {
  .calc-grid { grid-template-columns: repeat(2, 1fr); }
  .article-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
}

/* ---- 768px and below : small tablets / large phones ---- */
@media (max-width: 768px) {
  .category-grid { grid-template-columns: repeat(2, 1fr); }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .hero { padding: 48px 0 40px; }
  .section { padding: 44px 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .newsletter { padding: 36px 24px; }
}

/* ---- 480px and below : phones ---- */
@media (max-width: 480px) {
  .container { padding: 0 16px; }
  .category-grid,
  .calc-grid,
  .article-grid,
  .feature-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 24px; }
  .hero-stats { gap: 24px; }
  .hero-actions { flex-direction: column; width: 100%; }
  .hero-actions .btn { width: 100%; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ---- 320px and below : smallest supported phones ---- */
@media (max-width: 320px) {
  h1 { font-size: 26px; }
  .hero .lede { font-size: 15px; }
}

/* ---- Touch targets: minimum 48x48px on coarse pointers (spec requirement) ---- */
@media (pointer: coarse) {
  .btn, .nav-links a, .footer-social a, .toggle-btn, .nav-toggle {
    min-height: 44px;
  }
  .calc-input, .calc-select { min-height: 48px; }
}

/* ---- Legibility floor: 16px minimum body text on mobile (prevents iOS zoom-on-focus) ---- */
@media (max-width: 768px) {
  body { font-size: 16px; }
  .calc-input, .calc-select { font-size: 16px; }
}

/* ---- Print: strip chrome, keep the result ---- */
@media print {
  .site-header, .site-footer, .nav-toggle, .hero-actions, .newsletter,
  .result-copy, .calc-actions { display: none !important; }
  .calc-shell { grid-template-columns: 1fr; }
  .result-panel { background: #fff !important; color: #000 !important; border: 1px solid #ccc; }
  .result-primary, .result-row span:last-child { color: #000 !important; }
}