/* ============================================================
   LO D'ALEX — RESPONSIVE
   Mobile-first breakpoints (95% mobile traffic)
   ============================================================ */

/* === 1024px: Tablet / Small Desktop === */
@media (max-width: 1024px) {
  /* Hide desktop nav, show toggle */
  .nav__links {
    display: none;
  }

  .nav__toggle {
    display: flex;
  }

  .nav__actions .nav__lang {
    display: none;
  }

  /* Show mobile bottom nav */
  .mobile-bottom-nav {
    display: flex;
  }

  /* Golden frame hidden on tablet+ mobile */
  .page-frame {
    display: none;
  }

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

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

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

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

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

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

  .booking-widget__form {
    flex-direction: column;
  }
}

/* === 768px: Tablets === */
@media (max-width: 768px) {
  :root {
    --nav-height: 70px;
  }

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

  .section {
    padding: 4rem 0;
  }

  .monarca-cta {
    padding-bottom: 2rem !important;
  }

  .monarca-section {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  body {
    padding-bottom: 0;
    margin-bottom: 0;
  }

  .footer-fire-wrapper {
    margin-bottom: 0;
    padding-bottom: 0;
  }

  .section {
    padding: var(--space-3xl) 0;
  }

  .section--lg {
    padding: var(--space-3xl) 0;
  }

  /* Hero */
  .hero__content {
    padding: var(--space-lg);
  }

  .page-hero {
    min-height: 40vh;
  }

  /* Typography scaling */
  .display-xl {
    font-size: clamp(var(--text-4xl), 10vw, var(--text-6xl));
  }

  .display-lg {
    font-size: clamp(var(--text-3xl), 8vw, var(--text-5xl));
  }

  .display-md {
    font-size: clamp(var(--text-2xl), 6vw, var(--text-4xl));
  }

  /* Grids stack */
  .grid-2 {
    grid-template-columns: 1fr;
  }

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

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

  /* Footer nav links — 2 columns on mobile */
  .footer__links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .footer__links li {
    padding: var(--space-xs) 0;
  }
  .footer__links li:nth-child(1) { grid-row: 1; grid-column: 1; }
  .footer__links li:nth-child(2) { grid-row: 2; grid-column: 1; }
  .footer__links li:nth-child(3) { grid-row: 3; grid-column: 1; }
  .footer__links li:nth-child(4) { grid-row: 4; grid-column: 1; }
  .footer__links li:nth-child(5) { grid-row: 1; grid-column: 2; border-left: 1px solid rgba(200,164,74,0.12); padding-left: var(--space-lg); }
  .footer__links li:nth-child(6) { grid-row: 2; grid-column: 2; border-left: 1px solid rgba(200,164,74,0.12); padding-left: var(--space-lg); }
  .footer__links li:nth-child(7) { grid-row: 3; grid-column: 2; border-left: 1px solid rgba(200,164,74,0.12); padding-left: var(--space-lg); }

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

  .footer__brand {
    max-width: 100%;
  }

  .footer__bottom {
    flex-direction: column;
    text-align: center;
    gap: var(--space-lg);
  }

  /* Form grid */
  .form-grid {
    grid-template-columns: 1fr;
  }

  /* Moments stack 2 columns */
  .moments {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Cocktail grid — single column on mobile */
  .cocktail-grid {
    grid-template-columns: 1fr;
    max-width: 400px;
  }

  /* Photo separator */
  .photo-separator {
    height: 200px;
  }

  /* Map */
  .map-embed iframe {
    height: 300px;
  }

  /* Video placeholder */
  .video-section__placeholder {
    aspect-ratio: 16/9;
  }

  /* Divider */
  .divider {
    margin: var(--space-2xl) 0;
  }

  /* Booking widget responsive */
  .booking-widget {
    padding: var(--space-xl) var(--space-lg);
  }

  /* Hero actions stack */
  .hero__actions {
    flex-direction: column;
    gap: var(--space-md);
  }

  .hero__actions .btn {
    width: 100%;
    max-width: 300px;
  }

  /* === ACCORDION MOBILE (< 768px) === */
  .accordion-trigger {
    min-height: 120px;
    padding: var(--space-xl) var(--space-lg);
  }

  .accordion-body .menu-list {
    max-width: 100%;
  }

  .accordion-body .cocktail-grid {
    grid-template-columns: 1fr;
    max-width: 100%;
  }

  .accordion-body__inner {
    padding: 0 var(--space-lg);
  }

  .accordion-panel.open .accordion-body__inner {
    padding: var(--space-lg) var(--space-lg) var(--space-2xl);
  }

  /* Menu tabs: smooth horizontal scroll, no wrapping */
  .menu-tabs {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
  }

  .menu-tabs__inner {
    flex-wrap: nowrap;
    white-space: nowrap;
  }

  .menu-tab {
    scroll-snap-align: start;
  }

  /* === TOUCH TARGETS (min 44px) === */
  .btn {
    min-height: 44px;
    min-width: 44px;
  }

  .nav__toggle {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .nav__link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* === RESPONSIVE IMAGES === */
  img {
    max-width: 100%;
    height: auto;
  }

  /* === NAV MOBILE OVERLAY === */
  .nav__mobile {
    z-index: 200;
  }

  .nav__toggle {
    z-index: 201;
  }
}

/* === 480px: Large Phones === */
@media (max-width: 480px) {
  :root {
    --nav-height: 64px;
  }

  .container {
    padding: 0 var(--space-md);
  }

  .section {
    padding: var(--space-2xl) 0;
  }

  /* Nav */
  .nav {
    padding: 0 var(--space-lg);
  }

  .nav__logo-text,
  .footer__logo-text {
    font-size: var(--text-lg);
  }

  .btn--nav {
    padding: 7px 14px;
    font-size: 0.6rem;
    background: transparent;
    border: 1px solid rgba(191, 155, 81, 0.4);
    color: var(--gold);
  }
  .btn--nav:hover {
    background: rgba(191, 155, 81, 0.08);
    border-color: var(--gold);
  }

  /* Hero — use dynamic viewport height so video fills full screen on mobile */
  .hero {
    height: 100svh;      /* fallback: small viewport height (address bar visible) */
    height: 100dvh;      /* ideal: dynamic viewport height (updates as chrome shows/hides) */
    min-height: 100svh;
    min-height: 100dvh;
    overflow: hidden;    /* clip the video to the hero box, no bleed */
  }

  /* Force hero__bg and video to fill exactly the hero box */
  .hero .hero__bg {
    position: absolute;
    inset: 0;
  }

  .hero .hero-mobile-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  .page-hero {
    min-height: 35vh;
  }

  /* All grids to single column */
  .grid-4,
  .grid-3,
  .grid-2 {
    grid-template-columns: 1fr;
  }

  /* Moments: 2 columns stays */
  .moments {
    grid-template-columns: repeat(2, 1fr);
  }

  .moment-tab {
    padding: var(--space-lg) var(--space-md);
  }

  .moment-tab__icon {
    font-size: var(--text-2xl);
  }

  .moment-tab__title {
    font-size: var(--text-base);
  }

  /* Cards */
  .card__body {
    padding: var(--space-lg);
  }

  .card--dish .card__body {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
  }

  /* Menu page */
  .menu-tabs {
    padding: 0 var(--space-md);
  }

  .menu-tab {
    padding: 8px 14px;
    font-size: 0.65rem;
  }

  .menu-section {
    padding: var(--space-2xl) 0 var(--space-xl);
  }

  /* Accordion responsive — phones */
  .menu-accordion {
    padding: var(--space-md) var(--space-sm) var(--space-2xl);
  }

  .accordion-trigger {
    min-height: 110px;
    padding: var(--space-lg) var(--space-md);
  }

  .accordion-trigger__title {
    font-size: 1.3rem;
  }

  .accordion-trigger__icon {
    width: 44px;
    height: 44px;
    font-size: 1.2rem;
    margin-left: var(--space-md);
  }

  .accordion-body__inner {
    padding: 0 var(--space-md);
  }

  .accordion-panel.open .accordion-body__inner {
    padding: var(--space-md) var(--space-md) var(--space-xl);
  }

  .cocktail-grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
    max-width: 100%;
  }

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

  .menu-item__name {
    font-size: var(--text-base);
  }

  .accordion-body .menu-list {
    max-width: 100%;
  }

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

  /* Newsletter popup */
  .newsletter-popup__content {
    padding: var(--space-2xl) var(--space-lg);
  }

  .newsletter-popup__form {
    flex-direction: column;
  }

  /* Footer */
  .footer {
    padding: var(--space-2xl) 0 var(--space-lg);
  }

  /* Photo separator */
  .photo-separator {
    height: 160px;
  }

  /* WhatsApp FAB */
  .whatsapp-fab {
    width: 48px;
    height: 48px;
    bottom: var(--space-lg);
    right: var(--space-lg);
  }

  .whatsapp-fab svg {
    width: 24px;
    height: 24px;
  }

  /* Buttons */
  .btn--lg {
    padding: 14px 32px;
    font-size: var(--text-sm);
  }

  /* Video play button */
  .video-section__play {
    width: 60px;
    height: 60px;
  }

  /* Lunch sides wrap */
  .lunch-sides {
    gap: var(--space-xs);
  }

  .lunch-sides__tag {
    padding: 4px 10px;
    font-size: 0.65rem;
  }

  /* Map */
  .map-embed iframe {
    height: 250px;
  }
}

/* === 390px: Standard iPhone === */
@media (max-width: 390px) {
  .display-xl {
    font-size: var(--text-4xl);
  }

  .display-lg {
    font-size: var(--text-3xl);
  }

  .display-md {
    font-size: var(--text-2xl);
  }

  .heading-lg {
    font-size: var(--text-xl);
  }

  .hero__subtitle {
    font-size: var(--text-base);
  }

  .moment-tab {
    padding: var(--space-md) var(--space-sm);
  }

  .moment-tab__time {
    font-size: 0.6rem;
  }

  /* Accordion — iPhone refinements */
  .accordion-trigger {
    min-height: 100px;
    padding: var(--space-lg) var(--space-md);
  }

  .accordion-trigger__title {
    font-size: 1.15rem;
  }

  .accordion-trigger__label {
    font-size: 0.6rem;
  }

  .accordion-trigger__count {
    font-size: 0.6rem;
  }
}

/* === 360px: Small Phones (Android) === */
@media (max-width: 360px) {
  .container {
    padding: 0 var(--space-sm);
  }

  .nav {
    padding: 0 var(--space-md);
  }

  .btn--nav {
    padding: 6px 12px;
    font-size: 0.6rem;
    min-height: 44px;
  }

  /* Accordion — small Android */
  .accordion-trigger {
    min-height: 96px;
    padding: var(--space-md) var(--space-sm);
  }

  .accordion-trigger__title {
    font-size: 1.1rem;
  }

  .accordion-body__inner {
    padding: 0 var(--space-sm);
  }

  .accordion-panel.open .accordion-body__inner {
    padding: var(--space-md) var(--space-sm) var(--space-xl);
  }

  .menu-accordion {
    padding: var(--space-sm) var(--space-xs) var(--space-xl);
  }

  /* Menu tabs — tighter on small screens */
  .menu-tab {
    padding: 8px 12px;
    font-size: 0.6rem;
    min-height: 44px;
  }
}

/* ============================================================
   CONTACT PAGE — Mobile Responsive Overrides
   Breakpoints: 1100px | 768px | 480px | 390px | 360px
   ============================================================ */

/* === 1100px: Sidebar stacks below form === */
@media (max-width: 1100px) {
  /* contact-body grid collapses to single column;
     sidebar moves to order:2 (below the form) */
  .contact-body {
    grid-template-columns: 1fr;
  }

  .contact-sidebar {
    order: 2;
    width: 100%;
  }

  .contact-forms {
    order: 1;
  }
}

/* === 768px: 2-col cards, collapse form grids, map 300px === */
@media (max-width: 768px) {
  /* Contact reason cards: 2 columns on tablet */
  .contact-reasons {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Reason cards: compact padding, accessible touch size */
  .reason-card {
    padding: var(--space-lg) var(--space-md);
    min-height: 44px;
  }

  .reason-card__icon svg {
    width: 32px;
    height: 32px;
  }

  /* All form 2-col grids become 1 col on mobile */
  .contact-forms .form-grid {
    grid-template-columns: 1fr;
  }

  /* Map: 300px on mobile */
  .map-dark-wrap {
    height: 300px;
  }
}

/* === 480px: Carousel strip for contact reason cards === */
@media (max-width: 480px) {
  /* Horizontal scrollable carousel strip */
  .contact-reasons {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    gap: var(--space-md);
    padding-bottom: var(--space-sm);
    /* Hide scrollbar visually but keep it functional */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .contact-reasons::-webkit-scrollbar {
    display: none;
  }

  /* Fixed-width cards that snap into place */
  .reason-card {
    flex: 0 0 200px;
    min-width: 200px;
    scroll-snap-align: start;
    padding: var(--space-lg) var(--space-md);
    min-height: 44px;
  }

  /* Sidebar: full width below form */
  .contact-sidebar {
    padding: var(--space-xl);
  }

  /* Map: 300px on small phones */
  .map-dark-wrap {
    height: 300px;
  }
}

/* === 390px: Standard iPhone — narrower carousel cards === */
@media (max-width: 390px) {
  .reason-card {
    flex: 0 0 168px;
    min-width: 168px;
  }

  /* Contact body tighter spacing */
  .contact-body {
    margin-top: var(--space-2xl);
  }
}

/* === 360px: Small Android — tightest carousel cards === */
@media (max-width: 360px) {
  .reason-card {
    flex: 0 0 155px;
    min-width: 155px;
  }

  .contact-sidebar {
    padding: var(--space-lg);
  }
}

/* ============================================================
   OPPORTUNITIES PAGE — Mobile Responsive Overrides
   Breakpoints: 768px | 480px | 390px | 360px
   ============================================================ */

/* === 768px: 2-col opportunity cards, form grids stack === */
@media (max-width: 768px) {
  /* Reduce section padding */
  #opportunities.section {
    padding: var(--space-2xl) 0;
  }

  /* Form grids: all 2-col grids collapse to single column */
  #opportunities .form-grid {
    grid-template-columns: 1fr;
  }

  /* All inputs, selects: min font-size 16px prevents iOS auto-zoom */
  #opportunities .form-input,
  #opportunities .form-select,
  #opportunities .form-textarea {
    font-size: 16px;
    min-height: 44px;
  }

  /* Labels: slightly smaller but still readable on mobile */
  #opportunities .form-label {
    font-size: var(--text-sm);
  }

  /* Submit buttons: full width with accessible min-height */
  #opportunities .btn--gold.btn--lg {
    width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* File upload zone: full width */
  .opp-upload-zone {
    width: 100%;
    box-sizing: border-box;
  }
}

