/* =====================================================
   Sriannai UPVC - Responsive Stylesheet
   Breakpoints: 1200, 992, 768, 576, 480
   ===================================================== */

/* ---------- Large Desktop (≤1200px) ---------- */
@media (max-width: 1200px) {
  :root {
    --sp-10: 6rem;
    --sp-9: 5rem;
  }
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .brands-grid { grid-template-columns: repeat(4, 1fr); }
  .achievements-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Desktop / Small Laptop (≤992px) ---------- */
@media (max-width: 992px) {
  :root {
    --header-h: 70px;
    --sp-10: 5rem;
    --sp-8: 4rem;
  }

  .nav-menu { display: none; }
  .hamburger { display: flex; }
  .nav-call { display: none; }

  .hero { min-height: auto; padding: calc(var(--header-h) + 40px) 0 var(--sp-8); }
  .hero-inner { grid-template-columns: 1fr; gap: var(--sp-6); text-align: center; }
  .hero-content { max-width: 100%; margin: 0 auto; }
  .hero-content .eyebrow { justify-content: center; }
  .hero-content .eyebrow::before { display: none; }
  .hero p { margin-left: auto; margin-right: auto; }
  .hero-actions { justify-content: center; }
  .hero-stats { justify-content: center; }
  .hero-visual { height: 400px; max-width: 500px; margin: 0 auto; }
  .hero-scroll { display: none; }

  .intro { grid-template-columns: 1fr; gap: var(--sp-5); }
  .intro-visual { max-width: 500px; margin: 0 auto; }
  .intro-content { text-align: center; }
  .intro-content .eyebrow { justify-content: center; }
  .intro-content .eyebrow::before { display: none; }
  .intro-features { max-width: 400px; margin-left: auto; margin-right: auto; }

  .products-grid { grid-template-columns: repeat(2, 1fr); }
  .product-catalog-grid { grid-template-columns: repeat(2, 1fr); }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .advantages-grid { grid-template-columns: repeat(2, 1fr); }
  .projects-grid { grid-template-columns: repeat(2, 1fr); }
  .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
  .process-grid { grid-template-columns: repeat(2, 1fr); }
  .process-grid::before { display: none; }
  .values-grid { grid-template-columns: repeat(2, 1fr); }
  .manufacturing-grid { grid-template-columns: 1fr; }
  .infra-grid { grid-template-columns: 1fr; gap: var(--sp-5); }
  .infra-visual { max-width: 500px; margin: 0 auto; }
  .mv-grid { grid-template-columns: 1fr; }
  .ba-grid { grid-template-columns: 1fr; }
  .brands-grid { grid-template-columns: repeat(3, 1fr); }

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

  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
  .footer-about { grid-column: 1 / -1; }

  .contact-grid { grid-template-columns: 1fr; }
  .product-detail-grid { grid-template-columns: 1fr; }
  .product-detail-img { aspect-ratio: 16/9; }

  .journey-timeline::before { left: 24px; }
  .timeline-item { width: 100%; left: 0 !important; text-align: left !important; padding-left: 56px !important; padding-right: var(--sp-3) !important; }
  .timeline-item::after { left: 16px !important; right: auto !important; }
}

/* ---------- Tablet (≤768px) ---------- */
@media (max-width: 768px) {
  :root {
    --sp-10: 4rem;
    --sp-8: 3rem;
    --sp-6: 2.5rem;
  }

  h1 { font-size: 2rem; }
  h2 { font-size: 1.6rem; }
  h3 { font-size: 1.3rem; }

  .section { padding: var(--sp-8) 0; }
  .container { padding: 0 var(--sp-3); }

  .hero-visual { height: 320px; }
  .hero-stats { flex-wrap: wrap; gap: var(--sp-3); }
  .hero-stat .num { font-size: 1.6rem; }

  .page-banner { min-height: 320px; }
  .page-banner h1 { font-size: 2rem; }

  .features-grid { grid-template-columns: 1fr; }
  .products-grid { grid-template-columns: 1fr; }
  .product-catalog-grid { grid-template-columns: 1fr; }
  .services-grid { grid-template-columns: 1fr; }
  .advantages-grid { grid-template-columns: 1fr; }
  .projects-grid { grid-template-columns: 1fr; }
  .portfolio-grid { grid-template-columns: 1fr; }
  .process-grid { grid-template-columns: 1fr 1fr; }
  .values-grid { grid-template-columns: 1fr; }
  .brands-grid { grid-template-columns: repeat(2, 1fr); }
  .achievements-grid { grid-template-columns: 1fr 1fr; }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-3); }

  .stat-num { font-size: 2.2rem; }
  .stat-icon { width: 52px; height: 52px; }
  .stat-icon svg { width: 24px; height: 24px; }

  .intro-features { grid-template-columns: 1fr; }
  .infra-list { grid-template-columns: 1fr; }

  .product-specs { grid-template-columns: 1fr; }
  .product-benefits ul { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; gap: 0; }

  .footer-grid { grid-template-columns: 1fr; gap: var(--sp-4); }
  .footer-bottom { flex-direction: column; gap: var(--sp-2); text-align: center; }

  .cta-banner { padding: var(--sp-6) var(--sp-4); }
  .cta-actions { flex-direction: column; }
  .cta-actions .btn { width: 100%; }

  .testimonial-card { padding: var(--sp-4); }
  .testimonial-quote { font-size: 1rem; padding: 0; }
  .testimonial-quote::before { font-size: 3rem; top: -16px; }

  .contact-info-card, .contact-form-card { padding: var(--sp-4); }
  .map-container { height: 280px; }

  .back-to-top { width: 44px; height: 44px; bottom: var(--sp-3); right: var(--sp-3); }
  .float-whatsapp { width: 50px; height: 50px; bottom: var(--sp-3); left: var(--sp-3); }
  .float-whatsapp svg { width: 26px; height: 26px; }
}

