/* =========================================================
   AHA COMFORTS — responsive.css
   Breakpoints: 1280 / 1180 / 1024 / 860 / 560 / 390 / 360
   ========================================================= */

@media (max-width: 1280px) {
  :root {
    --container-max: 1240px;
  }
}

@media (max-width: 1024px) {
  .gallery-cell--hero  { grid-column: span 7; }
  .gallery-cell--wide  { grid-column: span 8; }
  .gallery-cell--side  { grid-column: span 5; }
  .gallery-cell--pair  { grid-column: span 4; }
  .gallery-cell--tall  { grid-column: span 4; }
  .gallery-cell--std   { grid-column: span 4; }

  #gallery .masonry {
    max-width: 100%;
  }

  .feature-room {
    gap: clamp(1.75rem, 4vw, 3.5rem);
  }

  .location-layout {
    gap: clamp(1.75rem, 4vw, 3rem);
  }
}

@media (max-width: 1180px) {
  .room-grid { grid-template-columns: repeat(2, 1fr); }
  .amenity-grid,
  .amenity-grid1 { grid-template-columns: repeat(3, 1fr); }
  .value-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1.2fr 1fr 1fr; }
  .footer-col:nth-child(4) { grid-column: 1 / -1; }
  .rd-layout { grid-template-columns: 1fr; }
  .rd-booking-card { position: static; }
  .masonry { columns: 3 220px; }

  .gallery-cell--hero  { grid-column: span 8; }
  .gallery-cell--side  { grid-column: span 4; }
  .gallery-cell--wide  { grid-column: span 7; }
  .gallery-cell--pair  { grid-column: span 5; }
  .gallery-cell--tall  { grid-column: span 4; }
  .gallery-cell--std   { grid-column: span 4; }
}

