/* ============================================================
   CreamyCloud — Responsive Styles
   ============================================================ */

/* This file handles additional breakpoint-specific overrides
   and component responsiveness beyond style.css */

@media (max-width: 1200px) {
  .container { max-width: 960px; }

  .hero-content { max-width: 640px; }

  .footer-top { gap: var(--sp-4); }
}

@media (max-width: 1024px) {
  .about-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }

  .why-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }

  .about-image-wrap {
    max-width: 500px;
    margin: 0 auto;
    height: 400px;
  }

  .about-main-img {
    height: 400px;
  }

  .why-image-stack {
    max-width: 480px;
    margin: 0 auto;
    height: 380px;
  }

  .why-img-main,
  .why-img-secondary {
    position: static;
    width: 100%;
    height: 240px;
    border-radius: var(--r-lg);
  }

  .why-image-stack {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-2);
    height: auto;
  }

  .why-img-secondary { border: none; }

  .newsletter-wrap {
    grid-template-columns: 1fr;
    gap: var(--sp-5);
  }

  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-5);
  }

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

  .stat-card::after { display: none; }

  .stat-card {
    border: 1px solid var(--clr-border-glass);
    border-radius: var(--r-md);
    background: var(--clr-bg-glass);
  }
}

@media (max-width: 768px) {
  :root {
    --sp-16: 64px;
    --sp-12: 56px;
    --sp-10: 48px;
  }

  .nav-links { display: none; }
  .nav-cta   { display: none; }
  .nav-hamburger { display: flex; }

  .hero-float-card { display: none; }

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

  .flavors-grid {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
  }

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

  .footer-top { grid-template-columns: 1fr; }

  .cta-banner-wrap { padding: var(--sp-6) var(--sp-3); }

  .cta-timer {
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .timer-block { min-width: 56px; padding: 8px 12px; }

  .newsletter-wrap { padding: var(--sp-5) var(--sp-3); }

  .hero-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-2);
  }

  .hero-social-proof { flex-wrap: wrap; }

  .about-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-3);
  }

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

@media (max-width: 480px) {
  :root {
    --sp-16: 48px;
    --sp-12: 40px;
  }

  .hero-headline { font-size: 2.2rem; }

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

  .cta-timer { gap: 6px; }

  .timer-sep { display: none; }

  .timer-block { min-width: 52px; }

  .section-title { font-size: var(--fs-2xl); }

  .newsletter-input-wrap {
    flex-direction: column;
    border-radius: var(--r-md);
    overflow: hidden;
  }

  .newsletter-input-wrap input {
    padding: 14px 20px;
  }

  .newsletter-input-wrap button {
    padding: 14px;
    text-align: center;
  }

  .footer-social { flex-wrap: wrap; }

  .flavor-footer { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }

  .nav-logo .logo-text { display: none; }
}

/* Print styles */
@media print {
  #navbar,
  .hero-float-card,
  .marquee-section,
  #newsletter,
  #cta-banner { display: none; }

  body { background: #fff; color: #000; }
}