/* === 480px: Carousel for opportunity cards, compact upload zone === */
@media (max-width: 480px) {
  /* Section padding: tighter on phones */
  #opportunities.section {
    padding: var(--space-xl) 0;
  }

  /* Upload zone: full width, smaller padding */
  .opp-upload-zone {
    padding: var(--space-lg) var(--space-md);
  }

  /* Upload zone icon: slightly smaller */
  .opp-upload-zone__icon {
    font-size: 1.5rem;
  }

  /* Labels: compact but readable */
  #opportunities .form-label {
    font-size: 0.75rem;
  }

  /* Success message: tighter padding */
  .opp-success {
    padding: var(--space-2xl) var(--space-lg);
  }

  /* Panel headings: scale down slightly */
  #opportunities .heading-lg {
    font-size: var(--text-xl);
  }
}

/* === 390px: Standard iPhone — narrower carousel cards === */
@media (max-width: 390px) {
  .opp-card {
    flex: 0 0 168px;
    min-width: 168px;
  }
}

/* === 360px: Small Android — tightest carousel cards === */
@media (max-width: 360px) {
  .opp-card {
    flex: 0 0 155px;
    min-width: 155px;
  }

  /* Upload zone: minimal padding on smallest screens */
  .opp-upload-zone {
    padding: var(--space-md) var(--space-sm);
  }
}

