/**
 * Aurelia Grand Resort - Responsive Breakpoints & Device Adaptations
 * 320px, 375px, 425px, 768px, 992px, 1200px, 1440px, 1920px
 */

/* ==========================================================================
   Mobile-First Refinements (<= 768px)
   ========================================================================== */
@media (max-width: 767.98px) {
  .hero-section {
    padding: 6rem 1rem 8rem 1rem;
    min-height: 82vh;
  }

  .booking-search-wrapper {
    margin-top: -3.5rem;
  }

  .booking-search-card {
    padding: 1.25rem;
  }

  .booking-search-card .row {
    row-gap: 0.75rem;
  }

  .welcome-section {
    padding: 4.5rem 0 3rem 0;
  }

  .welcome-image-frame {
    margin-top: 2rem;
  }

  .welcome-image-frame img {
    height: 320px;
  }

  .stat-grid {
    margin-top: 2rem;
    row-gap: 1.5rem;
  }

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

  .experience-card {
    height: 320px;
  }

  .mobile-sticky-book-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  body {
    padding-bottom: 60px; /* Space for sticky bar */
  }

  .floating-whatsapp-btn {
    bottom: 74px;
    right: 16px;
    width: 46px;
    height: 46px;
    font-size: 1.5rem;
  }

  .back-to-top-btn {
    bottom: 130px;
    right: 16px;
    width: 40px;
    height: 40px;
  }

  .newsletter-form {
    flex-direction: column;
  }

  .footer-bottom-bar {
    text-align: center;
    justify-content: center;
  }

  .aurelia-header .navbar-collapse {
    background-color: #FFFFFF;
    border-top: 1px solid var(--color-border-subtle);
    padding: 1rem;
    margin-top: 0.75rem;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
  }

  .aurelia-nav .nav-link {
    padding: 0.75rem 0 !important;
  }

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

/* ==========================================================================
   Small Mobile Extra Safety (<= 375px)
   ========================================================================== */
@media (max-width: 375px) {
  .hero-title {
    font-size: 2.25rem;
  }

  .btn-luxury-gold,
  .btn-luxury-outline,
  .btn-luxury-outline-light {
    padding: 0.75rem 1.25rem;
    font-size: 0.78rem;
    width: 100%;
  }

  .brand-title {
    font-size: 1.25rem;
  }

  .stat-number {
    font-size: 1.8rem;
  }
}

/* ==========================================================================
   Tablet Devices (768px to 991.98px)
   ========================================================================== */
@media (min-width: 768px) and (max-width: 991.98px) {
  .hero-section {
    min-height: 85vh;
    padding: 7rem 1.5rem 10rem 1.5rem;
  }

  .booking-search-wrapper {
    margin-top: -4.5rem;
  }

  .booking-search-card {
    padding: 1.5rem;
  }

  .welcome-image-frame img {
    height: 380px;
  }
}

/* ==========================================================================
   Large Desktop & Wide Screens (>= 1200px and 1440px+)
   ========================================================================== */
@media (min-width: 1200px) {
  .container {
    max-width: 1180px;
  }
}

@media (min-width: 1440px) {
  .container {
    max-width: 1320px;
  }

  .hero-section {
    min-height: 92vh;
  }

  .room-image-wrap {
    height: 300px;
  }
}

@media (min-width: 1920px) {
  .container {
    max-width: 1540px;
  }
}