/* ============================================================
   HOTEL KAILASHA INN — RESPONSIVE DESIGN
   Mobile-First Breakpoints
   ============================================================ */

/* ============================================================
   MOBILE: Up to 767px
   ============================================================ */
@media (max-width: 767px) {

  /* --- Layout & Viewport Overflow Constraints --- */
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Force single column layouts on mobile to override inline grid minmax styling */
  .attractions-cards-grid,
  .seo-checklist-cards-container,
  .rooms-grid,
  .room-card,
  .menu-grid,
  .blog-grid,
  .blog-layout-split,
  .cuisine-grid {
    grid-template-columns: 1fr !important;
  }

  /* Prevent table overflow */
  .seo-distance-table {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Wrap long text and emails in footer to prevent container stretch */
  .footer-contact-item p,
  .footer-contact-item a,
  .footer-bottom p {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }
  
  .footer-contact-item a[href^="mailto:"] {
    word-break: break-all !important;
  }

  /* --- Header --- */
  .nav-links,
  .header-actions .header-phone,
  .header-actions .header-book-btn {
    display: none;
  }

  .menu-toggle {
    display: flex;
  }

  .site-header {
    padding: 14px 0;
  }

  .site-header.scrolled {
    padding: 10px 0;
  }

  .header-logo .logo-icon {
    width: 38px;
    height: 38px;
  }

  .header-logo .logo-icon svg {
    width: 38px;
    height: 38px;
  }

  .logo-text .hotel-name {
    font-size: 1rem;
  }

  .logo-text .hotel-tagline {
    font-size: 0.65rem;
  }

  .logo-img {
    height: 40px;
  }

  /* --- Hero --- */
  .hero {
    height: auto;
    min-height: 72vh;
    min-height: 72svh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 100px; /* Push below header logo */
    padding-bottom: 30px;
  }

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

  .hero-overline {
    margin-bottom: var(--space-md);
  }

  .hero-title {
    font-size: clamp(1.6rem, 6vw, 2.2rem);
    margin-bottom: var(--space-md);
  }

  .hero-title br {
    display: none;
  }

  .hero-subtitle {
    font-size: 0.95rem;
    margin-bottom: var(--space-lg);
    line-height: 1.5;
  }

  .hero-buttons {
    flex-direction: column;
    width: 100%;
    gap: var(--space-md);
    margin-bottom: 0;
  }

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

  .scroll-indicator {
    display: none;
  }

  /* --- Booking Widget --- */
  .booking-widget {
    margin-top: -20px;
    padding: 0 var(--space-sm);
  }

  .booking-widget-inner {
    display: grid !important;
    grid-template-columns: 1fr;
    padding: var(--space-md);
    gap: var(--space-md);
  }

  .booking-field {
    width: 100%;
    gap: 4px;
  }

  .booking-field label {
    font-size: 0.7rem;
    margin-bottom: 2px;
    gap: 4px;
  }

  .booking-field label svg {
    width: 12px;
    height: 12px;
  }

  .booking-field input,
  .booking-field select {
    padding: 10px 12px;
    font-size: 0.85rem;
  }

  .booking-field select {
    background-position: right 8px center;
    padding-right: 28px;
  }

  .booking-submit {
    grid-column: span 1;
    width: 100%;
    margin-top: var(--space-sm);
  }

  .booking-submit .btn {
    width: 100%;
    padding: 12px 24px;
  }

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

  .about-image img {
    height: 350px;
  }

  .about-image-accent {
    display: none;
  }

  .about-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
  }

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

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

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

  .room-card-amenities {
    gap: var(--space-sm);
  }

  .room-card-meta {
    flex-wrap: wrap;
  }

  /* --- Restaurant --- */
  .cuisine-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
  }

  .cuisine-card {
    padding: var(--space-xl) var(--space-md);
  }

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

  .attraction-card {
    height: 280px;
  }

  .attraction-card p {
    opacity: 1;
    transform: translateY(0);
  }

  /* --- Testimonials --- */
  .testimonial-card {
    padding: var(--space-xl);
  }

  .testimonial-text {
    font-size: 1.05rem;
  }

  .testimonial-card::before {
    font-size: 4rem;
    top: 5px;
    left: 15px;
  }

  /* --- Gallery --- */
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
  }

  .gallery-item.wide {
    grid-column: span 2;
  }

  .gallery-item.tall {
    grid-row: span 1;
  }

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

  .gallery-filter-btn {
    padding: 6px 16px;
    font-size: var(--fs-overline);
  }

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

  .enquiry-info {
    padding-right: 0;
  }

  .form-row {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .enquiry-form {
    padding: var(--space-xl);
  }

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

  .contact-map {
    min-height: 300px;
  }

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

  /* --- FAQ --- */
  .faq-question {
    padding: var(--space-md) var(--space-lg);
  }

  .faq-question h4 {
    font-size: var(--fs-body-sm);
  }

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

  .footer-bottom {
    flex-direction: column;
    gap: var(--space-md);
    text-align: center;
  }

  .footer-bottom-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-md);
  }

  /* --- Floating Elements --- */
  .whatsapp-float,
  .back-to-top {
    display: none !important;
  }

  /* --- Mobile Sticky Bar --- */
  .mobile-sticky-bar {
    display: block !important;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    background: rgba(31, 31, 31, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid rgba(201, 169, 110, 0.3);
    padding: 10px 12px;
  }

  .mobile-sticky-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    max-width: 100%;
  }

  .mobile-sticky-call,
  .mobile-sticky-whatsapp,
  .mobile-sticky-book {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 4px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    flex: 1;
    color: var(--white);
    transition: background-color var(--transition-fast);
  }

  .mobile-sticky-call svg,
  .mobile-sticky-whatsapp svg,
  .mobile-sticky-book svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
  }

  .mobile-sticky-call {
    background: transparent;
    border: 1px solid var(--gold);
    color: var(--gold);
  }

  .mobile-sticky-whatsapp {
    background: #25D366;
    border: 1px solid #25D366;
  }

  .mobile-sticky-book {
    background: var(--gold);
    border: 1px solid var(--gold);
  }

  /* --- Section Spacing --- */
  section {
    padding: clamp(3rem, 6vw, 5rem) 0;
  }

  .section-header {
    margin-bottom: var(--space-2xl);
  }

  /* --- Lightbox Mobile --- */
  .lightbox-image {
    max-width: 95%;
    max-height: 75vh;
  }

  .lightbox-nav {
    width: 40px;
    height: 40px;
  }

  .lightbox-nav.prev { left: 8px; }
  .lightbox-nav.next { right: 8px; }
}