/* ============================================================
   VISIT US / MAP SECTION — RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  /* Location info cards: stack to 1 column */
  section[aria-label="Visit Lo D'Alex"] .container > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: var(--space-lg) !important;
  }
  /* Map height smaller */
  .map-dark-wrap { height: 350px !important; }
  /* Floating badge: compact */
  .map-dark-wrap > div[style*="position:absolute"] {
    left: 16px !important;
    right: 16px !important;
    transform: none !important;
    flex-wrap: wrap;
    padding: 12px 16px !important;
    gap: 10px !important;
  }
  /* Nearby landmarks: 2x2 grid */
  section[aria-label="Nearby landmarks"] .container {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl) !important;
  }
  /* Hide dividers on mobile */
  section[aria-label="Nearby landmarks"] .container > div[style*="width:1px"] {
    display: none;
  }
}

@media (max-width: 480px) {
  .map-dark-wrap { height: 280px !important; }
  .map-dark-wrap > div[style*="position:absolute"] {
    bottom: 12px !important;
    padding: 10px 14px !important;
    font-size: 0.85rem;
  }
}

/* ============================================================
   CHEF'S SELECTION — RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .dark-section > .container > div[style*="grid-template-columns:1fr 1.2fr"] {
    grid-template-columns: 1fr !important;
    gap: var(--space-2xl) !important;
  }
}

/* ============================================================
   EVENTS PAGE — Mobile Responsive Overrides
   Breakpoints: 1024px | 768px | 480px | 390px | 360px
   ============================================================ */

