/*
 * Musical Compass V111.0 — iPhone / smartphone hardening
 * Scope: <= 767px only. Desktop / notebook presentation stays locked.
 * Purpose: prevent horizontal page drift, iOS form zoom, min-content grid overflow,
 * and accidental horizontal card-scrolling that feels like the whole page moved.
 */
@media (max-width: 767px) {
  html {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }

  *, *::before, *::after {
    box-sizing: border-box;
  }

  /* Flex/grid children are allowed to shrink instead of forcing the viewport wider. */
  main, section, article, header, footer, nav,
  .container, .site-header, .site-footer,
  .compass-shell, .compass-panel, .compass-step,
  .show-editorial, .show-hero-grid, .show-hero-copy, .show-hero-art,
  .editorial-section, .feature-grid, .personal-match-box,
  .result-main, .result-alt-grid, .result-alt-card,
  .experience-v109, .experience-v109-grid, .experience-v109-card,
  .ticket-section, .ticket-section > *,
  [class*="grid"], [class*="panel"], [class*="card"] {
    min-width: 0;
  }

  img, svg, video, canvas, iframe {
    max-width: 100%;
  }

  /* Long titles/labels may wrap, but ordinary body copy keeps normal word boundaries. */
  h1, h2, h3, h4, h5, h6,
  .section-kicker, .mc-affiliate-disclosure,
  .footer-links, .footer-meta,
  .result-alt-card, .travel-card {
    overflow-wrap: break-word;
    word-break: normal;
  }

  /* iOS Safari auto-zooms fields below 16px. Keep the viewport stable on focus. */
  input, select, textarea {
    font-size: 16px !important;
    max-width: 100%;
  }

  /* Buttons must never create min-content overflow on a narrow phone. */
  .btn,
  .ticket-section .btn,
  .compass-nav .btn,
  .hero-actions .btn,
  .profile-next-link,
  .travel-actions a {
    max-width: 100%;
    white-space: normal !important;
    text-align: center;
    overflow-wrap: anywhere;
  }

  /* Header: preserve the approved logo, but never let its historic min-widths push the page. */
  .site-header .nav {
    min-width: 0 !important;
    max-width: 100%;
  }

  .site-header .brand,
  .site-header .brand.brand-v084,
  .site-header .brand.brand-lockup {
    min-width: 0 !important;
    width: min(194px, calc(100vw - 86px)) !important;
    max-width: calc(100vw - 86px) !important;
    flex: 0 1 auto !important;
  }

  .site-header .brand-logo-v084,
  .site-header .brand-logo-full {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  .mobile-toggle {
    flex: 0 0 auto;
    margin-left: auto;
  }

  .nav-links.mobile-open {
    left: max(16px, env(safe-area-inset-left)) !important;
    right: max(16px, env(safe-area-inset-right)) !important;
    width: auto !important;
    max-width: calc(100vw - 32px) !important;
  }

  .site-footer .brand,
  .site-footer .brand.brand-v084 {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .site-footer .brand-logo-v084,
  .site-footer .brand-logo-full {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Show detail pages: the ticket block had a min-content overflow on very narrow iPhones. */
  .show-hero-copy h1 {
    font-size: clamp(2.5rem, 13vw, 3.4rem) !important;
    overflow-wrap: anywhere;
  }

  .ticket-section {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 16px !important;
    padding: 22px 18px !important;
  }

  .ticket-section > * {
    width: 100%;
    max-width: 100%;
  }

  .ticket-section .btn {
    width: 100%;
    justify-content: center;
  }

  .dna-row {
    grid-template-columns: minmax(74px, 90px) minmax(0, 1fr) 30px !important;
    gap: 8px !important;
  }

  /* Results and alternatives must collapse rather than preserve desktop min-content widths. */
  .result-main {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .result-main > div {
    min-width: 0;
  }

  .result-main h1 {
    font-size: clamp(2.45rem, 12vw, 3rem) !important;
    overflow-wrap: anywhere;
  }

  .result-alt-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .result-alt-card > * {
    min-width: 0;
  }

  /* The mobile experience strip used horizontal scrolling; use a stable vertical stack instead. */
  .experience-v109-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
    padding-bottom: 0 !important;
  }

  .experience-v109-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 300px !important;
    scroll-snap-align: none !important;
  }

  /* Generic rich-content safety. Tables can scroll inside themselves, never the whole page. */
  main table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  pre, code {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 360px) {
  .show-hero-copy h1 {
    font-size: clamp(2.25rem, 12.5vw, 2.85rem) !important;
  }

  .ticket-section {
    padding: 20px 15px !important;
  }

  .site-header .brand,
  .site-header .brand.brand-v084,
  .site-header .brand.brand-lockup {
    width: min(180px, calc(100vw - 82px)) !important;
    max-width: calc(100vw - 82px) !important;
  }
}

/* Moulin Rouge uses an internal sticky tab bar; wrap it on phones so no tab is off-canvas. */
@media (max-width: 767px) {
  .mr-tabs .mr-container {
    display: flex !important;
    flex-wrap: wrap !important;
    overflow: visible !important;
    gap: 0 !important;
  }

  .mr-tabs a {
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal !important;
    text-align: center;
    padding: 10px 8px !important;
    line-height: 1.15;
  }
}

/* Travel pages: force the collapsed hero grid to use a shrinkable track on very narrow phones. */
@media (max-width: 767px) {
  .travel-hero-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .travel-hero-grid > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

/* V112.0 · room for the permanent Harry-Potter navigation entry */
@media (min-width: 981px) {
  .site-header .nav {
    gap: 16px !important;
  }

  .site-header .brand.brand-v084 {
    min-width: 280px !important;
    width: 280px !important;
    flex-basis: 280px !important;
  }

  .site-header .brand-logo-v084 {
    width: 274px !important;
    max-width: 274px !important;
  }

  .site-header .nav-links {
    gap: 13px !important;
    font-size: .75rem !important;
    white-space: nowrap;
  }

  .site-header .nav-cta {
    max-width: 124px !important;
    padding-inline: 13px !important;
    font-size: .68rem !important;
  }
}

@media (min-width: 981px) and (max-width: 1180px) {
  .site-header .brand.brand-v084 {
    min-width: 248px !important;
    width: 248px !important;
    flex-basis: 248px !important;
  }

  .site-header .brand-logo-v084 {
    width: 242px !important;
    max-width: 242px !important;
  }

  .site-header .nav-cta {
    display: none !important;
  }
}