/* ==========================================================================
   SOVN Hotel - Mobile Styles
   ========================================================================== */

/* Tablet */
@media screen and (max-width: 768px) {
  .hero-buttons {
    flex-direction: column;
    align-items: center;
  }
  
  .hero-buttons .button {
    width: 100%;
    max-width: 300px;
  }
  
  .language-switcher {
    top: 0.5rem;
    right: 0.5rem;
  }
  
  .contact-info {
    text-align: center;
  }
}

/* Mobile */
@media screen and (max-width: 480px) {
  :root {
    --section-padding: 3rem 0;
  }

  /* Overlay tiles row: stack on small screens */
  .overlay-tiles-row {
    grid-template-columns: 1fr;
  }

  /* Center section headers on mobile to match experience section */
  .rooms-header,
  .has-text-left {
    text-align: center !important;
  }

  /* Room individual header — center, tighten spacing, smaller subtitle */
  .room-header-section {
    padding-top: 2rem !important;
    padding-bottom: 0.5rem !important;
    text-align: center !important;
  }

  .room-header-section .title {
    font-size: 1.6rem !important;
    margin-bottom: 0.25rem !important;
  }

  .room-header-section .subtitle {
    font-size: 0.9rem !important;
    font-weight: 400 !important;
    opacity: 0.6 !important;
    margin-bottom: 0 !important;
    line-height: 1.4 !important;
  }

  /* Section subtitles (e.g. "Where luxury meets...") — more presence */
  .section .subtitle,
  .sovn-experience-section .subtitle {
    font-size: 1.3rem !important;
    line-height: 1.3 !important;
    font-weight: 500 !important;
    opacity: 0.9;
    margin-top: 0.5rem;
  }

  /* Body / content text — tighter line-height */
  .content p,
  .experience-content p {
    line-height: 1.55 !important;
    font-size: 0.975rem !important;
  }

  /* Experience row titles (e.g. "Breathtaking Views") */
  .experience-content h3.title {
    font-size: 1.5rem !important;
    line-height: 1.25 !important;
    margin-bottom: 0.5rem !important;
  }

  .hero-content {
    padding: 1rem;
  }
  
  .hero-content .title {
    margin-bottom: 0.5rem;
  }
  
  .hero-content .subtitle {
    margin-bottom: 1.5rem;
  }
  /* Fullscreen overlay on mobile */
  .overlay-menu {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: hidden;
  }

  /* Hide theme toggle from navbar on mobile (mute stays visible) */
  .navbar-right .navbar-theme-toggle {
    display: none !important;
  }

  /* Burger → X animation */
  .burger-menu.is-active span {
    background: #fff !important;
  }

  .burger-menu.is-active span:nth-child(1) {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
  }

  .burger-menu.is-active span:nth-child(2) {
    opacity: 0;
  }

  .burger-menu.is-active span:nth-child(3) {
    bottom: auto;
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
  }

  /* Hide the separate X close button — burger handles it */
  .overlay-menu .close-menu {
    display: none !important;
  }

  /* Navbar must sit above fullscreen overlay so burger X is clickable */
  .navbar-minimal {
    z-index: 1600 !important;
  }

  /* When menu is open, hide logo and book link — keep lang switcher + mute */
  .navbar-minimal.menu-open .navbar-logo {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }

  .navbar-minimal.menu-open .navbar-right .nav-book-link {
    display: none !important;
  }

  /* Show lang switcher in navbar when menu is open */
  .navbar-minimal.menu-open .navbar-center {
    display: flex !important;
  }

  .navbar-minimal.menu-open .lang-btn {
    color: #fff !important;
    font-size: 1.1rem !important;
    text-transform: uppercase;
  }

  /* Use short codes (EN, DE) in mobile menu */
  .navbar-minimal.menu-open .lang-full {
    display: none !important;
  }

  .navbar-minimal.menu-open .lang-short {
    display: inline !important;
  }

  .navbar-minimal.menu-open .lang-separator {
    color: #fff !important;
    font-size: 1.1rem !important;
  }

  /* Show theme toggle + mute in navbar when menu is open */
  .navbar-minimal.menu-open .navbar-right .mute-toggle,
  .navbar-minimal.menu-open .navbar-right .navbar-theme-toggle {
    display: inline-flex !important;
    color: #fff !important;
    background: none;
    border: none;
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0.25rem;
  }

  /* Frosted glass navbar when menu is open */
  .navbar-minimal.menu-open {
    background: rgba(var(--background-menue-rgb), 0.25) !important;
    backdrop-filter: blur(20px) saturate(1.5) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.5) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  }
}