/* === All breakpoints: prevent iOS zoom on form inputs === */
#inquiry .form-input,
#inquiry .form-select,
#inquiry .form-textarea {
  font-size: 16px;
}

/* Screen-reader only utility (used by event form labels) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* === 1024px: iPad Landscape — form and stats adjust === */
@media (max-width: 1024px) {
  /* Stats bar: allow closer spacing on iPad landscape */
  .events-stats-bar {
    gap: var(--space-2xl);
  }
}

/* === 768px: iPad Portrait — form grid single column, stats wrap nicely === */
@media (max-width: 768px) {
  /* Event form: all 2-col grids collapse to single column */
  #inquiry .form-grid {
    grid-template-columns: 1fr;
  }

  /* Form inputs: enforce 16px to prevent iOS auto-zoom */
  #inquiry .form-input,
  #inquiry .form-select,
  #inquiry .form-textarea {
    font-size: 16px;
    min-height: 44px;
  }

  /* Submit button: full-width, accessible height */
  #inquiry .btn--gold.btn--lg {
    width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Stats bar: wrap to 2x2 grid on tablet/mobile */
  .events-stats-bar {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2xl) var(--space-xl);
    justify-items: center;
  }

  /* FAQ items: tighter padding */
  .faq-item {
    padding: var(--space-lg) 0;
  }
}

/* === 480px: Large phones — compact form and stats === */
@media (max-width: 480px) {
  /* Event inquiry form */
  #inquiry.section {
    padding: var(--space-2xl) 0;
  }

  #inquiry .form-input,
  #inquiry .form-select,
  #inquiry .form-textarea {
    font-size: 16px;
    min-height: 44px;
    padding: 10px 14px;
  }

  #inquiry .form-label {
    font-size: var(--text-sm);
  }

  /* Stats bar: tighter gap on phones */
  .events-stats-bar {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl) var(--space-lg);
    padding: var(--space-xl) 0 !important;
  }

  .events-stat > div:first-child {
    font-size: var(--text-2xl) !important;
  }

  /* FAQ section */
  .faq-item .heading-sm {
    font-size: var(--text-base);
  }
}

