/* =========================================
   Responsive — Mobile-first
   Base styles (320–539px) live in layout.css
   and components.css
   ========================================= */

/* --- Tiny screens (under 360px, e.g. iPhone SE) --- */
@media (max-width: 359px) {
  :root {
    --font-size-3xl: 1.75rem;
    --font-size-2xl: 1.375rem;
    --font-size-xl: 1.125rem;
    --spacing-lg: 16px;
    --spacing-xl: 24px;
    --cloud-height: 40px;
    --cloud-overlap: -20px;
    --features-overlap: -40px;
  }

  .stores__grid {
    gap: 6px;
  }

  .store-btn img {
    border-radius: 8px;
  }
}

/* --- Large phones / past max-width (540px+) --- */
@media (min-width: 540px) {
  .page {
    margin-top: 0;
    border-radius: 0;
  }
}

/* --- Tablets (768px+) --- */
@media (min-width: 768px) {
  :root {
    --cloud-height: 70px;
    --cloud-overlap: -35px;
    --features-overlap: -70px;
  }

  .hero__title {
    font-size: 28px;
  }

  .wholesale__text {
    font-size: var(--font-size-base);
    max-width: 90%;
  }

  .feature__text {
    font-size: 14px;
  }

  .feature__icon {
    max-width: 160px;
  }
}

/* --- Desktops (1024px+) --- */
@media (min-width: 1024px) {
  :root {
    --width-max: 580px;
  }

  .page {
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.1);
  }
}

/* --- Large screens (1440px+) --- */
@media (min-width: 1440px) {
  :root {
    --width-max: 620px;
  }

  .page {
    box-shadow:
      0 12px 60px rgba(0, 0, 0, 0.08),
      0 0 0 1px rgba(0, 0, 0, 0.03);
  }

  .hero__title {
    font-size: 30px;
  }
}

/* --- Landscape on short viewports --- */
@media (max-height: 500px) and (orientation: landscape) {
  .hero__content {
    padding-bottom: 3%;
  }

  .cloud-transition {
    height: 30px;
    margin-top: -15px;
  }
}

/* --- Accessibility: reduce motion --- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}