/* THE WANN — Responsive */

@media (max-width: 1199px) {
  .nav-desktop {
    display: none;
  }
  .hamburger {
    display: flex;
  }
  .header-cta .btn-gold {
    display: none;
  }
  .space-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .space-item:first-child {
    grid-row: span 1;
  }
  .events-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .menu-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .gallery-masonry {
    columns: 2;
  }
}

@media (max-width: 991px) {
  .section {
    padding: 80px 0;
  }
  .about-split,
  .chef-layout,
  .booking-grid,
  .dishes-showcase {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .dish-featured {
    grid-row: span 1;
    min-height: 400px;
  }
  .dish-featured img {
    min-height: 400px;
  }
  .news-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .article-layout {
    grid-template-columns: 1fr;
  }
  .article-sidebar {
    position: static;
  }
  .contact-mini {
    grid-template-columns: 1fr;
  }
  .about-stats {
    grid-template-columns: repeat(3, 1fr);
  }
  .chef-photo img {
    height: 450px;
  }
  .chef-photo-badge {
    right: 0;
    bottom: -16px;
  }
}

@media (max-width: 767px) {
  :root {
    --header-h: 72px;
  }
  .hero-video-overlay {
    background:
      linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.35) 40%, rgba(0, 0, 0, 0.65) 100%),
      var(--overlay);
  }
  .hero-content {
    padding: 0 20px;
    padding-top: calc(var(--header-h) + 12px);
  }
  .hero-brand {
    letter-spacing: 0.12em;
    font-size: clamp(2.25rem, 11vw, 3.25rem);
    line-height: 1.1;
  }
  .hero-slogan {
    letter-spacing: 0.14em;
    font-size: 0.68rem;
    line-height: 1.6;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
  }
  .hero-tagline {
    font-size: 1rem;
    margin-bottom: 32px;
    padding: 0 4px;
  }
  .scroll-indicator {
    display: none;
  }
  .hero-btns {
    flex-direction: column;
    align-items: center;
  }
  .hero-btns .btn {
    width: 100%;
    max-width: 280px;
  }
  .space-grid,
  .events-row,
  .news-grid,
  .menu-grid,
  .about-stats {
    grid-template-columns: 1fr;
  }
  .page-hero--compact {
    min-height: 280px;
  }
  .article-content,
  .article-author-bar,
  .article-featured figcaption,
  .article-tags,
  .article-nav {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  .article-content {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
  .article-featured figcaption {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }
  .space-item:first-child {
    grid-row: span 1;
    aspect-ratio: 3/4;
  }
  .menu-tabs {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 8px;
    margin-bottom: 32px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .menu-tabs::-webkit-scrollbar {
    display: none;
  }
  .menu-tab {
    flex-shrink: 0;
  }
  .menu-coverflow-stage::before,
  .menu-coverflow-stage::after {
    width: 40px;
  }
  .menu-section .swiper-menu-3d .swiper-slide {
    width: min(82vw, 300px);
  }
  .menu-coverflow-card {
    height: clamp(380px, 72vw, 520px);
  }
  .menu-coverflow-nav-top {
    margin-bottom: 20px;
  }
  .menu-coverflow-btn {
    width: 46px;
    height: 46px;
  }
  .form-row-2 {
    grid-template-columns: 1fr;
  }
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .gallery-masonry {
    columns: 1;
  }
  .about-image img {
    height: auto;
  }
  .about-image-stars .star i {
    width: 26px;
    height: 26px;
  }
  .about-image-stars .star:nth-child(2) i {
    width: 32px;
    height: 32px;
  }
  .page-hero {
    padding: 140px 0 70px;
  }
  .page-hero h1 {
    letter-spacing: 0.1em;
  }
  .testimonial-slide {
    padding: 32px 24px;
  }
  .testimonial-text {
    font-size: 1.15rem;
  }
  .back-top {
    bottom: 20px;
    right: 20px;
  }
  .float-contacts {
    right: 20px;
    bottom: 80px;
    gap: 8px;
  }
  .float-contact {
    width: 46px;
    height: 46px;
  }
  .container {
    padding: 0 20px;
  }
}

@media (max-width: 480px) {
  .menu-filter,
  .gallery-filter {
    gap: 8px;
  }
  .filter-btn {
    padding: 8px 16px;
    font-size: 0.65rem;
  }
}