/* ============================================================
   ADELINE FAUCHARD — Responsive Styles
   Mobile-first approach
   Breakpoints: 480 | 768 | 1024 | 1280 | 1600
   ============================================================ */

/* ─── MOBILE FIRST BASE (<480px) ───────────────────────────── */

/* Gallery grid */
.gallery-grid {
  columns: 1;
}

/* Services grid */
.services__grid {
  grid-template-columns: 1fr;
}

/* About grid */
.about__grid {
  grid-template-columns: 1fr;
  gap: var(--sp-12);
}

.about__image-decor {
  display: none;
}

/* Stats grid */
.stats__grid {
  grid-template-columns: 1fr 1fr;
}

.stat-item {
  border-right: none;
  border-bottom: 1px solid var(--border);
}

.stat-item:nth-child(odd) {
  border-right: 1px solid var(--border);
}

/* Pricing */
.pricing-grid {
  grid-template-columns: 1fr;
}

/* Contact grid */
.contact__grid {
  grid-template-columns: 1fr;
  gap: var(--sp-12);
}

/* Footer */
.footer__top {
  grid-template-columns: 1fr 1fr;
}

.footer__brand {
  grid-column: 1 / -1;
}

/* Hero */
.hero__title {
  font-size: clamp(3rem, 14vw, 5rem);
}

/* Form row */
.form-row {
  grid-template-columns: 1fr;
}

/* Nav */
.nav { display: none; }
.hamburger { display: flex; }

/* Page hero */
.page-hero__breadcrumb {
  font-size: 0.65rem;
}

/* Pricing cards */
.pricing-card.featured {
  order: -1;
}

/* Grid 2/3 */
.grid-2,
.grid-3 {
  grid-template-columns: 1fr;
}

/* ─── SMALL TABLETS (≥ 480px) ──────────────────────────────── */
@media (min-width: 480px) {
  .gallery-grid {
    columns: 2;
  }

  .hero__title {
    font-size: clamp(3.5rem, 12vw, 6rem);
  }
}

/* ─── TABLETS (≥ 768px) ─────────────────────────────────────── */
@media (min-width: 768px) {
  /* Gallery */
  .gallery-grid {
    columns: 2;
  }

  /* Services */
  .services__grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Stats */
  .stats__grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .stat-item {
    border-right: 1px solid var(--border);
    border-bottom: none;
  }

  .stat-item:last-child {
    border-right: none;
  }

  .stat-item:nth-child(odd) {
    border-right: 1px solid var(--border);
  }

  /* Pricing */
  .pricing-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Contact */
  .contact__grid {
    grid-template-columns: 1fr 1.4fr;
  }

  /* Footer */
  .footer__top {
    grid-template-columns: 1.5fr 1fr 1fr;
  }

  .footer__brand {
    grid-column: auto;
  }

  /* About */
  .about__grid {
    grid-template-columns: 1fr 1fr;
    gap: clamp(3rem, 6vw, 6rem);
  }

  .about__image-decor {
    display: block;
  }

  /* Form row */
  .form-row {
    grid-template-columns: 1fr 1fr;
  }

  /* Grid */
  .grid-2 {
    grid-template-columns: 1fr 1fr;
  }

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

  /* Hero title */
  .hero__title {
    font-size: clamp(4rem, 10vw, 7rem);
  }
}

/* ─── DESKTOP (≥ 1024px) ────────────────────────────────────── */
@media (min-width: 1024px) {
  /* Nav */
  .nav { display: flex; }
  .hamburger { display: none; }
  .nav-mobile { display: none !important; }

  /* Gallery */
  .gallery-grid {
    columns: 3;
  }

  /* Services */
  .services__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Pricing */
  .pricing-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Footer */
  .footer__top {
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
  }

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

  /* Custom cursor */
  body { cursor: none; }
  a, button { cursor: none; }
}

