/* =============================================================================
   responsive.css — breakpoints for laptop, tablet, mobile and large mobile
   Loaded after style.css. Overrides only what changes per viewport.
   ============================================================================= */

/* ------------------------------ Laptop (≤1100px) -------------------------- */
@media (max-width: 1100px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .material-grid { gap: 2.5rem; }
}

/* ---------------------------- Small laptop (≤980px) ----------------------- */
@media (max-width: 980px) {
  /* Hero: form drops below the copy. */
  .hero-inner { grid-template-columns: 1fr; gap: 2rem; }
  .hero-copy { max-width: 640px; }
  .hero-form-card { max-width: 560px; }
}

/* ------------------------------ Tablet (≤900px) --------------------------- */
@media (max-width: 900px) {
  body { font-size: 16px; }

  .hero .lead { max-width: none; }

  .trust-inner { grid-template-columns: repeat(3, 1fr); gap: 1.4rem 1rem; }
  .trust-item:nth-child(n+4) { grid-column: span 1; }
  .trust-item + .trust-item::before { display: none; }

  .material-grid { grid-template-columns: 1fr; gap: 2rem; }
  .material-media { max-width: 520px; }
  .material-media img { aspect-ratio: 16 / 12; }

  /* Process tabs tighten up. */
  .process-tabs { gap: .5rem; }
  .process-name { font-size: 1rem; }

  /* Modal stacks to a single column. */
  .modal-body { grid-template-columns: 1fr; }
  .modal-stage { aspect-ratio: 16 / 11; }
  .modal-dialog { max-height: 94vh; }
}

/* ------------------------------ Mobile (≤620px) --------------------------- */
@media (max-width: 620px) {
  :root { --section-y: clamp(3rem, 12vw, 4.5rem); }

  .product-grid { grid-template-columns: 1fr; }

  /* Header: hide the tag, shrink logo + button so nothing overlaps. */
  .header-inner { padding-block: .65rem; gap: .75rem; }
  .brand-tag { display: none; }
  .brand img { height: 24px; }
  .site-header .btn-sm { --btn-px: 1rem; font-size: .76rem; letter-spacing: .05em; white-space: nowrap; }

  /* Applications list: single column, tighter. */
  .app-list { grid-template-columns: 1fr; }
  .app-row { gap: 1rem; padding-block: 1.2rem; }
  .app-row:hover { padding-left: .5rem; }

  /* Hero form single column, tight spacing. */
  .hero-form-card .quote-form { grid-template-columns: 1fr; gap: .55rem; }
  .field-full, .btn-block, .form-status, .form-fineprint { grid-column: 1 / -1; }

  .final-actions .btn { width: 100%; }
  .final-actions { gap: .75rem; }
  .hero-bg { object-position: center 55%; }

  /* Testimonial arrows below the card (JS shows 1 per view here). */
  .testi-slider { padding-inline: 0; }
  .testi-arrow { top: auto; bottom: -6px; transform: none; width: 44px; height: 44px; }
  .testi-arrow-prev { left: calc(50% - 52px); }
  .testi-arrow-next { right: calc(50% - 52px); }
  .testi-arrow-prev:hover, .testi-arrow-next:hover { transform: none; }
  .testi-dots { margin-top: 4.5rem; }

  .footer-inner { flex-direction: column; text-align: center; align-items: center; }

  /* Process tabs: connector off, numbers smaller so 4 fit a phone width. */
  .process-tabs::before { display: none; }
  .process-num { width: 46px; height: 46px; font-size: 1.15rem; }
  .process-name { font-size: .8rem; line-height: 1.2; }

  /* ---- Full-screen, single-scroll modal on phones ---- */
  .modal { padding: 0; place-items: stretch; }
  .modal-dialog {
    width: 100%; max-width: 100%; border-radius: 0;
    height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh;
    display: flex; flex-direction: column; overflow: hidden;
  }
  .modal-body {
    display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  .modal-gallery { padding: 1rem; flex: 0 0 auto; }
  .modal-stage { aspect-ratio: 4 / 3; }
  .modal-info { padding: 1.4rem 1.4rem 2.2rem; flex: 0 0 auto; }
  .modal-specs { margin-bottom: 1.2rem; }
  .modal-thumbs { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: .3rem; -webkit-overflow-scrolling: touch; }
  .modal-thumb { flex: 0 0 auto; }
  .modal-close { top: .6rem; right: .6rem; }
}

/* --------------------------- Large mobile (≤400px) ------------------------ */
@media (max-width: 400px) {
  .hero h1 { font-size: 2.05rem; }
  .app-tags li { font-size: .85rem; padding: .55rem 1rem; }
  .trust-inner { grid-template-columns: repeat(2, 1fr); }
  .process-tabs { gap: .3rem; }
  .process-name { font-size: .72rem; }
  .modal-nav { width: 38px; height: 38px; }
  .modal-thumb { width: 56px; height: 56px; }
}