@media (max-width: 860px) {
  :root { --section-pad: 4rem; }

  .site-header {
    padding-top: 0.75rem;
  }

  .site-header .container {
    background: rgba(23, 20, 17, 0.58);
    border-radius: 22px;
    padding-block: 0.32rem;
  }

  .site-header.is-scrolled {
    padding-top: 0.5rem;
  }

  .site-header.is-scrolled .container {
    background: rgba(255, 253, 249, 0.96);
  }

  .nav-links {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(82vw, 360px);
    height: 100vh;
    height: 100dvh;
    background:
      radial-gradient(ellipse 80% 40% at 100% 0%, rgba(226, 194, 125, 0.22), transparent 55%),
      linear-gradient(165deg, #FFFDF9 0%, #FAF6EF 48%, #F3ECDD 100%);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.35rem;
    padding: var(--space-xl) var(--space-lg);
    transform: translateX(100%);
    transition: transform var(--dur-med) var(--ease-luxury);
    box-shadow: -28px 0 80px rgba(23, 20, 17, 0.22);
    z-index: 50;
    border-left: 1px solid rgba(233, 220, 192, 0.45);
  }

  .nav-links.is-open { transform: translateX(0); }

  .nav-links .nav-link {
    font-family: var(--font-display);
    font-size: clamp(1.55rem, 4.6vw, 2.05rem);
    letter-spacing: -0.022em;
    padding-block: 0.45rem;
    line-height: 1.15;
  }

  .nav-links .nav-link::after {
    height: 1px;
    transform-origin: left;
  }

  /* QA fix: the drawer panel is always light (ivory gradient), so its
     links must stay dark even while the header is still in its over-hero
     "dark context" state (pre-scroll). Without this, nav text rendered
     ivory-on-ivory and was invisible until the page was scrolled. */
  .site-header.is-dark-context .nav-links .nav-link { color: var(--color-charcoal); }
  .site-header.is-dark-context .nav-links .nav-link.is-active { color: var(--color-gold-deep); }

  .nav-toggle { display: flex; z-index: 60; }
  .nav-toggle.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .nav-toggle.is-open span:nth-child(2) { opacity: 0; }
  .nav-toggle.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

  /* Open drawer sits on ivory; keep the close icon charcoal even over the hero. */
  .nav-toggle.is-open span,
  .site-header.is-dark-context .nav-toggle.is-open span {
    background: var(--color-charcoal);
  }

  .nav-links .btn-book {
    display: inline-flex;
    margin-top: var(--space-md);
    padding: 0.95rem 1.6rem;
    align-self: stretch;
    justify-content: center;
  }

  .room-grid { grid-template-columns: 1fr; }
  .amenity-grid,
  .amenity-grid1 { grid-template-columns: repeat(2, 1fr); }
  .value-grid { grid-template-columns: repeat(2, 1fr); }

  .feature-room {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
  .feature-room.reverse .feature-media,
  .feature-room.reverse .feature-copy { order: initial; }
  .feature-room:not(:last-child) { margin-bottom: var(--space-xl); }

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

  .masonry { columns: 2 180px; }

  .gallery-spotlight .media {
    aspect-ratio: 16 / 10;
    min-height: 240px;
  }

  .gallery-mosaic {
    grid-template-columns: repeat(6, 1fr);
  }

  .gallery-cell--hero,
  .gallery-cell--wide { grid-column: span 6; }
  .gallery-cell--side,
  .gallery-cell--pair,
  .gallery-cell--tall,
  .gallery-cell--std { grid-column: span 3; }
  .gallery-cell--tall { grid-row: span 1; }

  .gallery-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .location-layout { grid-template-columns: 1fr; }

  .contact-layout { grid-template-columns: 1fr; }

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

  .rd-gallery {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    height: auto;
  }
  .rd-gallery .media { aspect-ratio: 4/3; }
  .rd-gallery .media:first-child { grid-row: auto; }

  .rd-facts { grid-template-columns: repeat(2, 1fr); }
  .rd-amenities { grid-template-columns: 1fr; }

  .lightbox-nav.prev { left: 0; }
  .lightbox-nav.next { right: 0; }
  .lightbox-close { top: -52px; }

  .testimonial-slider {
    padding: 2.4rem 1.35rem 2.2rem;
    border-radius: var(--radius-xl);
  }

  /* QA fix: fixed height:100vh + overflow:hidden was clipping the hero on
     narrow screens once the headline wrapped and the buttons stacked,
     causing the scroll cue and photo label to overlap "Book Now". Letting
     the box grow past 100vh when content needs it keeps everything on
     screen without changing the hero's cinematic full-bleed feel on
     viewports where content already fits. */
  .hero { height: auto; min-height: 100vh; min-height: 100dvh; }

  .hero + .section {
    margin-top: -1.5rem;
    padding-top: calc(var(--section-pad) + 1.5rem);
  }

  .page-header + .section {
    margin-top: -1rem;
    padding-top: calc(var(--section-pad) + 1rem);
  }
}

@media (max-width: 560px) {
  .amenity-grid,
  .amenity-grid1 { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
  .value-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-md); }
  .footer-col:nth-child(4) { grid-column: auto; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }

  .hero h1 { max-width: 100%; }
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row .btn { justify-content: center; }
  .hero-content { padding-bottom: 5rem; padding-top: 6rem; }
  .scroll-cue { display: none; }

  .masonry { columns: 1; }

  #gallery .masonry {
    columns: 1;
    max-width: 420px;
  }

  .gallery-mosaic {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }

  .gallery-cell--hero,
  .gallery-cell--side,
  .gallery-cell--wide,
  .gallery-cell--pair,
  .gallery-cell--tall,
  .gallery-cell--std {
    grid-column: span 1;
    grid-row: span 1;
  }

  .gallery-spotlight .media {
    aspect-ratio: 4 / 5;
    min-height: 280px;
  }

  .gallery-mosaic .masonry-item .media {
    min-height: 220px;
  }

  .rd-facts { grid-template-columns: 1fr 1fr; }

  .room-card-actions { flex-direction: column; }

  .page-header { padding-top: 7rem; }

  .amenity-item { padding: var(--space-md) 0.75rem; }

  .feature-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
  }

  .room-card {
    padding: 0.55rem 0.55rem 0;
  }

  .contact-info,
  .contact-form-wrap {
    padding: var(--space-lg) var(--space-md);
  }

  .t-slide p.quote { max-width: none; }
}

@media (max-width: 390px) {
  .amenity-item span { font-size: 0.7rem; }
  .room-card-body { padding: 1.2rem 0.7rem 1.05rem; }
  .hero h1 { font-size: clamp(2.4rem, 12vw, 3.2rem); }

  .gallery-filters {
    gap: 0.35rem;
  }

  .filter-btn {
    padding: 0.55rem 0.85rem;
    font-size: 0.68rem;
  }
}

@media (max-width: 360px) {
  .container {
    padding-inline: 1rem;
  }

  .site-header .container {
    border-radius: 18px;
  }

  .btn {
    padding-inline: 1.5rem;
  }

  .hero-content {
    padding-bottom: 4.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-mosaic .masonry-item:hover,
  .gallery-spotlight:hover,
  .room-card:hover,
  #gallery .masonry-item:hover {
    transform: none;
  }
}

/* Comfortable touch targets on coarse pointers */
@media (pointer: coarse) {
  .btn, .nav-link, .filter-btn { min-height: 44px; }
  .footer-social a, .lightbox-close, .lightbox-nav { width: 46px; height: 46px; }
}