/* Mobile Video Fixes - Transform Scale Approach */
@media screen and (max-width: 768px) {
  .hero-background video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    transform: translate(-50%, -50%) scale(1.2);
    -webkit-transform: translate(-50%, -50%) scale(1.2);
    object-fit: cover;
    object-position: center;
    z-index: 1;
  }
  
  /* Fallback for browsers that don't support object-fit */
  @media screen and (-webkit-min-device-pixel-ratio: 0) {
    .hero-background video {
      transform: translate(-50%, -50%) scale(1.5);
      -webkit-transform: translate(-50%, -50%) scale(1.5);
    }
  }
  
  /* Ensure container doesn't have any constraints */
  .hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  
  /* Make sure hero section is full height */
  .hero.is-fullheight {
    min-height: 100vh;
    height: 100vh;
  }
}

/* Mobile Navbar Adaptations */
@media screen and (max-width: 768px) {
  /* Hide logo on mobile */
  .navbar-logo {
    display: none;
  }
  
  /* Hide language switcher from top navbar on mobile */
  .navbar-center {
    display: none;
  }
  
  /* Language Switcher in Controls Area */
  .language-switcher-controls {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    text-transform: uppercase;
  }

  .overlay-controls button {
    text-transform: uppercase;
  }
  
  .lang-btn-overlay {
    background: none;
    border: none;
    color: var(--text-color);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 400;
    cursor: pointer;
    transition: var(--transition-fast);
    opacity: 0.7;
    padding: 0.5rem;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .lang-btn-overlay.active {
    opacity: 1;
    font-weight: 500;
  }
  
  .lang-btn-overlay:hover {
    opacity: 1;
    background: rgba(var(--text-color), 0.1);
  }
  
  .lang-separator-overlay {
    color: var(--text-primary);
    opacity: 0.7;
    font-size: 0.9rem;
    margin: 0;
  }
}

/* ==========================================================================
   Mobile: Overlay Menu & Contact Section Tiles
   ========================================================================== */

@media screen and (max-width: 768px) {
  /* Hide fixed WhatsApp on mobile unless .show-mobile is set */
  .fixed-whatsapp-btn:not(.show-mobile) { display: none !important; }

  /* Single scrollable container for nav + info tiles */
  .overlay-content {
    display: block !important;
    padding: 90px 1.5rem 6rem;
    overflow-y: scroll;
    overflow-x: hidden;
    height: 100%;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    position: relative;
    z-index: 1;
  }

  /* Frosted glass bottom action bar — fixed to viewport bottom */
  .overlay-bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex !important;
    justify-content: space-evenly;
    background: rgba(var(--background-menue-rgb), 0.65);
    backdrop-filter: blur(100px) saturate(1.8);
    -webkit-backdrop-filter: blur(100px) saturate(1.8);
    box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.08);
    padding: 0.6rem 1rem;
    z-index: 1700;
  }

  .overlay-bottom-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    color: #fff !important;
    text-decoration: none;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.3px;
  }

  .overlay-bottom-btn .btn-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
  }

  .overlay-bottom-btn:active .btn-icon {
    transform: scale(0.9);
  }

  .overlay-bottom-btn i {
    font-size: 1.4rem;
  }

  /* WhatsApp: green circle */
  .overlay-btn-whatsapp .btn-icon {
    background: #25D366;
  }

  .overlay-btn-whatsapp i {
    color: #fff;
    font-size: 1.6rem;
  }

  /* Call: subtle white circle */
  .overlay-btn-call .btn-icon {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
  }

  .overlay-btn-call i {
    color: #fff;
  }

  /* Email: subtle white circle */
  .overlay-btn-email .btn-icon {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
  }

  .overlay-btn-email i {
    color: #fff;
  }

  .overlay-content::-webkit-scrollbar {
    display: none;
  }

  /* Hide overlay controls on mobile — everything is in the navbar */
  .overlay-controls {
    display: none !important;
  }

  /* Nav items: compact */
  .overlay-nav {
    gap: 0;
    margin-top: 0;
  }

  .overlay-nav::-webkit-scrollbar {
    display: none;
  }

  .overlay-nav-item {
    font-size: 1.6rem;
    padding: 0.3rem 0;
    line-height: 1.3;
  }

  /* Room sub-nav: same font size, indented, subtle */
  .overlay-nav-sub {
    padding-left: 1.25rem !important;
    margin: 0 0 0.15rem !important;
    gap: 0;
  }

  .overlay-nav-sub a {
    font-size: 1.3rem !important;
    padding: 0.2rem 0 !important;
    line-height: 1.3;
    opacity: 0.65;
  }

  .overlay-nav-sub-extra {
    display: block !important;
  }

  .overlay-nav-sub-toggle {
    display: none !important;
  }

  /* Left column: auto height on mobile (block flow) */
  .overlay-left {
    height: auto !important;
    overflow: visible !important;
    padding-bottom: 0 !important;
  }

  /* Right column: normal flow, inherits parent padding */
  .overlay-right {
    margin-top: 1.5rem;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem;
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
    padding: 0 !important;
    width: 100% !important;
  }

  /* Social links: 2-column grid */
  .overlay-social-compact .social-links-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.5rem !important;
  }

  .overlay-contact-btn {
    width: 44px;
    height: 44px;
    font-size: 1.3rem;
  }

  /* Hours grid: single column */
  .hours-grid {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  /* Social links grid: keep 2-col but tighter */
  .social-links-grid {
    gap: 0.4rem;
  }

  .social-link {
    padding: 0.4rem 0.5rem;
  }

  /* Weather detail chips: wrap nicely */
  .weather-details-row {
    flex-wrap: wrap;
    gap: 0.3rem;
  }

  .weather-detail-chip {
    font-size: 0.7rem;
    padding: 0.2rem 0.4rem;
  }
}

