/* Global responsive defaults for the whole site */
/* Box sizing and resets */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }

/* Media defaults */
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
/* Prevent images from exceeding containers with fixed heights */
.fit-cover img { object-fit: cover; width: 100%; height: 100%; }

/* Typography scaling for small screens */
@media (max-width: 768px) {
  h1 { font-size: clamp(1.8rem, 6vw, 3rem); }
  h2 { font-size: clamp(1.4rem, 5vw, 2.2rem); }
  h3 { font-size: clamp(1.2rem, 4.5vw, 1.8rem); }
}

/* Navigation usability on mobile when sites use hamburger toggles */
@media (max-width: 1024px) {
  nav ul:not(.active) {
    /* Many pages rely on toggling .active; ensure hidden by default on tablet/mobile */
    display: none;
  }
  nav ul.active {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
}

/* Parallax performance: disable fixed attachment on mobile/tablet */
@media (max-width: 1024px) {
  .parallax { background-attachment: scroll !important; }
}

/* Smooth responsive tables/galleries overflow */
.responsive-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Avoid horizontal overflow from third-party embeds */
.instagram-media, blockquote.instagram-media {
  max-width: 100% !important;
  width: 100% !important;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* Utility: container padding on small screens */
@media (max-width: 768px) {
  .container { padding-left: 1rem !important; padding-right: 1rem !important; }
}

/* Language flags tap target */
.language-selector .lang-btn { touch-action: manipulation; }

/* Default faded flags; brighten the active/current language */
.language-selector .lang-btn {
  opacity: 0.65;
  filter: grayscale(30%) brightness(0.95);
  transition: opacity 0.25s ease, filter 0.25s ease, transform 0.25s ease;
}

.language-selector .lang-btn.active {
  opacity: 1;
  filter: none;
}

/* Avoid hero titles overflowing on small screens */
.no-wrap-on-desktop { white-space: normal; }

/* Footer links spacing on mobile */
@media (max-width: 768px) {
  footer .social-links { justify-content: center; }
  footer { text-align: center; }
  .footer-enhanced { text-align: center; }
  .footer-content { text-align: center; }
  .footer-main { 
    grid-template-columns: 1fr; 
    text-align: center; 
    justify-items: center; 
  }
  .footer-section { 
    align-items: center; 
    width: 100%; 
    max-width: 400px; 
  }
  .footer-info li { 
    justify-content: center; 
    text-align: center; 
  }
  .opening-hours-footer li { 
    justify-content: center; 
    text-align: center; 
  }
  .social-icons { justify-content: center; }
  .footer-bottom { 
    text-align: center; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
  }
  .footer-divider { margin: 0 auto 2rem; }
  .copyright { text-align: center; }
  /* Hide Instagram section on mobile */
  .instagram-section { display: none !important; }
}

/* Image loading placeholders (optional subtle fade-in) */
.img-fade { opacity: 0; transition: opacity 0.3s ease; }
.img-fade.is-loaded { opacity: 1; }

/* Gallery/grid fallbacks on small screens */
@media (max-width: 768px) {
  .room-gallery { grid-template-columns: 1fr !important; }
  .gallery-grid { grid-template-columns: 1fr !important; }
  .gallery-squares { grid-template-columns: 1fr !important; }
  .luxury-gallery { grid-template-columns: 1fr !important; }
  /* For flex-based rooms grids */
  .rooms-grid {
    flex-wrap: wrap !important;
    width: 100% !important;
    margin: 0 !important;
    left: 0 !important;
    right: 0 !important;
  }
}

/* Reusable site credit style for all footers */
.site-credit {
  margin-top: 0.75rem;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.75);
}

.site-credit a {
  color: inherit;
  text-decoration: none;
}

.site-credit a:hover {
  text-decoration: underline;
}

.site-credit a .credit-label {
  color: #ffffff;
}

.site-credit a .credit-name {
  color: var(--gold, #b08d57);
}

/* Mobile Room Carousel */
@media (max-width: 1024px) {
    .rooms-container {
        height: 100vh;
        padding-top: var(--header-height);
        display: block;
        overflow-x: scroll;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        scroll-behavior: smooth;
    }
    
    .rooms-container::-webkit-scrollbar {
        display: none;
    }
    
    .rooms-images-layer,
    .rooms-text-layer {
        position: relative;
        display: flex;
        flex-direction: row;
        width: 200vw;
        height: 100%;
        min-height: auto;
    }
    
    .room-image-panel,
    .room-text-panel {
        width: 100vw;
        min-height: 100%;
        scroll-snap-align: start;
        scroll-snap-stop: always;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        padding: 2rem 1.5rem;
        pointer-events: auto;
    }
    
    .slider-divider {
        display: none;
    }
    
    /* Scroll indicator dots */
    .mobile-scroll-dots {
        display: flex !important;
        position: fixed;
        bottom: 2rem;
        left: 50%;
        transform: translateX(-50%);
        gap: 0.8rem;
        z-index: 200;
        padding: 0.5rem 1rem;
        background: rgba(0,0,0,0.3);
        backdrop-filter: blur(10px);
        border-radius: 20px;
    }
    
    .scroll-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: rgba(176, 141, 87, 0.3);
        transition: all 0.3s ease;
        cursor: pointer;
        border: none;
        padding: 0;
    }
    
    .scroll-dot.active {
        background: var(--gold);
        width: 30px;
        border-radius: 5px;
    }
}

/* Tablet specific optimizations */
@media (min-width: 768px) and (max-width: 1024px) {
    .room-text-panel {
        padding: 3rem 2rem;
    }
    
    .room-preview {
        max-width: 700px;
    }
    
    .room-preview h2 {
        font-size: 3.5rem;
    }
    
    .mobile-carousel {
        height: 55vh !important;
    }
    
    .room-image-info h2 {
        font-size: 2.5rem;
    }
}

@media (max-width: 768px) {
    .hero-content h1 { 
        font-size: 2.5rem; 
        letter-spacing: 4px;
    }
    
    .hero-tagline {
        font-size: 1.2rem;
    }
    
    .room-preview h2 { 
        font-size: 2rem; 
    }
    
    .room-text-panel { 
        padding: 1.5rem 1rem; 
    }
    
    .room-number-large { 
        font-size: 6rem;
        top: -2rem;
        right: -1rem;
    }
    
    .continuity-element { 
        display: none; 
    }
    
    /* Mobile Gallery Carousel */
    .room-image-panel {
        display: flex;
        flex-direction: column;
        padding: 1.5rem 1rem;
        gap: 15px;
    }
    
    .mobile-carousel {
        position: relative;
        width: 100%;
        height: 45vh;
        overflow: hidden;
        border-radius: 15px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    }
    
    .carousel-track {
        display: flex;
        height: 100%;
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .carousel-slide {
        min-width: 100%;
        height: 100%;
        position: relative;
    }
    
    .carousel-slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .carousel-dots {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-top: 12px;
    }
    
    .carousel-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgba(176, 141, 87, 0.3);
        transition: all 0.3s ease;
        cursor: pointer;
        border: none;
        padding: 0;
        min-width: 8px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .carousel-dot::before {
        content: '';
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgba(176, 141, 87, 0.3);
        transition: all 0.3s ease;
    }
    
    .carousel-dot.active::before {
        background: var(--gold);
        width: 24px;
        border-radius: 4px;
    }
    
    .room-image-panel .gallery-image {
        display: none;
    }
    
    .room-preview {
        order: 2;
    }
    
    .mobile-carousel {
        order: 1;
    }
    
    .carousel-dots {
        order: 1.5;
    }
    
    .room-preview p {
        font-size: 0.95rem;
        line-height: 1.6;
    }
    
    .room-preview .room-features {
        gap: 1rem;
        margin-bottom: 1.5rem;
    }
    
    .room-preview .feature {
        gap: 0.6rem;
    }
    
    .room-preview .feature i {
        font-size: 1.1rem;
    }
    
    .room-preview .feature span {
        font-size: 0.85rem;
    }
    
    .room-preview .room-price {
        font-size: 1.8rem;
        margin-bottom: 1.5rem;
    }
    
    .room-preview .reserve-btn {
        padding: 0.9rem 2rem;
        font-size: 0.85rem;
    }
}


/* Language selector flags sizing */
.language-selector img { width: 22px; height: auto; display: inline-block; vertical-align: middle; }
.language-selector { display: flex; align-items: center; gap: 10px; }
.language-selector a { display: inline-flex; align-items: center; }