/* =========================================================
   RESPONSIVE — mobile-first breakpoints
   ========================================================= */

/* ---- TABLET (768px+) ---- */
@media (max-width: 1023px) {
  :root {
    --nav-height: 72px;
  }

  .site-nav {
    padding: 0 var(--space-xl);
  }

  .nav-links {
    display: none;
  }

  .hamburger {
    display: flex;
  }

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

  .hero-content {
    padding: 0 var(--space-xl) var(--space-3xl);
  }

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

  /* Dining rows */
  .dining-row {
    grid-template-columns: 1fr;
  }

  .dining-row:nth-child(even) .dining-image { order: 0; }
  .dining-row:nth-child(even) .dining-info { order: 0; }

  .dining-image {
    height: 360px;
  }

  .dining-info {
    padding: var(--space-2xl) var(--space-xl);
  }

  /* Room rows */
  .room-row {
    grid-template-columns: 1fr;
  }

  .room-row:nth-child(even) .room-row-image { order: 0; }
  .room-row:nth-child(even) .room-row-info { order: 0; }

  .room-row-image {
    height: 320px;
  }

  .room-row-info {
    padding: var(--space-2xl) var(--space-xl);
  }

  /* Experience sections */
  .exp-section {
    grid-template-columns: 1fr;
  }

  .exp-section:nth-child(even) .exp-section-img { order: 0; }
  .exp-section:nth-child(even) .exp-section-body { order: 0; }

  .exp-section-img {
    height: 340px;
  }

  .exp-section-body {
    padding: var(--space-2xl) var(--space-xl);
  }

  /* Grid adjustments */
  .grid-3, .grid-4 {
    grid-template-columns: 1fr 1fr;
  }

  .grid-2x2 {
    grid-template-rows: 320px 320px;
  }

  /* Room detail */
  .room-detail-header {
    grid-template-columns: 1fr;
  }

  .room-price-block {
    text-align: left;
  }

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

  /* Room gallery */
  .room-gallery-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Booking layout */
  .booking-layout {
    grid-template-columns: 1fr;
  }

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

  /* Team */
  .team-grid {
    grid-template-columns: 1fr 1fr;
  }

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

  /* Sustainability */
  .sustainability-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---- MOBILE (max 767px) ---- */
@media (max-width: 767px) {
  .container, .container-narrow, .container-mid {
    padding: 0 var(--space-md);
  }

  /* Nav */
  .site-nav {
    padding: 0 var(--space-md);
  }

  /* Hero */
  .hero {
    height: 80vh;
    align-items: flex-end;
  }

  .hero-content {
    padding: 0 var(--space-md) var(--space-2xl);
  }

  .hero-content p {
    font-size: 16px;
  }

  /* Page hero */
  .page-hero {
    height: 42vh;
    min-height: 280px;
  }

  /* Sections */
  .section {
    padding: var(--space-3xl) 0;
  }

  .section-lg {
    padding: var(--space-4xl) 0;
  }

  /* Exp grid */
  .exp-grid, .grid-2x2 {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .exp-card {
    height: 320px;
  }

  /* Grid */
  .grid-2, .grid-3, .grid-4 {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  /* Dining */
  .dining-image {
    height: 280px;
  }

  .dining-info {
    padding: var(--space-xl) var(--space-md);
  }

  .dining-meta {
    flex-wrap: wrap;
    gap: var(--space-sm);
  }

  /* Rooms */
  .room-row-image {
    height: 260px;
  }

  .room-row-info {
    padding: var(--space-xl) var(--space-md);
  }

  /* Room detail */
  .room-detail-hero {
    height: 50vh;
  }

  .room-detail-content {
    padding: var(--space-xl) var(--space-md);
  }

  .room-specs-row {
    flex-wrap: wrap;
    gap: var(--space-md);
  }

  .room-gallery-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Experiences */
  .exp-section-img {
    height: 260px;
  }

  .exp-section-body {
    padding: var(--space-xl) var(--space-md);
  }

  /* Sustainability */
  .sustainability-grid {
    grid-template-columns: 1fr;
  }

  /* Gallery */
  .gallery-grid {
    columns: 1;
  }

  .gallery-filters {
    gap: var(--space-xs);
  }

  .filter-btn {
    padding: 8px 16px;
    font-size: 11px;
  }

  /* Booking */
  .booking-layout {
    padding: var(--space-xl) 0;
  }

  .dates-summary {
    grid-template-columns: 1fr auto 1fr;
    padding: var(--space-md);
  }

  .date-box-value {
    font-size: 16px;
  }

  .calendar-cell {
    height: 42px;
    font-size: 13px;
  }

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

  .site-footer {
    padding: var(--space-3xl) var(--space-md) var(--space-xl);
  }

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

  /* Lightbox nav */
  .lightbox-prev { left: 12px; }
  .lightbox-next { right: 12px; }

  /* Buttons */
  .btn-primary, .btn-outline {
    width: 100%;
    text-align: center;
  }

  /* CTA Banner */
  .cta-banner {
    padding: var(--space-3xl) var(--space-md);
  }

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

  .team-card-img {
    height: 180px;
  }

  /* Contact */
  .contact-info-item {
    flex-direction: column;
    gap: var(--space-sm);
  }

  /* Nav logo smaller */
  .nav-logo {
    font-size: 16px;
  }

  /* Hero CTA button full width  */
  .hero-cta {
    font-size: 12px;
  }

  /* Room rows on mobile */
  .room-row {
    min-height: auto;
  }
}

/* ---- VERY SMALL (360px and below) ---- */
@media (max-width: 380px) {
  h1 { font-size: 32px; }
  h2 { font-size: 26px; }

  .hero-content h1 {
    font-size: 34px;
  }

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

/* ---- PRINT ---- */
@media print {
  .site-nav,
  .site-footer,
  .hero,
  .booking-layout,
  .gallery-filters {
    display: none !important;
  }

  .booking-confirmation {
    display: block !important;
    border: none;
    box-shadow: none;
  }
}