/* ==========================================================================
   Responsive
   Desktop and mobile overrides only. Reusable component styles live in
   components.css, the single source of truth; this file is loaded after it
   and layers media-query overrides on top.
   ========================================================================== */

/* ==========================================================================
   Mobile layout and media overrides
   Keep all phone-specific rules in one place to avoid cascade conflicts.
   ========================================================================== */
@media (max-width: 767px) {
  /* Mobile navigation */
  #navbar > div {
    position: relative;
    justify-content: space-between !important;
  }

  #navbar a[href="#"] {
    align-items: flex-start !important;
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .mobile-cta-fab {
    transition:
      opacity .22s ease,
      visibility .22s ease,
      transform .22s ease,
      box-shadow .18s ease !important;
  }

  #navbar:not(.scrolled) ~ .mobile-cta-fab {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(110%) scale(0.98) !important;
  }

  /* Mobile hero text layout */
  .hero-title-size {
    display: none !important;
  }

  .hero-section .relative.z-10 {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    padding-bottom: 3.75rem !important;
  }

  .hero-section .relative.z-10 > p,
  .hero-section .relative.z-10 > .flex {
    display: none !important;
  }

  /* Hero video */
  .hero-section {
    min-height: 100svh;
    background-color: var(--brand-dark) !important;
    overflow: hidden !important;
  }

  .hero-section .absolute.inset-0 {
    background: transparent !important;
    background-size: 85% auto !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }

  #heroVideo,
  #heroVideo.is-video-fallback,
  .hero-video.is-video-fallback {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: scale(1.04) !important;
    transform-origin: center center !important;
    filter: brightness(1) contrast(1.04) saturate(1.04) !important;
    background-color: var(--brand-dark) !important;
  }

  .hero-overlay {
    background:
      linear-gradient(
        to bottom,
        rgba(13, 5, 0, 0.04) 0%,
        rgba(13, 5, 0, 0.02) 32%,
        rgba(13, 5, 0, 0.28) 66%,
        rgba(13, 5, 0, 0.78) 100%
      ) !important;
  }

  /* Calzone video */
  .signature-media-min-height {
    display: block !important;
    min-height: clamp(360px, 66vh, 620px) !important;
    overflow: hidden !important;
    background: var(--brand-surface-2);
  }

  .signature-media-min-height .signature-video {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: scale(0.92) !important;
    transform-origin: center center !important;
    background-color: var(--brand-surface-2);
  }

  /* Hide fireplace media on mobile */
  #menuFireplaceVideo,
  #menuFireplaceVideo.is-video-fallback,
  .menu-fireplace-video.is-video-fallback {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }

  #menu > .absolute.inset-0 {
    background-image: none !important;
    background-size: auto !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }

  #menu .tab-content:not(.hidden) {
    min-height: auto !important;
    display: block;
  }

  /* Speisekarte tabs: centered 2 columns x 3 rows */
  #menu .overflow-x-auto:has(.tab-btn),
  #menu .overflow-x-auto {
    overflow-x: visible !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #menu .overflow-x-auto:has(.tab-btn) > .flex,
  #menu .overflow-x-auto > .flex:has(.tab-btn),
  #menu .overflow-x-auto > .flex {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: min(100%, 340px) !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow: hidden !important;
  }

  #menu .tab-btn {
    width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.9rem 0.35rem !important;
    text-align: center !important;
    white-space: nowrap !important;
    font-size: 0.62rem !important;
    letter-spacing: 0.12em !important;
  }

  /* Gallery: compact 2-column grid */
  #gallery .gallery-mobile-carousel {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-flow: dense !important;
    gap: 0.55rem !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #gallery .gallery-mobile-carousel > .gallery-item,
  #gallery .gallery-mobile-carousel > .gallery-item:first-child,
  #gallery .gallery-mobile-carousel > .gallery-item.col-span-2,
  #gallery .gallery-mobile-carousel > .gallery-item.row-span-2 {
    display: block !important;
    flex: none !important;
    width: auto !important;
    min-width: 0 !important;
    grid-column: auto !important;
    grid-row: auto !important;
    aspect-ratio: 1 / 1 !important;
    order: initial !important;
    scroll-snap-align: none !important;
  }

  #gallery .gallery-mobile-carousel > .mobile-gallery-terasse {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  #gallery .gallery-mobile-carousel img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  /* Contact section */
  .contact-section-bg::before {
    inset: -38% -82%;
    background-size: auto min(1120px, 142vh);
    background-position: center center;
    opacity: 0.54;
    transform: rotate(90deg) scale(1.08);
    transform-origin: center center;
  }

  #contact .opening-hours-list {
    gap: 0.42rem;
    max-width: 17.5rem;
    margin-left: auto;
    margin-right: auto;
  }

  #contact .opening-hours-row {
    grid-template-columns: minmax(5.5rem, 0.95fr) minmax(0, 1.05fr) !important;
    gap: 0.55rem;
    padding: 0.2rem 0 !important;
  }

  #contact .opening-day,
  #contact .opening-time {
    font-size: 0.88rem;
    line-height: 1.5;
  }

  /* Mobile modals and general spacing */
  #modal-impressum,
  #modal-datenschutz {
    padding: 0 !important;
  }

  #modal-impressum > div.relative,
  #modal-datenschutz > div.relative {
    max-width: 100% !important;
    width: 100% !important;
    max-height: 100vh !important;
    height: 100vh !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 4.5rem 1.5rem 2rem !important;
    overflow-y: auto;
  }

  #modal-impressum-close,
  #modal-datenschutz-close {
    top: 1.25rem !important;
    right: 1.25rem !important;
  }

  section {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  body {
    padding-bottom: 0;
  }
}