/* === 390px: Standard iPhone — tightest event page layout === */
@media (max-width: 390px) {
  /* Stats bar */
  .events-stats-bar {
    gap: var(--space-lg) var(--space-md);
  }

  .events-stat > div:first-child {
    font-size: var(--text-xl) !important;
  }

  .events-stat > div:last-child {
    font-size: 0.6rem;
  }

  /* Form labels */
  #inquiry .form-label {
    font-size: 0.72rem;
  }
}

/* === 360px: Small Android — minimal adjustments === */
@media (max-width: 360px) {
  .events-stats-bar {
    gap: var(--space-md);
    padding: var(--space-lg) 0 !important;
  }

  #inquiry .form-input,
  #inquiry .form-select,
  #inquiry .form-textarea {
    padding: 8px 12px;
  }
}


/* ============================================================
   RESERVATIONS PAGE — Mobile Responsive Overrides
   Breakpoints: 768px | 480px | 390px | 360px
   ============================================================ */

/* === All breakpoints: prevent iOS zoom on form inputs === */
#reservation-form input,
#reservation-form select {
  font-size: 16px !important;
}

/* === 768px: Tablet — hero fits, form padding starts shrinking === */
@media (max-width: 768px) {
  /* Hero: fits viewport, no overflow */
  .page-hero {
    min-height: 35vh;
    overflow: hidden;
  }

  /* Reservation form container: reduce padding */
  #reservation-form {
    padding: 2rem 1.75rem !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* Date + Time grid: stack to single column
     Targets the grid div with 1fr 1fr columns */
  #reservation-form > div[style*="grid-template-columns:1fr 1fr"],
  #reservation-form > div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Party size buttons: allow wrap, ensure 5 per row */
  #party-selector {
    gap: 0.5rem !important;
    flex-wrap: wrap !important;
  }

  /* Find a Table button: full width (already set inline, reinforce) */
  #reservation-form button[type="submit"] {
    width: 100% !important;
    box-sizing: border-box;
    font-size: 0.75rem !important;
  }

  /* Policy cards: stack to single column */
  .text-center [style*="grid-template-columns:repeat(3,1fr)"],
  .text-center [style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
    gap: var(--space-lg) !important;
  }

  /* Prefer to Call section: buttons wrap nicely */
  .flex-center.gap-xl {
    gap: var(--space-md) !important;
  }
}

/* === 480px: Large Phones — tighter form padding === */
@media (max-width: 480px) {
  /* Form: tighter padding, full width */
  #reservation-form {
    padding: 1.5rem 1.25rem !important;
    border-radius: var(--radius-md) !important;
  }

  /* Party size: ensure 5 per row at ~375px
     5 × 42px + 4 × 0.4rem gap ≈ 210 + 25 = 235px (fits fine) */
  .party-btn {
    width: 42px !important;
    height: 42px !important;
    font-size: 0.85rem !important;
    flex-shrink: 0;
  }

  /* Prefer to Call buttons: full width stack */
  .flex-center.gap-xl .btn--outline {
    width: 100%;
    max-width: 280px;
  }
}

/* === 390px: Standard iPhone === */
@media (max-width: 390px) {
  #reservation-form {
    padding: 1.25rem 1rem !important;
  }

  .party-btn {
    width: 40px !important;
    height: 40px !important;
    font-size: 0.8rem !important;
  }
}

/* === 360px: Small Android === */
@media (max-width: 360px) {
  #reservation-form {
    padding: 1rem 0.875rem !important;
  }

  .party-btn {
    width: 38px !important;
    height: 38px !important;
    font-size: 0.75rem !important;
  }
}


/* ============================================================
   CONTACT PAGE — Additional Mobile Overrides
   (supplements existing rules above)
   Breakpoints: 768px | 480px | 390px | 360px
   ============================================================ */

/* === 768px: Override inline flex on contact-reasons ===
   The element has style="display:flex;justify-content:center;gap:..."
   We must override it to stack cards properly. */
