/* ==========================================================================
   HOTEL PRINCE VALLEY - RESPONSIVE STYLESHEET
   Carefully tuned breakpoints:
   - Desktop: > 1024px
   - Tablet / Medium Screen ("Not Desktop, Not Mobile"): 641px - 1024px
   - Mobile Phones: <= 640px
   - Extra Small Phones: <= 380px
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TABLET & MEDIUM SCREEN TYPE (641px - 1024px)
   Balanced 2-column luxury presentation — neither wide desktop nor cramped mobile
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) and (min-width: 641px) {
  .container {
    max-width: 960px;
    padding-left: 20px;
    padding-right: 20px;
  }

  /* Header & Navigation in Tablet Mode */
  .top-header {
    padding: 6px 0;
  }

  .top-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .top-header-contacts {
    gap: 1.25rem;
    font-size: 0.8rem;
  }

  .main-header-inner {
    height: 86px;
  }

  .brand-logo-img {
    height: 64px;
    max-width: 270px;
  }

  /* Compact Tablet Navigation */
  .main-nav {
    display: flex;
    gap: 1rem;
  }

  .nav-link {
    font-size: 0.85rem;
    padding: 4px 0;
  }

  .header-cta-btn {
    display: inline-flex;
    padding: 0.6rem 1.1rem;
    font-size: 0.825rem;
  }

  .mobile-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
  }

  /* Hero Slider in Tablet Mode */
  .hero-slider-section {
    height: clamp(560px, 78vh, 700px);
  }

  .page-hero {
    min-height: 380px;
    padding: 7rem 0 5.5rem 0;
  }

  .room-detail-hero {
    height: 480px;
  }

  .hero-content {
    max-width: 680px;
  }

  .hero-heading {
    font-size: clamp(2.1rem, 3.5vw, 2.7rem);
    line-height: 1.2;
    margin-bottom: 0.85rem;
  }

  .hero-desc {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
  }

  /* Welcome Section: Balanced 2 Columns */
  .welcome-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.25rem;
    align-items: center;
  }

  .highlights-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.85rem;
  }

  /* Features & Amenities: 2 Columns */
  .features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  /* Rooms Showcase: Balanced 2 Columns (Executive, Deluxe, Super Deluxe, Suite) */
  .rooms-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem;
    max-width: 100%;
    margin: 0 auto;
  }

  .room-card-image-wrap {
    height: 220px;
  }

  /* Featured Valley Suite Showcase */
  .featured-suite-inner {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 2rem;
    padding: 2.5rem 2rem;
  }

  .suite-gallery-preview-grid {
    grid-template-columns: 1.3fr 1fr;
    grid-template-rows: repeat(2, 130px);
  }

  /* In & Around Lansdowne Places: 2 Columns */
  .places-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    max-width: 100%;
  }

  .place-card-img-wrap {
    height: 200px;
  }

  /* Photo Gallery: 2 Columns */
  .gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }

  .gallery-item {
    height: 240px;
  }

  /* CTA Banner: Balanced Row */
  .cta-banner-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    gap: 2rem;
  }

  .cta-banner-content {
    max-width: 580px;
  }

  .cta-banner-buttons {
    display: flex;
    flex-shrink: 0;
    gap: 0.85rem;
  }

  /* Contact Section: 2 Columns */
  .contact-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 2.5rem;
  }

  .form-group-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }

  /* Room Detail Layout */
  .room-detail-layout {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 2.25rem;
  }

  .booking-enquiry-card {
    position: sticky;
    top: 90px;
  }

  /* Footer: 2x2 Balanced Grid */
  .footer-top-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
  }

  /* Floating CTA */
  .floating-actions-container {
    bottom: 20px;
    right: 20px;
    gap: 10px;
  }
}

/* Fallback for medium tablet screens where nav links wrap (768px - 890px) */
@media (max-width: 890px) and (min-width: 641px) {
  .main-nav {
    display: none;
  }

  .header-cta-btn {
    display: inline-flex;
    padding: 0.55rem 1rem;
    font-size: 0.8rem;
  }

  .mobile-menu-btn {
    display: flex;
  }
}