/* Contact section mobile adjustments */
@media screen and (max-width: 768px) {
  #contact.contact-section .title.is-2 {
    font-size: 1.5rem !important;
  }

  #contact.contact-section .subtitle.is-4 {
    font-size: 1rem !important;
  }

  #contact .overlay-section-title {
    font-size: 0.9rem;
  }
}

/* ==========================================================================
   Mobile: Body text (Fließtext) sizing
   Titles, subtitles, and container padding are handled via Bulma helpers
   (is-size-X-mobile, px-4) directly in the HTML.
   ========================================================================== */

@media screen and (max-width: 768px) {
  /* Smaller body text (Fließtext) in content sections */
  .content p,
  .experience-content p {
    font-size: 0.9rem;
    line-height: 1.65;
  }
}

/* ==========================================================================
   Mobile: Room gallery — simple horizontal slider instead of GSAP pinning
   ========================================================================== */

@media screen and (max-width: 768px) {
  /* Reset the complex gallery section layout */
  .gallery-containing-section {
    margin-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Reduce gap between Rooms header and first room */
  #rooms.section {
    padding-bottom: 0 !important;
  }

  /* Reset the 500% wide container to normal flow */
  .gallery-panel-container {
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  /* Title area: reset absolute positioning to normal flow, reduce padding */
  .TOPinContainerDiv {
    position: relative !important;
    top: auto !important;
    width: 100% !important;
    min-height: auto !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }

  /* Reduce the pt-6 on room title to pt-2 equivalent on mobile */
  .TOPinContainerDiv .title.pt-6 {
    padding-top: 0.5rem !important;
  }

  /* Match subtitle font size and line height to body text on mobile */
  .TOPinContainerDiv .subtitle {
    font-size: 0.9rem !important;
    line-height: 1.65 !important;
  }

  /* Gallery panel: reset to normal flow */
  .panel.image-gallery-section {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    background-color: transparent !important;
  }

  /* Image gallery: simple horizontal scroll slider */
  .image-gallery {
    display: flex !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    height: auto !important;
    width: 100% !important;
    gap: 0.75rem;
    padding: 0 1rem !important;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .image-gallery::-webkit-scrollbar {
    display: none;
  }

  /* Gallery slide: portrait crop container — padding-bottom trick works on all browsers incl. iOS Safari */
  .gallery-slide {
    position: relative;
    width: 80vw !important;
    min-width: 80vw !important;
    height: 0 !important;
    padding-bottom: 106.67% !important; /* 80vw * 4/3 = portrait ratio */
    flex-shrink: 0;
    scroll-snap-align: center;
    border-radius: 0.5rem;
    overflow: hidden;
    z-index: 0;
  }

  .gallery-slide picture {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
  }

  .gallery-slide img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 0 !important;
  }

  /* Fallback for galleries without .gallery-slide wrappers */
  .image-gallery > img:not(.gallery-slide img) {
    height: auto !important;
    width: 80vw !important;
    min-width: 80vw !important;
    flex-shrink: 0 !important;
    scroll-snap-align: center;
    border-radius: 0.5rem;
  }

  /* Room info area: reset absolute positioning to normal flow */
  .SUBinContainerDiv {
    position: relative !important;
    top: auto !important;
    width: 100% !important;
    min-height: auto !important;
    padding-top: 0 !important;
  }

  .room-info {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Hide section divider between rooms on mobile */
  .section.divider {
    display: none !important;
  }

  /* Compact features grid: 2 columns, inline icon + text */
  .features-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.5rem !important;
  }

  .feature-item {
    flex-direction: row !important;
    gap: 0.5rem;
    padding: 0.4rem 0 !important;
    text-align: left !important;
  }

  .feature-icon {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
  }

  .feature-icon i {
    font-size: 0.8rem !important;
  }

  .feature-item span {
    font-size: 0.95rem !important;
  }

  /* Compact room features card */
  .room-features-card {
    padding: 1rem !important;
  }

  .room-features h4 {
    font-size: 1rem !important;
    margin-bottom: 0.5rem !important;
  }

  /* Compact specs row */
  .room-specs {
    gap: 1rem !important;
  }

  .spec-label {
    font-size: 0.7rem !important;
  }

  .spec-value {
    font-size: 1.2rem !important;
  }

  /* Team grid: horizontal scroll like highlight tiles */
  .team-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    gap: 0.75rem !important;
    margin-left: -1rem;
    margin-right: -1rem;
    padding: 0 1rem !important;
    margin-top: 1rem !important;
  }

  .team-grid::-webkit-scrollbar {
    display: none;
  }

  .team-member {
    flex: none !important;
    width: 75vw !important;
    min-width: 75vw !important;
    scroll-snap-align: center;
    overflow: hidden !important;
    height: 75vh !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .team-image {
    height: 250px !important;
  }

  /* On mobile: show full bio in scrollable area, hide toggle */
  .team-bio-toggle {
    display: none !important;
  }

  .team-bio-full {
    display: block !important;
    flex: 1 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    max-height: none !important;
    margin-top: 0.5rem !important;
  }

  .team-bio-full::-webkit-scrollbar {
    display: none;
  }

  .team-bio-short {
    display: none !important;
  }

  .team-info {
    padding: 0.75rem !important;
    flex: 1 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Hide clock face on mobile */
  .clock-face {
    display: none !important;
  }

  /* Remove clock background, fixed height, and overflow lock on mobile */
  #contact.contact-section {
    background: none !important;
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
  }

  #contact.contact-section > .container {
    overflow: visible !important;
    display: block !important;
    padding: 1rem 1rem !important;
  }

  /* Remove contact tiles scroll — normal flow on mobile */
  .contact-tiles-scroll {
    overflow-y: visible !important;
    flex: none !important;
    min-height: auto !important;
  }
}