@media (max-width: 768px) {
  /* Override inline flex to 2-col grid */
  .contact-reasons[style] {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    justify-content: unset !important;
    gap: var(--space-lg) !important;
  }

  /* Contact body: enforce single column, no inline override conflict */
  .contact-body[style] {
    grid-template-columns: 1fr !important;
  }

  /* Sidebar stacks below form */
  .contact-sidebar {
    width: 100%;
    box-sizing: border-box;
  }

  /* Visit Lo D'Alex location info cards: stack to 1 col */
  section[aria-label="Visit Lo D'Alex"] .container [style*="grid-template-columns:repeat(3,1fr)"],
  section[aria-label="Visit Lo D'Alex"] .container [style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
    gap: var(--space-lg) !important;
  }

  /* Map: reduce height */
  section[aria-label="Visit Lo D'Alex"] .map-dark-wrap,
  section[aria-label="Visit Lo D'Alex"] [style*="height:500px"] {
    height: 300px !important;
  }

  /* Map floating badge: fit within viewport */
  section[aria-label="Visit Lo D'Alex"] .map-dark-wrap > div[style*="position:absolute"][style*="bottom"] {
    left: 12px !important;
    right: 12px !important;
    transform: none !important;
    flex-wrap: wrap !important;
    padding: 12px 16px !important;
    gap: 10px !important;
    bottom: 12px !important;
    box-sizing: border-box;
    width: calc(100% - 24px) !important;
  }

  /* Nearby landmarks: convert flex to 2x2 grid */
  section[aria-label="Nearby landmarks"] .container[style] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    justify-content: unset !important;
    gap: var(--space-2xl) !important;
    padding: 0 var(--space-lg) !important;
  }

  /* Hide vertical dividers between landmarks */
  section[aria-label="Nearby landmarks"] .container > div[style*="width:1px"] {
    display: none !important;
  }

  /* Visit section: reduce top padding */
  section[aria-label="Visit Lo D'Alex"] {
    padding-top: var(--space-3xl) !important;
  }
}

/* === 480px: Large phones === */
@media (max-width: 480px) {
  /* Contact reasons: 1 column or horizontal scroll strip */
  .contact-reasons[style] {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: var(--space-md) !important;
    padding-bottom: var(--space-sm) !important;
    justify-content: unset !important;
    grid-template-columns: unset !important;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .contact-reasons[style]::-webkit-scrollbar {
    display: none;
  }

  /* Map: reduced height on phones */
  section[aria-label="Visit Lo D'Alex"] .map-dark-wrap,
  section[aria-label="Visit Lo D'Alex"] [style*="height:500px"] {
    height: 280px !important;
  }

  /* Nearby landmarks: tighter gap */
  section[aria-label="Nearby landmarks"] .container[style] {
    gap: var(--space-xl) !important;
    padding: 0 var(--space-md) !important;
  }

  /* Contact sidebar: tighter padding */
  .contact-sidebar {
    padding: var(--space-xl) var(--space-lg);
  }
}

/* === 390px: Standard iPhone === */
@media (max-width: 390px) {
  /* Nearby landmarks: tighter text */
  section[aria-label="Nearby landmarks"] .container[style] > div > div:first-child {
    font-size: var(--text-xl) !important;
  }

  section[aria-label="Nearby landmarks"] .container[style] > div > div:last-child {
    font-size: 0.7rem;
  }
}

/* === 360px: Small Android === */
@media (max-width: 360px) {
  section[aria-label="Nearby landmarks"] .container[style] {
    padding: 0 var(--space-sm) !important;
    gap: var(--space-lg) !important;
  }
}


/* ============================================================
   NAV — Mobile Header Fixes (both pages)
   Ensure: logo (left), reserve button (outline, small), hamburger (right)
   No horizontal overflow at 375–430px
   ============================================================ */

@media (max-width: 768px) {
  /* Nav: no overflow, contained within viewport */
  .nav {
    overflow: visible !important;
    max-width: 100vw;
    box-sizing: border-box;
    padding: 0 var(--space-lg);
  }

  /* Logo: allow shrink but don't let it push others off-screen */
  .nav__logo {
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
  }

  .nav__logo-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    max-width: 120px;
  }

  /* Actions: show reserve button + hamburger, no lang */
  .nav__actions {
    gap: var(--space-sm);
    flex-shrink: 0;
    align-items: center;
  }

  /* Toggle: flex-shrink: 0 ensures it's always visible */
  .nav__toggle {
    flex-shrink: 0;
    margin-left: var(--space-sm);
  }
}

@media (max-width: 480px) {
  .nav {
    padding: 0 var(--space-md);
  }

  .nav__logo-text {
    font-size: var(--text-base);
    max-width: 100px;
  }

  /* Reserve btn: compact outline style */
  .btn--nav {
    padding: 6px 12px !important;
    font-size: 0.6rem !important;
    white-space: nowrap;
    flex-shrink: 0;
  }
}

@media (max-width: 390px) {
  .nav {
    padding: 0 12px;
  }

  .nav__logo-text {
    font-size: var(--text-sm);
    max-width: 88px;
    letter-spacing: 0.03em;
  }

  .btn--nav {
    padding: 6px 10px !important;
    font-size: 0.58rem !important;
  }
}

@media (max-width: 360px) {
  .nav {
    padding: 0 10px;
  }

  .nav__logo-text {
    font-size: 0.75rem;
    max-width: 80px;
  }

  .btn--nav {
    padding: 5px 9px !important;
    font-size: 0.55rem !important;
  }
}

/* ============================================================
   MOBILE NAV — Reserve button centered + LED border animation
   ============================================================ */
