/* ============================================
   MADE Institut — Responsive (Mobile-First)
   Base = Mobile < 576px
   ============================================ */

/* ══════════════════════════════════════════════
   MOBILE ADJUSTMENTS (base, < 576px)
   ══════════════════════════════════════════════ */

/* ── Navigation ── */
.nav-toggle {
  display: flex;
}

.nav-links {
  display: none;
}

.mobile-menu {
  display: flex;
}

/* ── Hero mobile ── */
.hero__emblem {
  width: 80px;
}

.hero__content {
  padding: var(--space-lg);
}

.hero .btn {
  width: 100%;
}

.hero__scroll {
  display: none;
}

/* ── Soins mobile ── */
.soin-card {
  flex: 0 0 260px;
}

.soins__nav {
  display: none;
}

/* ── Location mobile ── */
.location__grid {
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

.location__map iframe {
  height: 250px;
}

/* ── About mobile ── */
.about__grid {
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

.about__image {
  order: -1;
}

.about__content .section__label {
  text-align: center;
}

.about__content h2 {
  text-align: center;
}

.about__quote {
  font-size: var(--fs-h4);
}

/* ── Contact mobile ── */
.contact__grid {
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

.contact-form__row {
  flex-direction: column;
}

/* ── Footer mobile ── */
.footer__grid {
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  text-align: center;
}

.footer__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.footer__nav ul {
  align-items: center;
}

.footer__connect {
  align-items: center;
}

.social-links {
  justify-content: center;
}

.newsletter-form {
  flex-direction: column;
}

.newsletter-form .btn {
  width: 100%;
}

.footer__bottom {
  flex-direction: column;
  text-align: center;
}

.footer__legal {
  justify-content: center;
}

/* ── Booking modal mobile = full screen ── */
.booking-modal {
  border-radius: 0;
}

.booking-step__label {
  display: none;
}

.booking-step__line {
  width: 24px;
}

.booking-modal__footer {
  padding: var(--space-md);
}

.booking-modal__footer .btn {
  min-width: 120px;
  flex: 1;
}

/* ── Toast mobile ── */
.toast {
  top: auto;
  bottom: var(--space-md);
  left: var(--space-md);
  right: var(--space-md);
  max-width: none;
}

/* ══════════════════════════════════════════════
   SMALL SCREENS (≥ 576px)
   ══════════════════════════════════════════════ */
@media (min-width: 576px) {
  .soin-card {
    flex: 0 0 280px;
  }

  .booking-services {
    grid-template-columns: 1fr;
  }

  .booking-slots__grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }

  .newsletter-form {
    flex-direction: row;
  }

  .newsletter-form .btn {
    width: auto;
  }
}

/* ══════════════════════════════════════════════
   TABLET (≥ 768px)
   ══════════════════════════════════════════════ */
@media (min-width: 768px) {
  .container {
    padding: 0 var(--space-lg);
  }

  /* Location 2 columns */
  .location__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
  }

  .location__map iframe {
    height: 300px;
  }

  /* About side by side */
  .about__grid {
    grid-template-columns: 2fr 3fr;
    gap: var(--space-2xl);
  }

  .about__content .section__label {
    text-align: left;
  }

  .about__content h2 {
    text-align: left;
  }

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

  .contact-form__row {
    flex-direction: row;
  }

  /* Footer 2 columns */
  .footer__grid {
    grid-template-columns: 1fr 1fr;
    text-align: left;
  }

  .footer__brand {
    align-items: flex-start;
  }

  .footer__nav ul {
    align-items: flex-start;
  }

  .footer__connect {
    align-items: flex-start;
  }

  .social-links {
    justify-content: flex-start;
  }

  .footer__bottom {
    flex-direction: row;
    text-align: left;
  }

  .footer__legal {
    justify-content: flex-end;
  }

  /* Booking step labels visible */
  .booking-step__label {
    display: block;
  }

  .booking-step__line {
    width: 40px;
  }

  /* Navigation — show desktop links, hide hamburger from tablet up */
  .nav-toggle {
    display: none;
  }

  .nav-links {
    display: flex;
  }

  .mobile-menu {
    display: none !important;
  }

  /* Toast back to top-right */
  .toast {
    top: calc(var(--nav-height) + var(--space-md));
    bottom: auto;
    left: auto;
    right: var(--space-md);
    max-width: 400px;
  }
}

/* ══════════════════════════════════════════════
   DESKTOP (≥ 992px)
   ══════════════════════════════════════════════ */
@media (min-width: 992px) {

  /* Hero */
  .hero__emblem {
    width: 120px;
  }

  .hero .btn {
    width: auto;
  }

  .hero__scroll {
    display: flex;
  }

  /* Soins — larger cards on desktop, show nav arrows */
  .soin-card {
    flex: 0 0 320px;
  }

  .soins__nav {
    display: flex;
  }

  /* Location wider */
  .location__grid {
    grid-template-columns: 1.2fr 1fr;
    gap: var(--space-3xl);
  }

  .location__map iframe {
    height: 350px;
  }

  /* About wider gap */
  .about__grid {
    gap: var(--space-3xl);
  }

  /* Footer 3 columns */
  .footer__grid {
    grid-template-columns: 1.2fr 1fr 1.5fr;
    gap: var(--space-3xl);
  }

  /* Booking modal = centered card */
  .booking-modal {
    inset: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    width: 100%;
    max-width: 640px;
    max-height: 90vh;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
  }

  .booking-modal.is-active {
    transform: translate(-50%, -50%) scale(1);
  }

  .booking-modal__footer .btn {
    flex: none;
  }
}

/* ══════════════════════════════════════════════
   LARGE DESKTOP (≥ 1200px)
   ══════════════════════════════════════════════ */
@media (min-width: 1200px) {
  .container {
    padding: 0 var(--space-xl);
  }

  .soins__grid {
    gap: var(--space-xl);
  }

  .booking-modal {
    max-width: 700px;
  }
}

/* ══════════════════════════════════════════════
   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;
  }

  [data-animate] {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ══════════════════════════════════════════════
   HOVER-CAPABLE DEVICES (no hover on touch)
   ══════════════════════════════════════════════ */
@media (hover: none) {
  .soin-card:hover {
    transform: none;
    box-shadow: var(--shadow-sm);
  }

  .soin-card:hover .soin-card__image img {
    transform: none;
  }

  .nav-links a::after {
    display: none;
  }
}

/* ══════════════════════════════════════════════
   SAFE AREA (notch devices)
   ══════════════════════════════════════════════ */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .booking-modal__footer {
    padding-bottom: calc(var(--space-md) + env(safe-area-inset-bottom));
  }

  .mobile-menu {
    padding-bottom: env(safe-area-inset-bottom);
  }

  .footer {
    padding-bottom: calc(var(--space-lg) + env(safe-area-inset-bottom));
  }
}

/* ══════════════════════════════════════════════
   PRINT
   ══════════════════════════════════════════════ */
@media print {
  .site-header,
  .hero__scroll,
  .booking-modal,
  .toast,
  .mobile-menu,
  .nav-toggle,
  .btn--primary,
  .newsletter-form,
  .social-links {
    display: none !important;
  }

  body {
    font-size: 12pt;
    color: #000;
    background: #fff;
  }

  .section {
    padding: 2rem 0;
    page-break-inside: avoid;
  }

  a {
    color: #000;
    text-decoration: underline;
  }

  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #666;
  }
}