/* ============================================================
   C SOLA — Responsive refinements
   Base styles in style.css are already mobile-considerate;
   this file layers breakpoint-specific adjustments.
   ============================================================ */

/* Small phones */
@media (max-width: 390px) {
  .hero__title { font-size: clamp(2.6rem, 11vw, 3.4rem); }
  .hero__sub { font-size: 1rem; }
  .btn { padding: 14px 22px; font-size: 0.88rem; }
  .story__lines .line { font-size: clamp(1.6rem, 9vw, 2.4rem); }
}

/* Phones */
@media (max-width: 600px) {
  :root { --nav-h: 68px; }
  .nav__links { display: none; }
  .nav__burger { display: flex; }
  .nav__pill-group { display: none; }
  .hero__scroll-cue { inset-inline-start: 20px; bottom: 24px; }
  .story, .flavors, .quality, .showcase, .final-cta { padding-top: 90px; padding-bottom: 90px; }
  .showcase__stage .can { width: 110px; height: 240px; }
}

/* Tablets */
@media (min-width: 601px) and (max-width: 1024px) {
  .hero__grid { gap: 24px; }
  .quality__grid { grid-template-columns: 1fr; }
}

/* Large desktop */
@media (min-width: 1440px) {
  .hero__title { font-size: clamp(4rem, 7vw, 7.6rem); }
  .container { padding-inline: 48px; }
}

/* 4K / ultra-wide */
@media (min-width: 2200px) {
  :root { --container: 1680px; }
}

/* Landscape phones — keep hero from feeling cramped */
@media (max-height: 480px) and (orientation: landscape) {
  .hero { min-height: auto; padding-block: 120px 60px; }
}