@media (max-width: 1023px) {

  /* ── Center the Reserve button in the nav bar ── */
  .nav {
    position: fixed; /* already fixed, just confirm for stacking */
  }

  /* nav__actions sits absolutely centered so logo-left, hamburger-right
     are independent flex items flanking it */
  .nav__actions {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    /* hide lang switcher — only button remains */
  }

  .nav__actions .nav__lang {
    display: none !important;
  }

  /* ── LED border traveling light ── */
  .btn--nav {
    position: relative !important;
    /* Remove original border + background so our pseudo-elements take over */
    border: none !important;
    background: transparent !important;
    /* Keep text gold and above everything */
    color: var(--gold) !important;
    letter-spacing: 0.12em;
    overflow: hidden !important;
    /* Text renders above negative z-index pseudo-elements automatically */
  }

  /* Rotating LED beam — large square centered on button, clipped by overflow:hidden */
  .btn--nav::before {
    content: '';
    position: absolute;
    width: 220px;
    height: 220px;
    top: 50%;
    left: 50%;
    margin: -110px 0 0 -110px;
    background: conic-gradient(
      rgba(200, 164, 74, 0)    0deg,
      rgba(200, 164, 74, 0)    336deg,
      rgba(255, 252, 190, 0.4) 342deg,
      rgba(255, 244, 120, 0.8) 348deg,
      rgba(255, 255, 255, 1)   353deg,
      rgba(255, 244, 120, 0.8) 358deg,
      rgba(255, 252, 190, 0.4) 361deg,
      rgba(200, 164, 74, 0)    364deg
    );
    animation: nav-led-spin 4s linear infinite;
    z-index: -1;
  }

  /* Inner dark fill — 1.5px inset exposes the LED beam only at the border */
  .btn--nav::after {
    content: '';
    position: absolute;
    inset: 1.5px;
    background: rgba(6, 5, 3, 0.96);
    border-radius: 3px;
    z-index: -1;
  }
}


/* ============================================================
   GLOBAL MOBILE — Prevent horizontal scroll, content overflow
   ============================================================ */

@media (max-width: 768px) {
  /* Prevent any horizontal overflow at the root level */
  html, body {
    overflow-x: hidden;
    max-width: 100vw;
  }

  /* All sections: no horizontal overflow */
  .section, .dark-section, .dark-alt-section {
    overflow-x: hidden;
    max-width: 100%;
  }

  /* Container: never wider than viewport */
  .container {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Bottom nav padding — on last section only */
  body {
    padding-bottom: 0;
  }
  .monarca-section {
    padding-bottom: 70px !important;
  }

  /* Mobile bottom nav: always visible, never clipped */
  .mobile-bottom-nav {
    display: flex !important;
  }
}

/* ============================================================
   MOBILE OPTIMIZATION — Comprehensive Pass (2026-03)
   Fixes: text overflow · iOS zoom · events stats · newsletter
          popup · OT modal · grids · form inputs · hero
   ============================================================ */

/* --- 1. Word-wrap all text so nothing clips at viewport edge --- */
p, h1, h2, h3, h4, h5, h6,
.section-subtitle, .body-lg, .body-md,
.hero__subtitle, .heading-lg, .display-xl,
.display-lg, .display-md {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* --- 2. iOS auto-zoom fix: ALL form inputs ≥ 16px on mobile --- */
@media (max-width: 768px) {
  input,
  select,
  textarea {
    font-size: 16px !important;
  }

  /* Prevent inputs from being wider than their container */
  input, select, textarea, button {
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* --- 3. Events page: stats bar → 2×2 grid on phones --- */
@media (max-width: 640px) {
  .events-stats-bar {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--space-2xl) var(--space-xl) !important;
    justify-items: center !important;
    padding: var(--space-2xl) var(--space-lg) !important;
  }

  .events-stat {
    width: 100%;
    text-align: center;
  }
}

/* --- 4. Newsletter popup: compact on phones --- */
@media (max-width: 480px) {
  .newsletter-popup__content {
    padding: var(--space-2xl) var(--space-lg) !important;
    width: 92% !important;
    max-width: none !important;
  }

  .newsletter-popup__title {
    font-size: var(--text-xl) !important;
  }

  .newsletter-popup__form {
    flex-direction: column !important;
    gap: var(--space-sm) !important;
  }

  .newsletter-popup__form input {
    width: 100% !important;
    font-size: 16px !important;
  }

  .newsletter-popup__form .btn {
    width: 100% !important;
  }
}

/* --- 5. OT Modal: taller + full-width on phones --- */
@media (max-width: 480px) {
  #ot-modal .ot-modal__box {
    width: 97% !important;
    height: 88vh !important;
    max-height: none !important;
    border-radius: 10px !important;
  }

  #ot-modal #ot-modal-close {
    top: -12px !important;
    right: -12px !important;
  }

  #ot-iframe {
    border-radius: 0 0 10px 10px !important;
  }
}

