/* ==========================================================
   LANGA GAS PROJECTS — responsive.css
   Breakpoints: 1024px → 768px → 480px (light theme)
   ========================================================== */

/* ----------------------------------------------------------
   TABLET  (≤ 1024px)
   ---------------------------------------------------------- */
@media (max-width: 1024px) {
  :root { --section-pad: 72px; }

  .nav__links li a { font-size: 0.85rem; padding: 8px 10px; }

  /* Stats: 2×2 */
  .stats-bar__inner { grid-template-columns: repeat(2, 1fr); }
  .stat { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.15); }
  .stat:nth-child(odd)  { border-right: 1px solid rgba(255,255,255,0.15); }
  .stat:nth-child(even) { border-right: none; }
  .stat:nth-last-child(-n+2) { border-bottom: none; }

  /* Grids → 2 columns */
  .products-grid { grid-template-columns: repeat(2, 1fr); }
  .features-grid { grid-template-columns: 1fr; }
  .values-grid   { grid-template-columns: repeat(2, 1fr); }
  .product-list  { grid-template-columns: repeat(2, 1fr); }
  .img-grid      { grid-template-columns: repeat(2, 1fr); }

  /* Steps → 2×2 */
  .steps { grid-template-columns: repeat(2, 1fr); gap: 40px; }
  .steps::before { display: none; }

  /* Layouts → single column */
  .intro-section  { grid-template-columns: 1fr; gap: 48px; }
  .intro__visual  { display: none; }
  .two-col        { grid-template-columns: 1fr; gap: 48px; }
  .two-col--60-40 { grid-template-columns: 1fr; }

  /* Lead banner → stack */
  .lead-banner__inner { flex-direction: column; align-items: flex-start; gap: 24px; }

  .contact-grid { grid-template-columns: 1fr; gap: 48px; }
  .cta-box { flex-direction: column; align-items: flex-start; }

  /* Footer → 2×2 */
  .footer__inner { grid-template-columns: 1fr 1fr; gap: 40px; }
}

/* ----------------------------------------------------------
   MOBILE  (≤ 768px)
   ---------------------------------------------------------- */
@media (max-width: 768px) {
  :root { --section-pad: 56px; --nav-height: 60px; }

  /* ── Hamburger nav ── */
  .nav__toggle { display: flex; }

  .nav__links {
    position: fixed;
    top: 0; right: -100%; bottom: 0;
    width: min(300px, 82vw);
    background-color: var(--color-white);
    border-left: 1px solid var(--color-border);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding-top: 80px;
    gap: 0;
    transition: right 0.3s ease;
    z-index: 905;
    overflow-y: auto;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.1);
  }

  .nav__links.open { right: 0; }

  .nav__links li a {
    display: block;
    padding: 16px 24px;
    font-size: 1rem;
    border-bottom: 1px solid var(--color-border-light);
    border-radius: 0;
    color: var(--color-text-muted);
  }

  .nav__links li a:hover { color: var(--color-accent); background-color: var(--color-surface); }

  .nav__links li:last-child { padding: 16px; }
  .nav__links li:last-child a { text-align: center; border-bottom: none; }

  /* ── Hero ── */
  .hero { min-height: auto; }
  .hero__content { padding: 80px 20px 100px; }
  .hero__title { font-size: clamp(2.6rem, 10vw, 3.6rem); }
  .hero__sub    { font-size: 1rem; }
  .hero__trust  { gap: 14px; }
  .hero__trust-item { font-size: 0.7rem; }

  /* ── Layout ── */
  .container { padding-inline: 16px; }

  /* ── All grids → 1 column ── */
  .products-grid { grid-template-columns: 1fr; }
  .features-grid { grid-template-columns: 1fr; }
  .values-grid   { grid-template-columns: 1fr; }
  .product-list  { grid-template-columns: 1fr; }
  .steps         { grid-template-columns: 1fr; }
  .img-grid      { grid-template-columns: repeat(2, 1fr); }

  /* Stats: 2 columns */
  .stats-bar__inner { grid-template-columns: repeat(2, 1fr); }

  /* Buttons */
  .btn-group { flex-direction: column; align-items: stretch; }
  .btn-group .btn { text-align: center; }

  /* Typography */
  .section__title { font-size: clamp(1.7rem, 7vw, 2.2rem); }

  /* Cards */
  .card    { padding: 24px; }
  .feature { padding: 24px; }

  /* Page hero */
  .page-hero { padding: 60px 0 48px; }
  .page-hero__title { font-size: clamp(1.8rem, 7vw, 2.4rem); }

  /* Lead banner */
  .lead-banner { padding-block: 48px; }
  .lead-banner__inner { flex-direction: column; gap: 24px; }
  .lead-banner .btn--outline { width: 100%; text-align: center; }

  /* Footer */
  .footer__inner { grid-template-columns: 1fr; gap: 40px; padding-bottom: 80px; }

  /* Form */
  .form { padding: 28px 20px; }

  /* Spec table */
  .spec-table th { width: auto; white-space: normal; }

  /* Contact */
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }

  .cta-box { flex-direction: column; }

  .guide-list__item { flex-direction: column; gap: 8px; }

  /* Thank you */
  .thankyou__title { font-size: 2rem; }

  /* Mobile CTA bar */
  .mobile-cta-bar { display: flex; }
  .footer { padding-bottom: 72px; }

  /* WhatsApp float above bar */
  .whatsapp-float { bottom: 80px; right: 16px; width: 50px; height: 50px; }

  /* FAQ */
  .faq-q { padding: 20px 24px; font-size: 0.92rem; }
  .faq-a p { padding: 0 24px 20px; }

  /* Two-col */
  .two-col, .two-col--60-40, .intro-section { grid-template-columns: 1fr; gap: 40px; }
}

