/* ==========================================================================
   GULPY — Responsive (responsive.css)
   Mobile-first: style.css holds the base (phone) layout. Everything here
   enhances upward via min-width. Targets: iPhone SE .. 4K.
   Breakpoints:  480 (large phone) · 640 (tablet-portrait) · 900 (tablet-land)
                 1024 (laptop) · 1280 (desktop) · 1600 (wide) · 1920+ (4K)
   ========================================================================== */

/* ------------------------------------------------ 480px — large phones */
@media (min-width: 480px) {
  .hero__actions { flex-wrap: nowrap; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

/* ------------------------------------------------ 640px — tablet portrait */
@media (min-width: 640px) {
  :root { --nav-h: 80px; }

  .footer__grid {
    grid-template-columns: 1.6fr 1fr 1fr;
  }
  .footer__brand { grid-column: 1 / -1; }

  .hero__visual { width: min(100%, 420px); }
}

/* ------------------------------------------------ 900px — desktop nav on */
@media (min-width: 900px) {
  .nav__burger { display: none; }
  .drawer, .scrim { display: none; }

  .nav__links {
    display: flex;
    align-items: center;
    gap: clamp(1.1rem, 2.2vw, 2.1rem);
  }
  .nav__cta { display: inline-flex; }

  /* Two-column hero */
  .hero__grid {
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(2.5rem, 5vw, 4.5rem);
  }
  .hero__visual { justify-self: end; width: min(100%, 560px); }

  .footer__brand { grid-column: auto; }
  .footer__grid { grid-template-columns: 2fr 1fr 1fr 1.2fr; }
}

/* ------------------------------------------------ 1024px — laptop polish */
@media (min-width: 1024px) {
  .nav__inner { padding-inline: clamp(2rem, 4vw, 3rem); }
  .hero__stats { gap: 3rem; }
  .hero__stat .num { font-size: 2.1rem; }
}

/* ------------------------------------------------ 1280px — desktop full */
@media (min-width: 1280px) {
  .hero { padding-top: calc(var(--nav-h) + 2.5rem); }
  .hero__visual { width: 100%; max-width: 620px; }
}

/* ------------------------------------------------ 1600px — wide monitors */
@media (min-width: 1600px) {
  :root { --container: 1360px; }
  .hero__title { font-size: clamp(4rem, 4vw, 6.4rem); }
  .hero__visual { max-width: 680px; }
}

/* ------------------------------------------------ 1920px+ — 4K / retina */
@media (min-width: 1920px) {
  :root { --container: 1520px; }
  .nav__inner { max-width: 1720px; }
  body { font-size: 1.2rem; }
}

/* ------------------------------------------------ short landscape phones */
@media (max-height: 560px) and (orientation: landscape) {
  .hero { min-height: auto; padding-block: calc(var(--nav-h) + 2rem) 3rem; }
  .hero__cue { display: none; }
}

/* ------------------------------------------------ hover-incapable = touch */
@media (hover: none) {
  .btn:hover { transform: none; }
  .float { animation-play-state: running; }
}

/* ---------------------------------------- MILESTONE 2 — section responsiveness */
@media (min-width: 640px) {
  .benefits__grid { grid-template-columns: 1fr 1fr; }
  .product-card { flex-basis: 46%; }
  .promo__band { grid-template-columns: 1.2fr 1fr; align-items: center; }
}

@media (min-width: 900px) {
  .why__grid { grid-template-columns: 1fr 1fr; }
  .why--reverse .why__media { order: -1; }        /* image on the left */
  .benefits__grid { grid-template-columns: repeat(4, 1fr); }
  .product-card { flex-basis: 30%; max-width: 320px; }
  .products__head { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .products__lead { margin-bottom: .25rem; }
  .products__nav { display: flex; }
}

@media (min-width: 1280px) {
  .product-card { flex-basis: 23%; }
}

/* ---------------------------------------- MILESTONE 3 — About responsiveness */
@media (min-width: 640px) {
  .vgrid  { grid-template-columns: 1fr 1fr; }
  .steps  { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .page-hero__grid { grid-template-columns: 1.05fr .95fr; }
  .page-hero__media { justify-self: end; width: 100%; max-width: 520px; }
  .vgrid  { grid-template-columns: repeat(3, 1fr); }
  .steps  { grid-template-columns: repeat(4, 1fr); }
}

/* ---------------------------------------- MILESTONE 4 — Menu responsiveness */
@media (min-width: 600px) {
  .menu-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 960px) {
  .menu-grid { grid-template-columns: repeat(3, 1fr); }
}