/* ============================================
   SOMMET — Responsive Styles
   Mobile-first breakpoints
   ============================================ */

/* ========================
   Tablet (max-width: 1024px)
   ======================== */
@media (max-width: 1024px) {
  :root {
    --space-3xl: 5rem;
    --space-4xl: 6rem;
  }

  /* Navbar */
  .navbar__links {
    display: none;
  }

  .navbar__cta {
    display: none;
  }

  .navbar__toggle {
    display: flex;
  }

  /* Home — Intro */
  .intro__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
  }

  .intro__text {
    padding-inline-start: var(--space-md);
  }

  /* Experience strips */
  .experience-strip {
    min-height: 360px;
  }

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

  /* Chalet — Specs bar */
  .specs-bar__item {
    padding: 0 var(--space-lg);
  }

  /* Chalet — Spaces */
  .space-block {
    min-height: 400px;
  }

  /* Booking */
  .booking-page__grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .booking-page__right {
    position: static;
  }

  /* Gallery */
  .gallery-masonry {
    columns: 2;
  }

  /* About */
  .about-story__grid {
    gap: var(--space-xl);
  }

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

/* ========================
   Mobile (max-width: 768px)
   ======================== */
@media (max-width: 768px) {
  :root {
    --space-lg: 1.5rem;
    --space-xl: 2.5rem;
    --space-2xl: 3.5rem;
    --space-3xl: 4rem;
    --space-4xl: 5rem;
    --nav-height: 60px;
  }

  body {
    font-size: 15px;
  }

  /* Hero */
  .hero__content {
    inset-inline-start: var(--space-md);
    inset-inline-end: var(--space-md);
    bottom: var(--space-2xl);
  }

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

  /* Intro */
  .intro__grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .intro__image {
    aspect-ratio: 3/2;
  }

  .intro__text {
    padding-inline-start: 0;
  }

  /* Experience strips */
  .experience-strip {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .experience-strip__image {
    aspect-ratio: 16/10;
  }

  .experience-strip:nth-child(even) .experience-strip__image {
    order: unset;
  }

  .experience-strip:nth-child(even) .experience-strip__content {
    order: unset;
  }

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

  /* Atmosphere */
  .atmosphere {
    height: 50vh;
    min-height: 350px;
  }

  .atmosphere__overlay {
    flex-direction: column;
    gap: var(--space-sm);
  }

  /* Page hero */
  .page-hero {
    height: 60vh;
    min-height: 400px;
  }

  .page-hero__content {
    inset-inline-start: var(--space-md);
    inset-inline-end: var(--space-md);
  }

  /* Specs bar */
  .specs-bar__inner {
    flex-wrap: wrap;
    gap: var(--space-md);
  }

  .specs-bar__item {
    padding: 0;
    border-inline-end: none;
    flex: 1 1 calc(50% - var(--space-md));
    text-align: start;
  }

  /* Space blocks */
  .space-block {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .space-block:nth-child(even) {
    grid-template-columns: 1fr;
  }

  .space-block:nth-child(even) .space-block__image {
    order: unset;
  }

  .space-block:nth-child(even) .space-block__content {
    order: unset;
  }

  .space-block__image {
    aspect-ratio: 16/10;
  }

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

  /* Amenities */
  .amenities__grid {
    grid-template-columns: 1fr;
  }

  /* Calendar */
  .calendar {
    max-width: 100%;
  }

  /* Gallery */
  .gallery-masonry {
    columns: 2;
    column-gap: 8px;
  }

  .gallery-masonry__item {
    margin-bottom: 8px;
  }

  /* About */
  .about-hero {
    height: 45vh;
  }

  .about-story__grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  /* Contact */
  .contact-form {
    padding: var(--space-lg);
  }

  /* Footer */
  .footer__inner {
    flex-direction: column;
    gap: var(--space-lg);
  }

  .footer__nav {
    flex-direction: column;
    gap: var(--space-lg);
  }

  .footer__bottom {
    flex-direction: column;
    gap: var(--space-sm);
    text-align: center;
  }

  /* Improved Touch Targets */
  .btn {
    width: 100%;
    padding: 18px 24px;
    font-size: 0.8125rem;
  }

  .form-input, .form-textarea {
    padding: 16px 0;
    font-size: 1.0625rem; /* Prevent iOS zoom */
  }

  .gallery-tab {
    padding: 12px 8px;
    font-size: 0.8125rem;
  }

  .calendar__day {
    min-height: 44px;
  }

  /* Auth Page Mobile */
  .auth-page {
    padding-top: calc(var(--nav-height) + var(--space-md));
    padding-bottom: var(--space-xl);
    align-items: flex-start;
  }

  .auth-card {
    padding: var(--space-lg);
    box-shadow: none;
    background: transparent;
  }
}

/* ========================
   Small Mobile (max-width: 480px)
   ======================== */
@media (max-width: 480px) {
  :root {
    --space-lg: 1.25rem;
    --space-xl: 2rem;
    --space-3xl: 3rem;
    --space-4xl: 3.5rem;
  }

  h1 {
    font-size: 2.25rem;
  }

  h2 {
    font-size: 1.75rem;
  }

  .hero__title {
    font-size: 2.25rem;
  }

  .auth-title {
    font-size: 1.75rem;
  }

  .gallery-masonry {
    columns: 1;
  }

  .gallery-tabs {
    flex-wrap: wrap;
  }

  .specs-bar__item {
    flex: 1 1 100%;
  }

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

  .lightbox__nav--prev {
    inset-inline-start: var(--space-xs);
  }

  .lightbox__nav--next {
    inset-inline-end: var(--space-xs);
  }
}