/* ==========================================================================
   TrueCalc Pro — responsive.css
   Breakpoint refinements. The base styles are mobile-first, so this file
   only holds the adjustments that do not belong beside their component.

   Breakpoints
     xs  < 480px   small phones
     sm  < 640px   phones
     md  < 860px   large phones / small tablets (nav collapses here)
     lg  < 1024px  tablets
     xl  >= 1280px large desktop
   ========================================================================== */

/* ---------- Large desktop ---------- */
@media (min-width: 1280px) {
  :root { --wrap: 1240px; }
  .section { padding-block: var(--sp-20); }
  .hero { padding-block: clamp(4rem, 7vw, 7rem) var(--sp-16); }
}

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
  .footer-about { grid-column: 1 / -1; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}

/* ---------- Large phone / small tablet ---------- */
@media (max-width: 860px) {
  :root { --header-h: 62px; }

  .section { padding-block: var(--sp-12); }
  .section-head { margin-bottom: var(--sp-6); }

  /* Give thumbs room: the sticky header + mobile drawer already handle nav */
  .hero__actions .btn { flex: 1 1 100%; }
  .hero__actions { max-width: 380px; margin-inline: auto; }

  .related { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
}

/* ---------- Phone ---------- */
@media (max-width: 640px) {
  .wrap { padding-inline: var(--sp-4); }

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

  .calc-card { padding: var(--sp-5); }
  .calc-card__icon { width: 42px; height: 42px; }

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

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

  .search__input { min-height: 52px; }

  .modal__panel { padding: var(--sp-5); max-height: 86vh; }

  .footer-bottom { flex-direction: column; align-items: flex-start; }

  .to-top { right: var(--sp-4); bottom: calc(var(--sp-4) + env(safe-area-inset-bottom, 0px)); }

  /* Tables never break the page — they scroll inside their own box */
  .table-scroll, .amort-scroll { -webkit-overflow-scrolling: touch; }
}

/* ---------- Small phone ---------- */
@media (max-width: 420px) {
  :root { --fs-3xl: 2rem; }

  .grid--4 { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; }

  .brand__name { font-size: 1rem; }
  .brand__mark { width: 30px; height: 30px; }

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

  .result-row { flex-direction: column; align-items: flex-start; gap: var(--sp-1); }
  .result-row__value { text-align: left; }

  .calc-tab { padding-inline: var(--sp-3); font-size: var(--fs-xs); }
}

/* ---------- Landscape phone: keep the sticky header from eating the screen ---------- */
@media (max-height: 460px) and (orientation: landscape) {
  .site-header { position: static; }
  .hero { padding-block: var(--sp-8); }
}

/* ---------- Pointer-coarse: enlarge every tap target ---------- */
@media (pointer: coarse) {
  .btn, .chip, .calc-tab, .icon-btn, .nav__link, .row-remove, .conv-swap { min-height: 46px; }
  .faq__q { min-height: 60px; }
}

/* ---------- Safe areas (notched devices) ---------- */
@supports (padding: max(0px)) {
  .wrap {
    padding-left: max(var(--sp-5), env(safe-area-inset-left));
    padding-right: max(var(--sp-5), env(safe-area-inset-right));
  }
  .site-footer { padding-bottom: max(var(--sp-6), env(safe-area-inset-bottom)); }
}

/* ---------- Standalone (installed PWA) ---------- */
@media (display-mode: standalone) {
  .site-header { padding-top: env(safe-area-inset-top, 0px); }
  .install-hint { display: none !important; }
}