/* =============================================================
   RESPONSIVE.CSS — Breakpoints for Tablet & Mobile
   ============================================================= */

/* ─────────────────────────────────────────────
   BREAKPOINT REFERENCE:
   --bp-sm:   480px   (large phone)
   --bp-md:   768px   (tablet)
   --bp-lg:   1024px  (small laptop)
   --bp-xl:   1280px  (desktop)
   --bp-2xl:  1536px  (large desktop)
───────────────────────────────────────────── */

/* ─── TABLET (≤ 1024px) ─── */
@media (max-width: 1024px) {

  /* Layout */
  .footer__top {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  .footer__links {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Collection slider – show 1 slide full-width on tablet */
  #collectionSlider .slider__slide {
    width: calc(60% - var(--space-3));
  }

  /* Stores slider */
  #storesSlider .slider__slide {
    width: calc(60% - var(--space-4));
  }

  /* Buy the look */
  .look__grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ─── TABLET PORTRAIT (≤ 768px) ─── */
@media (max-width: 768px) {

  /* Hero */
  .hero__content {
    padding-bottom: var(--space-12);
  }

  /* Collection slider – full width */
  #collectionSlider .slider__slide {
    width: calc(85% - var(--space-3));
    aspect-ratio: 4/5;
  }

  /* Buy the look – stack vertically */
  .look__grid {
    grid-template-columns: 1fr;
  }

  .look__main {
    aspect-ratio: 4/3;
  }

  /* Footer */
  .footer__links {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8);
  }

  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }

  /* Stores slider */
  #storesSlider .slider__slide {
    width: calc(80% - var(--space-4));
  }

  /* Section padding reduction */
  .section {
    padding-block: clamp(3rem, 6vw, 6rem);
  }

  /* Newsletter */
  .newsletter__form {
    flex-direction: column;
    align-items: stretch;
  }

  .newsletter__input {
    min-width: unset;
  }

  .newsletter__form .btn {
    width: 100%;
  }

  /* Blog grid */
  .blog__grid {
    grid-template-columns: 1fr;
  }
}

/* ─── MOBILE (≤ 480px) ─── */
@media (max-width: 480px) {

  /* Hero */
  .hero {
    min-height: 100svh;
  }

  .hero__socials {
    gap: var(--space-2);
  }

  .social-icon {
    width: 36px;
    height: 36px;
    font-size: var(--fs-base);
  }

  /* Section title */
  .section-title {
    font-size: clamp(var(--fs-xl), 8vw, var(--fs-3xl));
  }

  /* Collection slider */
  #collectionSlider .slider__slide {
    width: calc(90% - var(--space-3));
    aspect-ratio: 3/4;
  }

  /* Stores */
  #storesSlider .slider__slide {
    width: calc(90% - var(--space-4));
  }

  .store-card img {
    height: 200px;
  }

  /* Footer */
  .footer__links {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }

  .footer__legal {
    gap: var(--space-4);
    flex-wrap: wrap;
  }

  /* Buttons */
  .btn {
    padding: var(--space-3) var(--space-6);
    font-size: var(--fs-xs);
  }

  /* Accordion */
  .accordion__header {
    font-size: var(--fs-base);
    padding: var(--space-4) 0;
  }

  /* Feature list */
  .feature__list li {
    font-size: var(--fs-sm);
  }

  /* Video controls */
  .video-player__controls {
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
  }

  /* Look detail slide */
  .look__detail-slide img {
    height: 220px;
  }
}

/* ─── EXTRA SMALL (≤ 360px) ─── */
@media (max-width: 360px) {
  .footer__links {
    grid-template-columns: 1fr;
  }
}

/* ─── LARGE DESKTOP (≥ 1280px) ─── */
@media (min-width: 1280px) {

  /* Collection slider – show 2.5 slides */
  #collectionSlider .slider__slide {
    width: calc(33.333% - var(--space-3));
  }

  /* Stores slider – show 2 stores */
  #storesSlider .slider__slide {
    width: calc(33.333% - var(--space-4));
  }
}

/* ─── PRINT ─── */
@media print {
  .hero__scroll,
  .slider__btn,
  .newsletter,
  .video-player {
    display: none !important;
  }

  body {
    background: white;
    color: black;
  }
}

/* ─── REDUCED MOTION ─── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}