/* Very small phones */
@media (max-width: 420px) {
  .signature-media-min-height {
    min-height: clamp(330px, 61vh, 540px) !important;
  }

  .signature-media-min-height .signature-video {
    transform: scale(0.87) !important;
  }

  #menu .overflow-x-auto > .flex,
  #menu .overflow-x-auto > .flex:has(.tab-btn) {
    width: min(100%, 320px) !important;
  }

  #menu .tab-btn {
    font-size: 0.58rem !important;
    padding: 0.82rem 0.25rem !important;
  }
}

/* ==========================================================================
   Mobile hamburger menu
   Visible on mobile only. The menu opens as a black dropdown below the navbar.
   ========================================================================== */

.mobile-menu-toggle {
  display: none;
}

.mobile-nav-links {
  display: none;
}

@media (max-width: 767px) {
  .mobile-menu-toggle {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.26rem;
    width: 2.55rem;
    height: 2.55rem;
    padding: 0;
    border: 1px solid rgba(254, 242, 242, 0.22);
    border-radius: 0;
    background: rgba(0, 0, 0, 0.92);
    color: var(--brand-cream);
    cursor: pointer;
    transition:
      border-color .18s ease,
      background-color .18s ease;
  }

  .mobile-menu-toggle span {
    display: block;
    width: 1.12rem;
    height: 1px;
    background: currentColor;
    transform-origin: center;
    transition:
      opacity .18s ease,
      transform .18s ease;
  }

  .mobile-menu-toggle:hover,
  .mobile-menu-toggle:focus-visible {
    border-color: rgba(217, 137, 90, 0.72);
    background: rgba(0, 0, 0, 0.98);
    outline: none;
  }

  #navbar.mobile-menu-open {
    background-color: rgba(0, 0, 0, 0.96);
    box-shadow: 0 1px 34px rgba(0, 0, 0, 0.48);
  }

  #navbar.mobile-menu-open .mobile-menu-toggle span:nth-child(1) {
    transform: translateY(0.32rem) rotate(45deg);
  }

  #navbar.mobile-menu-open .mobile-menu-toggle span:nth-child(2) {
    opacity: 0;
  }

  #navbar.mobile-menu-open .mobile-menu-toggle span:nth-child(3) {
    transform: translateY(-0.32rem) rotate(-45deg);
  }

  .mobile-nav-links {
    position: absolute;
    top: calc(100% + 0.7rem);
    right: 0;
    z-index: 55;
    display: none;
    min-width: min(15rem, calc(100vw - 3rem));
    padding: 0.55rem 0;
    border: 1px solid rgba(254, 242, 242, 0.12);
    background: rgba(0, 0, 0, 0.96);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.46);
  }

  #navbar.mobile-menu-open .mobile-nav-links {
    display: flex;
    flex-direction: column;
  }

  .mobile-nav-link {
    display: block;
    padding: 0.88rem 1rem;
    font-family: 'Jost', sans-serif;
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(254, 242, 242, 0.9);
    text-decoration: none;
    white-space: nowrap;
    transition:
      background-color .18s ease,
      color .18s ease;
  }

  .mobile-nav-link:hover,
  .mobile-nav-link:focus-visible {
    background: rgba(192, 94, 53, 0.16);
    color: #fff;
    outline: none;
  }
}


/* ==========================================================================
   Highlights bar: compact 3-column layout on small screens
   Default grid-cols-1 wastes vertical space; show all 3 horizontally.
   ========================================================================== */

@media (max-width: 639px) {
  .highlights-bar-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.5rem !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  .highlights-bar-grid > div {
    flex-direction: column !important;
    gap: 0.35rem !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .highlights-bar-grid > div svg {
    width: 1.375rem !important;
    height: 1.375rem !important;
    flex-shrink: 0;
  }

  .highlights-bar-grid > div > div {
    text-align: center !important;
  }

  .highlights-bar-grid .text-sm {
    font-size: 0.6rem !important;
    letter-spacing: 0.04em !important;
    line-height: 1.3 !important;
  }

  /* Hide subtitle on very small screens — label alone is enough */
  .highlights-bar-grid .text-xs {
    display: none !important;
  }
}


/* ==========================================================================
   Contact CTA: full-width on mobile
   inline-flex at mobile widths can look orphaned and wastes tap area.
   ========================================================================== */

@media (max-width: 767px) {
  #contact .mt-12 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #contact .contact-order-cta {
    display: flex !important;
    width: 100% !important;
    justify-content: center !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
}


/* ==========================================================================
   Landscape orientation on mobile
   Reduces hero title to scale with viewport height, shortens hero padding.
   ========================================================================== */

@media (max-width: 767px) and (orientation: landscape) {
  .hero-title-size {
    font-size: clamp(2rem, 5.5vw, 3.5rem) !important;
  }

  .hero-section .relative.z-10 {
    padding-bottom: 1.5rem !important;
  }
}


/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .fade-up {
    transition: none;
    animation: none;
    opacity: 1;
    transform: none;
  }

  #heroVideo,
  #menuFireplaceVideo,
  .signature-video {
    animation: none;
  }

  .tab-content,
  .tab-content.tab-fading-out,
  .tab-content.tab-entering {
    transition: none;
    transform: none;
    opacity: 1;
  }
}