/* =========================
   Large Laptop
   ========================= */
@media (max-width: 1180px) {
  .hero-grid,
  .cta-shell,
  .story-grid,
  .contact-layout,
  .ratings-layout,
  .profile-layout {
    grid-template-columns: 1fr;
  }

  .booking-panel {
    max-width: 720px;
    margin-inline: auto;
  }

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* =========================
   Laptop / Tablet
   ========================= */
@media (max-width: 960px) {
  .section {
    padding: 5rem 0;
  }

  .section-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .site-nav {
    position: fixed;
    top: 5.5rem;
    left: 1rem;
    right: 1rem;
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
    padding: 1rem;
    border: 1px solid var(--clr-border);
    border-radius: 10px;
    background: var(--clr-surface);
    box-shadow: none;
    transform: translateY(-1rem);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 220ms ease, transform 220ms ease, visibility 220ms ease;
  }

  .site-nav.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }

  .nav-link,
  .nav-cta {
    width: 100%;
  }

  .nav-link {
    padding: 0.9rem 1rem;
    border-radius: 1rem;
  }

  .nav-link:hover,
  .nav-link.active {
    background: rgba(47, 61, 49, 0.05);
  }

  .nav-link::after {
    display: none;
  }

  .nav-cta {
    margin-left: 0;
    margin-top: 0.4rem;
  }

  .feature-grid,
  .room-grid,
  .pillar-grid,
  .team-grid,
  .contact-card-grid,
  .management-grid,
  .stats-grid,
  .amenity-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gallery-card,
  .gallery-wide,
  .gallery-tall {
    grid-column: span 6;
    grid-row: span 1;
    min-height: 18rem;
  }

  .hero {
    min-height: auto;
    padding-top: 8.5rem;
  }

  .hero-grid-single {
    min-height: auto;
  }

  .hero-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .timeline-item {
    grid-template-columns: 1fr;
  }

  .rating-row {
    grid-template-columns: 1fr;
    gap: 0.55rem;
  }

  .whatsapp-priority {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* =========================
   Tablet / Large Mobile
   ========================= */
@media (max-width: 720px) {
  .container {
    width: min(var(--container), calc(100% - 1.4rem));
  }

  .hero-actions,
  .cta-shell {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-metrics,
  .feature-grid,
  .room-grid,
  .pillar-grid,
  .team-grid,
  .contact-card-grid,
  .management-grid,
  .stats-grid,
  .amenity-grid,
  .info-grid,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gallery-card,
  .gallery-wide,
  .gallery-tall {
    grid-column: span 1;
    min-height: 16rem;
  }

  .story-grid,
  .contact-layout,
  .ratings-layout {
    gap: 1.5rem;
  }

  .about-media-grid {
    grid-template-columns: 1fr;
  }

  .about-media-card-tall {
    grid-row: span 1;
  }

  .profile-spotlight {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .booking-panel,
  .contact-form,
  .testimonial-slider,
  .profile-panel,
  .cta-shell {
    padding: 1.5rem;
  }

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

  .field-full {
    grid-column: auto;
  }

  .subhero {
    min-height: 60vh;
    padding-bottom: 3.5rem;
  }

  .scroll-indicator {
    display: none;
  }
}

/* =========================
   Small Mobile
   ========================= */
@media (max-width: 540px) {
  .hero {
    padding: 7.8rem 0 3.5rem;
  }

  .booking-panel {
    padding: 1.35rem;
  }

  .preview-row {
    flex-direction: column;
  }

  .preview-row strong {
    max-width: none;
    text-align: left;
  }

  .slider-controls {
    flex-wrap: wrap;
    justify-content: center;
  }

  .map-frame,
  .map-frame iframe {
    min-height: 22rem;
  }

  .back-to-top {
    right: 1rem;
    bottom: 1rem;
  }

  .floating-whatsapp {
    left: 1rem;
    bottom: 1rem;
    padding: 0.85rem 1rem;
  }
}