/* ==========================================================================
   Venus Dehydrates — responsive.css
   All media queries
   ========================================================================== */

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

  .container { padding: 0 20px; }

  h1 { font-size: 44px; }
  h2 { font-size: 32px; }
  h3 { font-size: 22px; }

  .hero h1 { font-size: 42px; }
  .inner-hero h1 { font-size: 36px; }

  /* 4-col grids → 2-col */
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .certs-grid { grid-template-columns: repeat(2, 1fr); }

  /* Product grid 3 -> 2 */
  .product-grid { grid-template-columns: repeat(2, 1fr); }

  /* Footer 4-col → 2-col */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 36px 28px;
  }

  /* About: 2-col → stack */
  .about-grid,
  .story-grid,
  .factory-grid,
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .about-image { order: -1; }
  .story-image { order: -1; }

  /* Stats bar: wrap */
  .stats-row { flex-wrap: wrap; gap: 24px 0; }
  .stats-row .stat {
    flex: 0 0 50%;
    border-right: none;
  }
  .stats-row .stat .num { font-size: 38px; }

  /* CTA strip wrap */
  .cta-strip-inner { flex-direction: column; align-items: flex-start; }

  /* Timeline: center it on tablet */
  .timeline-card { max-width: none; }
}

/* === Mobile (≤ 768px) === */
@media (max-width: 768px) {
  :root {
    --section-pad: 56px;
  }

  /* Navbar: hide links, show hamburger */
  /* Mobile dropdown menu — collapsed by default, slides down when body.nav-open */
  .nav-links {
    position: fixed;
    top: var(--navbar-height-scrolled);
    left: 0;
    right: 0;
    background: #fff;
    flex-direction: column;
    gap: 0;
    padding: 0;
    box-shadow: none;
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: max-height 0.35s ease, padding 0.35s ease, box-shadow 0.35s ease, visibility 0s linear 0.35s;
    z-index: 999;
    pointer-events: none;
  }
  .nav-links a {
    width: 100%;
    padding: 16px 24px;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-dark) !important;
    font-size: 15px;
    text-align: left;
  }
  .nav-links a:last-child {
    border-bottom: none;
  }
  .nav-links a.active::after { display: none; }
  .nav-links .mobile-cta {
    display: block;
    margin: 14px 24px;
    width: calc(100% - 48px);
    background: var(--color-accent);
    color: #fff !important;
    text-align: center;
    border-radius: var(--radius-md);
    padding: 12px;
    border-bottom: none !important;
  }
  body.nav-open .nav-links {
    max-height: 600px;
    padding: 8px 0;
    box-shadow: var(--shadow-md);
    visibility: visible;
    pointer-events: auto;
    transition: max-height 0.35s ease, padding 0.35s ease, box-shadow 0.35s ease, visibility 0s linear 0s;
  }

  /* Desktop CTA button hidden on mobile */
  .nav-cta-desktop { display: none; }
  .hamburger { display: flex; }

  /* Hero */
  .hero {
    min-height: 80vh;
    max-height: none;
    height: auto;
    padding: 120px 0 80px;
  }
  .hero h1 { font-size: 28px; }
  .hero-sub { font-size: 15px; }
  .hero-pill { font-size: 11px; padding: 5px 14px; }

  .hero-buttons { flex-direction: column; align-items: stretch; gap: 12px; }
  .hero-buttons .btn { width: 100%; }

  /* Inner hero */
  .inner-hero { height: auto; min-height: 260px; padding: 90px 0 40px; }
  .inner-hero h1 { font-size: 30px; }

  /* All grids → 1-col */
  .why-grid,
  .certs-grid,
  .product-grid,
  .factory-images {
    grid-template-columns: 1fr;
  }

  .footer-grid { grid-template-columns: 1fr; gap: 32px; }

  /* Typography down a notch */
  h1 { font-size: 32px; }
  h2 { font-size: 26px; }
  h3 { font-size: 20px; }

  /* CTA strip */
  .cta-strip h2 { font-size: 24px; }
  .cta-strip-inner { gap: 20px; }
  .cta-buttons { width: 100%; }
  .cta-buttons .btn { flex: 1; min-width: 140px; }

  /* Timeline: single column */
  .timeline::before {
    left: 20px;
  }
  .timeline-item {
    width: 100%;
    padding: 16px 0 16px 56px;
  }
  .timeline-item:nth-child(even) {
    margin-left: 0;
    padding: 16px 0 16px 56px;
  }
  .timeline-year {
    left: -8px;
    right: auto;
    top: 18px;
    width: 48px;
    height: 48px;
    font-size: 13px;
  }
  .timeline-item:nth-child(even) .timeline-year {
    left: -8px;
    right: auto;
  }
  .timeline-card,
  .timeline-item:nth-child(even) .timeline-card {
    max-width: none;
    margin: 0;
  }

  /* Contact: form first */
  .contact-grid {
    grid-template-columns: 1fr;
  }
  .form-card {
    padding: 28px 20px;
  }
  .form-row {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* Cert strip */
  .cert-strip .container {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  /* Footer bottom */
  .footer-bottom-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  /* Stats bar */
  .stats-row .stat { flex: 0 0 50%; }
  .stats-row .stat .num { font-size: 32px; }

  /* Logo sub-text smaller on mobile, image shrinks too */
  .nav-logo .logo-name { font-size: 18px; }
  .nav-logo .logo-sub { font-size: 10px; }
  .nav-logo-img { height: 34px; }
  .nav-logo { gap: 8px; }

  /* Section padding tighten */
  section { padding: var(--section-pad) 0; }

  /* About image first on mobile */
  .about-image,
  .story-image { order: -1; }
}

/* === Small mobile (≤ 480px) === */
@media (max-width: 480px) {
  .container { padding: 0 16px; }

  h1 { font-size: 26px; }
  .hero h1 { font-size: 24px; }

  /* Hide hero pill */
  .hero-pill { display: none; }

  /* WhatsApp button reposition */
  .wa-float {
    bottom: 16px;
    right: 16px;
    width: 52px;
    height: 52px;
  }
  .wa-float svg { width: 24px; height: 24px; }

  /* Speed up cert marquee */
  .marquee-track { animation-duration: 18s; }

  .form-card { padding: 22px 16px; }
  .form-card h3 { font-size: 22px; }

  /* CTA buttons stack */
  .cta-buttons .btn {
    flex: 0 0 100%;
    text-align: center;
    justify-content: center;
  }

  /* Stats stack */
  .stats-row .stat { flex: 0 0 100%; }

  /* Inner hero h1 */
  .inner-hero h1 { font-size: 26px; }
}

/* Print */
@media print {
  .navbar, .wa-float, .cta-strip, .footer, .nav-overlay { display: none !important; }
  body { color: #000; }
}