/* --- 6. Nightlife wn-grid: single column on standard iPhone (390px) --- */
@media (max-width: 390px) {
  .wn-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
}

/* --- 7. About / Index: two-column grid gap reduced on tablet --- */
@media (max-width: 768px) {
  .grid-2 {
    gap: var(--space-2xl) !important;
  }
}

/* --- 8. Hero subtitle: no overflow on small screens --- */
@media (max-width: 480px) {
  .hero__subtitle {
    font-size: var(--text-base) !important;
    padding: 0 var(--space-sm);
    max-width: 100% !important;
  }

  /* Page hero (inner pages): reduce min-height a bit more */
  .page-hero {
    min-height: 32vh !important;
  }
}

/* --- 9. Reservations form: prevent overflow on phones --- */
@media (max-width: 480px) {
  #res-date, #res-time {
    width: 100% !important;
    font-size: 16px !important;
  }

  /* Party size buttons: wrap properly */
  #party-selector {
    gap: 0.4rem !important;
  }

  .party-btn {
    width: 44px !important;
    height: 44px !important;
    font-size: 0.9rem !important;
  }

  /* Booking form container: full-width */
  .booking-widget {
    padding: var(--space-lg) var(--space-md) !important;
  }
}

/* --- 10. About page: team / stats grids stack correctly --- */
@media (max-width: 640px) {
  /* Any inline-styled 3-col or 4-col grid → 2 cols */
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns:repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 400px) {
  /* On the smallest phones, collapse 2-col inline grids too */
  [style*="grid-template-columns: repeat(2"],
  [style*="grid-template-columns:repeat(2"] {
    grid-template-columns: 1fr !important;
  }
}

/* --- 11. Footer bottom links: wrap cleanly on phones --- */
@media (max-width: 480px) {
  .footer__legal {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: var(--space-sm) var(--space-md) !important;
    text-align: center !important;
  }

  .footer__legal a,
  .footer__legal span {
    font-size: 0.65rem !important;
  }
}

/* --- 12. Mobile bottom nav: safe area inset for notched phones --- */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .mobile-bottom-nav {
    padding-bottom: env(safe-area-inset-bottom) !important;
  }

  body {
    padding-bottom: 0 !important;
  }
}

/* --- 13. Images: never wider than container --- */
img {
  max-width: 100%;
  height: auto;
}

/* --- 14. Inline iframes: responsive --- */
iframe {
  max-width: 100%;
}

/* --- 15. Tables: horizontal scroll on mobile --- */
table {
  max-width: 100%;
  overflow-x: auto;
  display: block;
}

/* ============================================================
   RESERVATIONS PAGE — Mobile: everything fits on first screen
   ============================================================ */
@media (max-width: 768px) {
  /* Hide hero on mobile — jump straight to the form */
  .res-hero {
    min-height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Section: tight top padding = just nav height + small gap */
  .res-booking-section {
    padding-top: calc(var(--nav-height) + 12px) !important;
  }

  /* Header: natural size but reduced margin */
  .res-booking-header {
    margin-bottom: 12px !important;
  }

  /* Hide subtitle */
  .res-subtitle {
    display: none !important;
  }

  /* Form: cut internal padding in half */
  #reservation-form {
    padding: 1.25rem 1.25rem !important;
    margin-bottom: var(--space-xl) !important;
  }

  /* Date/Time row: tighter gap and margin */
  #reservation-form > div:first-of-type {
    gap: 0.75rem !important;
    margin-bottom: 0.875rem !important;
  }

  /* Inputs and selects: shorter height */
  #reservation-form input,
  #reservation-form select {
    padding: 0.6rem 0.75rem !important;
    font-size: 0.9rem !important;
  }

  /* Party size row: tighter */
  #reservation-form [style*="margin-bottom:2rem"] {
    margin-bottom: 0.875rem !important;
  }

  /* Party size buttons: smaller (override inline style) */
  #party-selector .party-btn {
    width: 36px !important;
    height: 36px !important;
    font-size: 0.82rem !important;
  }

  #party-selector {
    gap: 0.4rem !important;
  }
}

/* ============================================================
   MONARCA SECTION — Mobile: smaller button, near the bottom
   ============================================================ */
@media (max-width: 768px) {
  /* Monarca section — matches components.css mobile rules */
  .monarca-section { position: relative !important; }
  .monarca-img {
    width: 100% !important;
    height: 70vw !important;
    object-fit: cover !important;
    object-position: center !important;
  }
  .monarca-cta {
    position: absolute !important;
    bottom: 30% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: none !important;
    padding: 0 !important;
    z-index: 2 !important;
  }
  .monarca-cta .monarca-btn:first-child {
    display: none !important;
  }
  .monarca-btn {
    padding: 14px 28px !important;
    font-size: 0.68rem !important;
    letter-spacing: 0.12em !important;
    min-width: 140px !important;
    opacity: 1 !important;
    transform: none !important;
  }
}