/* ==========================================================================
   Mobile: Highlight tiles horizontal scroll
   ========================================================================== */

@media screen and (max-width: 768px) {
  /* The wrapper becomes the horizontal scroll container */
  .highlight-scroll-wrapper {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin-left: -1.25rem;
    margin-right: -1.25rem;
    padding: 1.25rem 1.25rem;
  }

  .highlight-scroll-wrapper::-webkit-scrollbar {
    display: none;
  }

  /* Override Bulma .columns: make it a flat inline row */
  .highlight-scroll-wrapper > .columns {
    display: flex !important;
    flex-wrap: nowrap !important;
    margin: 0 !important;
    gap: 0.75rem;
    width: max-content;
  }

  /* Override Bulma .column: fixed-width cards */
  .highlight-scroll-wrapper > .columns > .column {
    display: block !important;
    flex: none !important;
    width: 75vw !important;
    min-width: 75vw !important;
    padding: 0 !important;
    scroll-snap-align: center;
  }

  .highlight-scroll-wrapper .highlight-item.box {
    height: 100%;
    margin-bottom: 0;
  }

  .highlight-scroll-wrapper .highlight-item .title.is-5 {
    font-size: 1rem;
    margin-bottom: 0.8rem;
    margin-top: 0.4rem;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.3rem;
    column-gap: 0.2rem;
  }

  .highlight-scroll-wrapper .highlight-item .title.is-5 i {
    flex-shrink: 0;
  }

  .highlight-scroll-wrapper .highlight-item p {
    font-size: 0.95rem;
    line-height: 1.2rem;
    margin-bottom: 1rem;
  }

  .highlight-scroll-wrapper .highlight-details li {
    font-size: 0.9rem;
    line-height: 1.7rem;
  }

  /* Breakfast photos: narrower cards for image thumbnails */
  .breakfast-photos-scroll.highlight-scroll-wrapper > .columns > .column {
    width: 60vw !important;
    min-width: 60vw !important;
  }
}