/* ─── LARGE DESKTOP (≥ 1280px) ─────────────────────────────── */
@media (min-width: 1280px) {
  .gallery-grid {
    columns: 4;
  }

  .stats__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ─── XL DESKTOP (≥ 1600px) ────────────────────────────────── */
@media (min-width: 1600px) {
  :root {
    --header-h: 96px;
  }

  .gallery-grid {
    columns: 4;
  }
}

/* ─── PRINT ─────────────────────────────────────────────────── */
@media print {
  .header,
  .hero__scroll,
  .back-to-top,
  .cursor,
  .loader,
  .hamburger,
  .nav-mobile {
    display: none !important;
  }

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

  a {
    color: black;
    text-decoration: underline;
  }

  .hero {
    min-height: auto;
    page-break-after: always;
  }
}

/* ─── DARK MODE (already dark, but just in case) ────────────── */
@media (prefers-color-scheme: light) {
  /* The site is intentionally dark — no light mode variant */
}

/* ─── HIGH CONTRAST ─────────────────────────────────────────── */
@media (forced-colors: active) {
  :root {
    --gold: ButtonText;
    --border: ButtonText;
  }
}

/* ─── MOBILE-SPECIFIC OVERRIDES ─────────────────────────────── */
@media (max-width: 767px) {
  /* Smaller section padding on mobile */
  .section-pad {
    padding-block: clamp(4rem, 10vw, 6rem);
  }

  /* Hero text */
  .hero__actions {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-4);
  }

  /* Hero scroll indicator */
  .hero__scroll {
    display: none;
  }

  /* Section tag center on mobile */
  .section-header .section-tag {
    justify-content: center;
  }

  /* About stats */
  .about__stats {
    grid-template-columns: 1fr 1fr;
  }

  /* Testimonial */
  .testimonial-card {
    padding: var(--sp-8) var(--sp-4);
  }

  /* Lightbox nav */
  .lightbox__nav--prev { left: 0.5rem; }
  .lightbox__nav--next { right: 0.5rem; }

  /* Footer bottom */
  .footer__bottom {
    flex-direction: column;
    text-align: center;
  }

  .footer__legal {
    justify-content: center;
  }

  /* Logo sur mobile */
  .logo__img {
    height: clamp(60px, 15vw, 76px);
  }

  /* Mobile menu logo text */
  .logo__text { display: none; }
  .logo__mark { font-size: 1.5rem; }

  /* Nav cta on mobile */
  .nav__cta { display: none; }

  /* Loader logo sur mobile */
  .loader__logo {
    height: 48px !important;
  }
}

/* ─── TABLET PORTRAIT (768–1023) ────────────────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {
  .nav { display: none; }
  .hamburger { display: flex; }

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

  .about__grid {
    gap: var(--sp-8);
  }

  .pricing-grid {
    grid-template-columns: 1fr;
    max-width: 500px;
    margin-inline: auto;
  }

  .pricing-grid .pricing-card.featured {
    order: -1;
  }

  .pricing-grid .pricing-card {
    max-width: 100%;
  }

  body { cursor: auto; }
  a, button { cursor: pointer; }
}

/* ─── FINE-TUNING SPECIFIC ELEMENTS ─────────────────────────── */

/* Ensure custom cursor is hidden on touch devices */
@media (hover: none) and (pointer: coarse) {
  .cursor__dot,
  .cursor__ring {
    display: none !important;
  }

  body, a, button {
    cursor: auto;
  }

  a { cursor: pointer; }
  button { cursor: pointer; }
}

/* ─── ASPECT RATIOS ON MOBILE ────────────────────────────────── */
@media (max-width: 480px) {
  .about__image-frame {
    aspect-ratio: 4/3;
  }

  .hero {
    height: 100svh; /* Dynamic viewport height for mobile browsers */
    min-height: 500px;
  }
}

/* ─── NAVIGATION MOBILE ANIMATION ───────────────────────────── */
.nav-mobile {
  transform: translateX(100%);
  opacity: 1;
  display: flex; /* always flex, controlled by transform */
  visibility: hidden;
  pointer-events: none;
  transition:
    transform var(--dur-slow) var(--ease-out),
    visibility var(--dur-slow) var(--ease-out);
}

.nav-mobile.open {
  transform: translateX(0);
  visibility: visible;
  pointer-events: all;
}

@media (min-width: 1024px) {
  .nav-mobile {
    display: none !important;
  }
}

/* Stagger mobile nav items */
.nav-mobile .nav__item {
  opacity: 0;
  transform: translateX(30px);
  transition:
    opacity 0.4s var(--ease-out),
    transform 0.4s var(--ease-out);
}

.nav-mobile.open .nav__item:nth-child(1) { opacity: 1; transform: none; transition-delay: 200ms; }
.nav-mobile.open .nav__item:nth-child(2) { opacity: 1; transform: none; transition-delay: 280ms; }
.nav-mobile.open .nav__item:nth-child(3) { opacity: 1; transform: none; transition-delay: 360ms; }
.nav-mobile.open .nav__item:nth-child(4) { opacity: 1; transform: none; transition-delay: 440ms; }
.nav-mobile.open .nav__item:nth-child(5) { opacity: 1; transform: none; transition-delay: 520ms; }
.nav-mobile.open .nav__item:nth-child(6) { opacity: 1; transform: none; transition-delay: 600ms; }