/* =====================================================================
   ShivShakti Design & Interiors — responsive.css
   Mobile-first refinements across every required breakpoint:
   320 · 360 · 375 · 390 · 414 · 480 · 576 · 768 · 992 · 1200 ·
   1400 · 1600 · 1920
   Base styles (style.css) target the smallest screens first; the
   queries below progressively enhance the layout upward.
   ===================================================================== */

/* ---------- Very small phones (≤360px) : tighten everything ---------- */
@media (max-width: 360px) {
  :root { --space-gutter: 1.05rem; }
  .navbar-brand { font-size: 1.3rem; }
  .hero__title { font-size: clamp(2.4rem, 9vw, 3rem); }
  .btn { padding: .8rem 1.4rem; }
  .btn-lg { padding: .95rem 1.6rem; }
  .hero-stats .num { font-size: 1.6rem; }
  .service-card { padding: 1.6rem 1.3rem; }
  .testimonial { padding: 1.6rem; }
  .newsletter .input-group { flex-direction: column; }
  .newsletter .input-group .form-control,
  .newsletter .input-group .btn { border-radius: var(--radius-pill) !important; width: 100%; }
  .newsletter .input-group .btn { margin-top: .6rem; }
}

/* ---------- Standard phones (≤575px) ---------- */
@media (max-width: 575.98px) {
  .section { padding-block: clamp(3.2rem, 2.4rem + 4vw, 4.5rem); }
  .hero { min-height: 92svh; }
  .hero__inner { padding-top: 5rem; }
  .hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
  .hero-stats > div { text-align: left; }
  .display { font-size: clamp(2.6rem, 11vw, 3.4rem); }
  h2, .h2 { font-size: clamp(2rem, 8vw, 2.6rem); }

  /* Stack any two-column splits */
  .intro-badge { position: static; display: inline-flex; gap: 1rem; align-items: center;
                 border-radius: var(--radius); margin-top: 1rem; }
  .intro-badge .num { font-size: 2rem; }

  .cz-seg { flex-direction: row; }
  .ba-slider { aspect-ratio: 4/3; }
  .video-band { min-height: 48vh; }
  .play-btn { width: 72px; height: 72px; font-size: 1.4rem; }
  .brands { gap: 1.6rem; }
  .figure-accent { display: none; }

  /* Comfortable, full-width primary CTAs on phones */
  .hero .btn,
  .cta-stack .btn { width: 100%; }
}

/* ---------- Large phones / small tablets (576–767px) ---------- */
@media (min-width: 576px) {
  .container, .container-sm { max-width: 540px; }
  .hero .btn { width: auto; }
}

/* ---------- Tablets (≥768px) ---------- */
@media (min-width: 768px) {
  .container, .container-md { max-width: 720px; }
  .hero__inner { padding-top: 6rem; }
  .section-head { max-width: 42rem; }
}

/* ---------- Small laptops (≥992px) : reveal full desktop nav ---------- */
@media (min-width: 992px) {
  .container, .container-lg { max-width: 960px; }
  .site-nav .nav-toggle { display: none; }
  .nav-desktop { display: flex !important; }
  .hero__sub { font-size: 1.35rem; }
}
@media (max-width: 991.98px) {
  .nav-desktop { display: none !important; }
}

/* ---------- Desktops (≥1200px) ---------- */
@media (min-width: 1200px) {
  .container, .container-xl { max-width: 1140px; }
}

/* ---------- Large desktops (≥1400px) ---------- */
@media (min-width: 1400px) {
  .container, .container-xxl { max-width: 1320px; }
  .section { padding-block: clamp(6rem, 4rem + 4vw, 9rem); }
}

/* ---------- Extra-large / wide monitors (≥1600px) ---------- */
@media (min-width: 1600px) {
  .container-xxl, .container-xl { max-width: 1480px; }
  :root { --fs-body: 1.1rem; }
  .hero__sub { max-width: 38rem; }
}

/* ---------- Ultra-wide (≥1920px) : cap measure, scale type ---------- */
@media (min-width: 1920px) {
  .container-xxl, .container-xl { max-width: 1640px; }
  :root {
    --space-section: 10rem;
  }
  .hero__title { font-size: clamp(5rem, 5.5vw, 7rem); }
}

/* ---------- Landscape phones : trim hero height ---------- */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { min-height: 120svh; }
  .hero__scroll { display: none; }
}

/* ---------- Pointer-coarse (touch) : larger tap targets ---------- */
@media (pointer: coarse) {
  .nav-link, .dropdown-item, .footer-links a { padding-block: .65rem; }
  .btn { min-height: 48px; }
  .cz-swatch { width: 38px; height: 38px; }
}

/* ---------- Print ---------- */
@media print {
  .site-nav, .customizer-toggle, .customizer, .back-to-top,
  .hero__scroll, .cta-band, .newsletter { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding-block: 1.5rem; }
}

/* ---- Phase-2 page responsive adjustments ---- */
@media (max-width: 991.98px) {
  .masonry { columns: 2; }
  .legal-toc { position: static; margin-bottom: 2rem; }
  .timeline::before { left: 19px; }
}
@media (max-width: 575.98px) {
  .masonry { columns: 1; }
  .price-card .price { font-size: 2.5rem; }
  .error-band { min-height: 60vh; }
  .spec-list li { flex-direction: column; gap: .15rem; }
  .spec-list li .v { text-align: left; }
}