/*
  Media Queries for Villa Lapis
  Breakpoints (max-width, largest → smallest so more specific rules win):
  - Desktop:        Up to 1920px
  - Smaller Laptop: Up to 1440px
  - Tablet:         Up to 991px
  - Mobile:         Up to 767px
  - Small Mobile:   Up to 480px
*/

/* ===================== Desktop (≤1920px) ===================== */
@media (max-width: 1920px) {
  :root {
    --fs-h1: clamp(3rem, 5vw, 4.5rem);
    --btn-padding-x: 1.75rem;
  }
}

/* ===================== Smaller Laptop (≤1440px) ===================== */
@media (max-width: 1440px) {
  :root {
    --fs-h1: clamp(2.5rem, 4vw, 3.5rem);
    --space-xl: 5rem;
  }
}

/* ===================== Tablet Portrait (≤991px) ===================== */
@media (max-width: 991px) {
  :root {
    --container-padding: 24px;
    --fs-h1: clamp(2rem, 5vw, 3rem);
    --fs-h2: clamp(1.75rem, 4vw, 2.5rem);
    --space-xl: 4rem;
    --space-md: 1.5rem;
  }

  /* ── Header ── */
  .menu-toggle {
    display: block;
  }

  .nav {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background-color: var(--clr-dark-olive);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
    padding: 2rem var(--container-padding);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.35s ease, visibility 0.35s ease;
    z-index: var(--z-overlay);
  }

  .nav.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
  }

  .nav .nav__link {
    color: var(--clr-beige);
    font-size: 1.5rem;
    letter-spacing: var(--ls-md);
  }

  .nav .nav__link:hover,
  .nav .nav__link--active {
    color: var(--clr-gold-accent) !important;
  }

  .nav .btn--header {
    background-color: var(--clr-beige);
    color: var(--clr-dark-olive);
    border-color: var(--clr-beige);
    font-size: 1rem;
    margin-top: 1rem;
  }

  .nav .btn--header:hover {
    background-color: var(--clr-gold-accent);
    border-color: var(--clr-gold-accent);
    color: var(--clr-dark-olive);
  }

  /* Raise header above overlay when nav is open so the X button stays visible */
  .header--nav-open {
    z-index: calc(var(--z-overlay) + 1);
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom-color: transparent !important;
    box-shadow: none !important;
  }

  /* Hamburger color logic */
  .menu-toggle .hamburger,
  .menu-toggle .hamburger::before,
  .menu-toggle .hamburger::after {
    background-color: var(--clr-white);
  }

  .header--fixed .menu-toggle .hamburger,
  .header--fixed .menu-toggle .hamburger::before,
  .header--fixed .menu-toggle .hamburger::after {
    background-color: var(--clr-dark-olive);
  }

  /* Always beige when menu is open (X over dark overlay) */
  .menu-toggle.is-open .hamburger,
  .menu-toggle.is-open .hamburger::before,
  .menu-toggle.is-open .hamburger::after {
    background-color: var(--clr-beige) !important;
  }

  /* ── Intro ── */
  .intro__inner {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }

  .intro__content,
  .intro__image,
  .intro__title {
    grid-column: 1 / -1;
    padding-right: 0;
    margin-bottom: var(--space-md);
  }

  /* ── Amenities ── */
  .amenities__title {
    margin-bottom: var(--space-md);
  }

  .amenities__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
  }

  /* ── Gallery ──
     Reset grid to flex-column so elements stack: content → window → nav.
     Give the window an explicit height so absolutely-positioned images
     have a parent to fill. Show the peek as a sliver on the right.
  */
  .gallery__inner {
    display: flex;
    flex-direction: column;
    min-height: auto;
  }

  .gallery__content {
    flex: 0 0 auto;
    padding-right: 0;
    padding-bottom: 0;
  }

  .gallery__window {
    flex: none;       /* prevent collapse in auto-height column flex */
    height: 460px;
  }

  .gallery__main {
    flex: 0 0 82%;    /* leave room for peek */
  }

  .gallery__nav {
    padding-top: var(--space-md);
    padding-bottom: var(--space-md);
    gap: .75rem;
  }

  .gallery__nav-btn {
    width: 48px;
    height: 48px;
  }

  /* ── Attractions ── 2 cards visible */
  .attraction-card {
    min-width: calc((100vw - var(--container-padding) * 2 - 1rem) / 2);
    max-width: calc((100vw - var(--container-padding) * 2 - 1rem) / 2);
    aspect-ratio: 4 / 3;
  }

  .attraction-card__time {
    font-size: 4rem
  }

  /* ── Location ── */
  .location__grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
  }

  .location__text-box,
  .location__img-suite,
  .location__img-terrace,
  .location__img-beach {
    margin-top: 0;
  }

  .location__img-beach {
    aspect-ratio: 4 / 3;
  }

  /* ── Reviews ── */
  .reviews__grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

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

  .contact__image img {
    height: 400px;
  }

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

  .footer__nav {
    align-items: center;
  }

  .footer__socials {
    justify-content: center;
  }

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

/* ===================== Mobile (≤767px) ===================== */
@media (max-width: 767px) {
  :root {
    --container-padding: 16px;
    --fs-h1: 2rem;
    --fs-h2: 1.5rem;
    --space-xl: 3rem;
  }

  .reviews__grid {
        gap: var(--space-sm);
    }

  /* ── Header ── */
  .header {
    padding: var(--space-md) 0;
  }

  /* ── Hero ── */
.hero {
    min-height: 85vh;
  }

  .hero__subtitle {
    font-size: 25px;
    margin-bottom: var(--space-sm);
    margin-left: 0;
  }

  .hero__logo {
    max-width: 90%;
  }

  .hero__content {
    align-items: center;
    text-align: center;
    margin-bottom: var(--space-lg);
  }

  .location__grid {
    gap: var(--space-sm);
  }

  /* ── Gallery ── reduce height on smaller screens */
  .gallery__window {
    height: 300px;
  }

  /* ── Attractions ── 1 card + peek of next */
  .attraction-card {
    min-width: calc((100vw - var(--container-padding) * 2) * 0.85);
    max-width: calc((100vw - var(--container-padding) * 2) * 0.85);
    aspect-ratio: 5 / 4;
  }

  .attractions__title {
    font-size: clamp(1.75rem, 5vw, 2.5rem);
    text-align: left;
  }

  .attractions__label {
    text-align: left;
  }

  /* Disable section-bg hover on touch screens */
  .attractions__section-bg {
    display: none;
  }

  .contact__title {
    margin-bottom: var(--space-md);
  }

  .contact__inner {
    gap: var(--space-md);
  }
}

/* ===================== Small Mobile (≤480px) ===================== */
@media (max-width: 480px) {

  .btn {padding: 1.25rem 1.75rem}

  .intro__title {
    font-size: 2.5rem;
  }

  /* ── Amenities — single column ── */
  .amenities__grid {
    grid-template-columns: 1fr;
  }

  .amenity__icon {
    width: 24px;
    height: 24px;
  }

  /* ── Gallery — shorter on very small screens ── */
  .gallery__window {
    height: 240px;
  }

  /* ── Attractions — ~1.1 cards, peek of next ── */
  .attraction-card {
    min-width: calc((100vw - var(--container-padding) * 2) * 0.88);
    max-width: calc((100vw - var(--container-padding) * 2) * 0.88);
    aspect-ratio: 3 / 2;
  }

  .attraction-card__type,
  .attraction-card__name {
    font-size: 0.9rem;
  }

  .footer__logo-text {
    font-size: 2.5rem;
  }
}