/* ----------------------------------------------------------
   SMALL MOBILE  (≤ 480px)
   ---------------------------------------------------------- */
@media (max-width: 480px) {
  :root { --section-pad: 48px; }

  .nav__inner { padding-inline: 16px; }

  .hero__title  { font-size: clamp(2.2rem, 11vw, 3rem); line-height: 1; }
  .hero__badge  { font-size: 0.65rem; letter-spacing: 0.1em; }

  .stats-bar__inner { grid-template-columns: 1fr 1fr; }
  .stat { padding: 20px 12px; }
  .stat__number { font-size: 1.6rem; }

  .section__title { font-size: clamp(1.55rem, 8vw, 2rem); }
  .section__sub   { font-size: 0.95rem; }
  .section__label { font-size: 0.68rem; }

  .card     { padding: 20px; }
  .feature  { padding: 20px; }
  .value-card { padding: 32px 24px; }

  .page-hero { padding: 48px 0 40px; }
  .page-hero__title { font-size: clamp(1.6rem, 8vw, 2.2rem); }

  .btn { padding: 12px 24px; font-size: 0.82rem; }
  .btn--nav { padding: 9px 16px; }

  .footer__inner { gap: 32px; }

  .step { padding-inline: 0; }
  .step__num { width: 48px; height: 48px; font-size: 1rem; }

  .lead-banner { padding-block: 40px; }
  .lead-banner__title { font-size: 1.4rem; }

  .guide-list__item { padding: 20px; }

  .product-cat__header { flex-direction: column; align-items: flex-start; gap: 8px; }

  .spec-table th, .spec-table td { padding: 12px 14px; font-size: 0.85rem; }

  .form { padding: 20px 16px; }
  .form-group input, .form-group select, .form-group textarea { padding: 12px 14px; }

  .thankyou__check { width: 60px; height: 60px; font-size: 1.6rem; }
  .thankyou__title { font-size: 1.8rem; }

  .whatsapp-float { width: 46px; height: 46px; bottom: 76px; right: 12px; }

  .img-grid { grid-template-columns: 1fr; }
  .img-grid img { height: 200px; }
}