/* ---------- Mobile (≤576px) ---------- */
@media (max-width: 576px) {
  :root {
    --sp-10: 3.5rem;
    --sp-8: 3rem;
  }

  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.4rem; }
  .section { padding: var(--sp-8) 0; }
  .container { padding: 0 var(--sp-2); }

  .logo { font-size: 1.1rem; }
  .logo-mark { width: 38px; height: 38px; font-size: 1.2rem; }
  .logo-text small { font-size: 0.58rem; }

  .hero { padding: calc(var(--header-h) + 30px) 0 var(--sp-6); }
  .hero-visual { height: 260px; }
  .hero p { font-size: 1rem; }
  .hero-actions { flex-direction: column; width: 100%; }
  .hero-actions .btn { width: 100%; }
  .hero-stats { gap: var(--sp-2); }
  .hero-stat .num { font-size: 1.4rem; }
  .hero-stat .label { font-size: 0.75rem; }

  .page-banner { min-height: 280px; padding-top: calc(var(--header-h) + 20px); }
  .page-banner h1 { font-size: 1.7rem; }

  .process-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr; }
  .brands-grid { grid-template-columns: 1fr; }
  .achievements-grid { grid-template-columns: 1fr; }

  .product-detail-body { padding: var(--sp-4); }
  .product-detail-body h3 { font-size: 1.3rem; }

  .faq-question { font-size: 0.95rem; padding: var(--sp-3); }
  .faq-answer { padding: 0 var(--sp-3); }
  .faq-item.active .faq-answer { padding: 0 var(--sp-3) var(--sp-3); }

  .cta-banner { padding: var(--sp-5) var(--sp-3); border-radius: var(--r-lg); }
  .cta-banner p { font-size: 1rem; }

  .map-container { height: 220px; }
  .lightbox-nav { width: 40px; height: 40px; }
  .lightbox-nav.prev { left: var(--sp-2); }
  .lightbox-nav.next { right: var(--sp-2); }
  .lightbox-close { top: var(--sp-3); right: var(--sp-3); width: 40px; height: 40px; }
}

/* ---------- Small Mobile (≤480px) ---------- */
@media (max-width: 480px) {
  .hero h1 { font-size: 1.5rem; }
  .hero-visual { height: 220px; }
  .hero-slider-dots button { width: 8px; height: 8px; }
  .hero-slider-dots button.active { width: 22px; }

  .feature-card { padding: var(--sp-4) var(--sp-3); }
  .feature-icon { width: 52px; height: 52px; }
  .feature-icon svg { width: 26px; height: 26px; }

  .stat-num { font-size: 1.8rem; }

  .testimonial-avatar { width: 48px; height: 48px; font-size: 1rem; }
  .testimonial-info h4 { font-size: 0.9rem; }

  .contact-info-item { gap: var(--sp-2); }
  .contact-info-icon { width: 42px; height: 42px; }
  .contact-info-icon svg { width: 18px; height: 18px; }

  .footer-social a { width: 36px; height: 36px; }
  .footer-social a svg { width: 16px; height: 16px; }
}

/* ---------- Landscape phones ---------- */
@media (max-width: 992px) and (orientation: landscape) and (max-height: 500px) {
  .hero { min-height: auto; padding: calc(var(--header-h) + 20px) 0 var(--sp-5); }
  .hero-visual { height: 240px; }
}