/* --------------------------------------------------------------------------
   2. MOBILE PHONES (<= 640px)
   Vertical single-column layout for small handheld screens
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .container {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Top Bar */
  .top-header {
    padding: 6px 0;
  }

  .top-header-inner {
    flex-direction: column;
    gap: 6px;
    text-align: center;
  }

  .top-header-contacts {
    justify-content: center;
    gap: 1rem;
    font-size: 0.775rem;
  }

  .top-contact-item span.label-prefix {
    display: none;
  }

  .top-header-actions {
    display: none;
  }

  /* Main Navigation */
  .main-header-inner {
    height: 78px;
  }

  .brand-logo-img {
    height: 58px;
    max-width: 245px;
  }

  .main-nav {
    display: none;
  }

  .header-cta-btn {
    display: none;
  }

  .header-call-btn {
    display: inline-flex;
    padding: 0.45rem 0.8rem;
    font-size: 0.8rem;
    gap: 0.35rem;
  }

  .mobile-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
  }

  /* Hero Slider */
  .hero-slider-section {
    height: clamp(520px, 85vh, 640px);
  }

  .page-hero {
    min-height: 340px;
    padding: 6rem 0 4.5rem 0;
  }

  .room-detail-hero {
    height: 400px;
  }

  .hero-heading {
    font-size: 1.85rem;
    line-height: 1.25;
  }

  .hero-desc {
    font-size: 0.925rem;
    margin-bottom: 1.35rem;
  }

  .hero-buttons {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 0.75rem;
  }

  .hero-buttons .btn {
    width: 100%;
  }

  .slider-arrow {
    width: 36px;
    height: 36px;
  }
  .slider-arrow-prev { left: 8px; }
  .slider-arrow-next { right: 8px; }

  /* Welcome Section */
  .welcome-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .welcome-accent-badge {
    position: static;
    margin-top: 1rem;
    display: inline-block;
  }

  .highlights-list {
    grid-template-columns: 1fr;
  }

  /* Grids Collapse to 1 Column on Phones */
  .features-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .rooms-grid {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin: 0 auto;
    gap: 1.75rem;
  }

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

  .room-card-actions .btn {
    width: 100%;
  }

  /* Featured Suite */
  .featured-suite-inner {
    grid-template-columns: 1fr;
    padding: 2rem 1.25rem;
    gap: 1.75rem;
  }

  .suite-specs-grid {
    grid-template-columns: 1fr;
  }

  .suite-gallery-preview-grid {
    grid-template-columns: 1fr;
    grid-template-rows: 200px 100px;
  }

  .suite-preview-img-main {
    grid-row: auto;
  }

  /* Places */
  .places-grid {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin: 0 auto;
    gap: 1.5rem;
  }

  /* Gallery */
  .gallery-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .gallery-item {
    height: 220px;
  }

  /* CTA Banner */
  .cta-banner-inner {
    flex-direction: column;
    text-align: center;
    gap: 1.5rem;
  }

  .cta-banner-buttons {
    flex-direction: column;
    width: 100%;
    gap: 0.75rem;
  }

  .cta-banner-buttons .btn {
    width: 100%;
  }

  /* Contact Form */
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

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

  .form-actions-row {
    flex-direction: column;
    width: 100%;
  }

  .form-actions-row .btn {
    width: 100%;
  }

  .contact-card {
    padding: 1.75rem 1.25rem;
  }

  /* Room Detail Page */
  .room-detail-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .booking-enquiry-card {
    position: static;
  }

  /* Footer */
  .footer-top-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  /* Floating Buttons */
  .floating-actions-container {
    bottom: 16px;
    right: 16px;
    gap: 8px;
  }

  .floating-whatsapp-btn span,
  .floating-call-btn span {
    display: none !important;
  }

  .floating-whatsapp-btn,
  .floating-call-btn {
    width: 48px;
    height: 48px;
    padding: 0;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
  }

  .floating-btn-icon {
    width: 22px;
    height: 22px;
  }

  .legal-content-wrap {
    padding: 2rem 1.25rem;
  }
}

/* --------------------------------------------------------------------------
   3. EXTRA SMALL PHONES (<= 380px)
   -------------------------------------------------------------------------- */
@media (max-width: 380px) {
  .brand-logo-img {
    height: 50px;
    max-width: 210px;
  }

  .hero-heading {
    font-size: 1.65rem;
  }
}