/* ============================================================
   SMALL MOBILE: Up to 400px
   ============================================================ */
@media (max-width: 400px) {
  .hero-title {
    font-size: 1.6rem;
  }

  .hero-overline {
    font-size: 0.65rem;
  }

  .hero-overline::before,
  .hero-overline::after {
    width: 20px;
  }

  .about-stats {
    grid-template-columns: repeat(2, 1fr);
  }

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

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

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

  .gallery-item.wide {
    grid-column: span 1;
  }
}

/* ============================================================
   TABLET: 768px — 1023px
   ============================================================ */
@media (min-width: 768px) and (max-width: 1023px) {

  /* --- Header --- */
  .nav-links {
    display: none;
  }

  .menu-toggle {
    display: flex;
  }

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

  /* --- Hero --- */
  .hero-title {
    font-size: clamp(2rem, 5vw, 3rem);
  }

  /* --- Booking Widget --- */
  .booking-widget-inner {
    flex-wrap: wrap;
    padding: var(--space-xl);
  }

  .booking-field {
    flex: 1 1 calc(50% - var(--space-lg));
    min-width: 180px;
  }

  .booking-submit {
    flex: 1 1 100%;
  }

  .booking-submit .btn {
    width: 100%;
  }

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

  .about-image img {
    height: 400px;
  }

  .about-image-accent {
    display: none;
  }

  /* --- Rooms --- */
  .rooms-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl);
  }

  /* --- Restaurant --- */
  .cuisine-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* --- Attractions --- */
  .attractions-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* --- Gallery --- */
  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* --- Blog --- */
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

  /* --- Enquiry --- */
  .enquiry-grid {
    grid-template-columns: 1fr;
  }

  .enquiry-info {
    padding-right: 0;
  }
}

/* ============================================================
   LAPTOP: 1024px — 1279px
   ============================================================ */
@media (min-width: 1024px) and (max-width: 1279px) {

  .nav-links {
    gap: var(--space-lg);
  }

  .nav-links a {
    font-size: 0.8rem;
  }

  .header-phone {
    font-size: var(--fs-caption);
  }

  .rooms-grid {
    gap: var(--space-xl);
  }

  .room-card-image {
    height: 240px;
  }

  .cuisine-grid {
    gap: var(--space-md);
  }

  .cuisine-card {
    padding: var(--space-xl) var(--space-md);
  }

  .attractions-grid {
    gap: var(--space-md);
  }

  .footer-grid {
    gap: var(--space-xl);
  }
}

/* ============================================================
   DESKTOP: 1280px+
   ============================================================ */
@media (min-width: 1280px) {
  .hero-title {
    font-size: 4rem;
  }
}

/* ============================================================
   WIDE: 1440px+
   ============================================================ */
@media (min-width: 1440px) {
  .hero-title {
    font-size: 4.5rem;
  }

  .container-wide {
    max-width: 1440px;
  }
}

/* ============================================================
   PRINT STYLES
   ============================================================ */
@media print {
  .site-header,
  .whatsapp-float,
  .back-to-top,
  .mobile-sticky-bar,
  .booking-widget,
  .scroll-indicator {
    display: none !important;
  }

  body {
    color: #000;
    background: #fff;
    font-size: 12pt;
  }

  section {
    page-break-inside: avoid;
  }

  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #666;
  }
}

/* ============================================================
   REDUCED MOTION PREFERENCES
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .hero-bg img {
    transition: none;
    transform: none;
  }

  .whatsapp-float-btn {
    animation: none;
  }
}

/* ============================================================
   HIGH CONTRAST MODE
   ============================================================ */
@media (prefers-contrast: high) {
  :root {
    --gold: #B8952A;
    --charcoal: #000000;
    --ivory: #FFFFFF;
  }

  .nav-links a,
  .footer-col ul li a {
    text-decoration: underline;
  }
}

/* ============================================================
   LANDSCAPE MOBILE
   ============================================================ */
@media (max-width: 900px) and (orientation: landscape) {
  .hero {
    min-height: 100vh;
  }

  .hero-title {
    font-size: 2rem;
  }

  .hero-subtitle {
    font-size: 0.95rem;
  }

  .hero-buttons {
    flex-direction: row;
    margin-bottom: var(--space-xl);
  }

  .booking-widget {
    margin-top: -20px;
  }
}