/* ==========================================================================
   Phone layout pass (<=860px), added after the frozen stylesheet.
   Client feedback, 3 September 2026: the show cards zoom and expand, the
   "where we perform" tabs do not fit, and the two marquees scroll past on
   their own. On a phone these become static, correctly sized blocks and
   swipeable carousels. Nothing here loads above 860px, and no markup changes.
   Several targets carry inline styles from the approved build, so the
   overrides below need !important; each one is marked with the reason.
   ========================================================================== */
@media (max-width: 860px) {

  /* ---- 1. Show cards: static, phone-sized, no hover growth ------------- */
  .uf-show {
    flex: 0 0 auto !important;          /* base rule is flex:0 0 960px */
    height: auto !important;            /* was a 960px square on a 375px screen */
    min-height: 0 !important;
    transition: none !important;        /* kills the flex-basis expand */
    border-radius: 28px !important;
  }
  /* Two different cards share these classes. The chooser card carries a copy block; the all-shows page also
     uses artwork-only cards with no copy at all, which would collapse to nothing once the fixed height goes.
     Give those their shape back from the artwork's own proportions. */
  .uf-show--disco:not(:has(.uf-show-body)),
  .uf-show--decades:not(:has(.uf-show-body)) {
    /* one value covers every layer: gradients have no intrinsic size, so contain leaves them filling the box */
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
  }
  .uf-show--disco:not(:has(.uf-show-body))   { aspect-ratio: 1440 / 1018; }
  .uf-show--decades:not(:has(.uf-show-body)) { aspect-ratio: 1600 / 1454; }
  /* the show name and its script partner sit on one line by default and clip at this width */
  .uf-show-body .uf-col { flex-wrap: wrap !important; row-gap: 2px; }
  .uf-show-name { font-size: 30px !important; }
  .uf-show-script--disco, .uf-show-script--decades { font-size: 23px !important; }
  /* The chooser artwork is a logo, not a photograph, so cropping it to fill cuts the wordmark in half.
     Only the last layer is the artwork; the four gradients above it fill the box whatever the size. */
  .uf-show--disco:has(.uf-show-body),
  .uf-show--decades:has(.uf-show-body) {
    background-size: auto, auto, auto, auto, contain !important;
    background-position: center, center, center, center, center top !important;
    background-repeat: no-repeat !important;
  }
  .uf-shows:hover .uf-show,
  .uf-shows:hover .uf-show:hover,
  .uf-inferno .uf-shows:hover .uf-show,
  .uf-inferno .uf-shows:hover .uf-show:hover,
  .uf-fs-band .uf-shows:hover .uf-show,
  .uf-fs-band .uf-shows:hover .uf-show:hover {
    flex-basis: auto !important;        /* a tap leaves :hover stuck on touch */
  }
  .uf-shows { gap: 18px; }
  .uf-show-body,
  .uf-inferno .uf-show-body,
  .uf-fs-band .uf-show-body {
    position: static !important;        /* base rule pins it at left:80px top:210px */
    width: 100% !important;
    max-width: 100% !important;
    padding: 26px 22px 28px !important;
    gap: 18px !important;
  }
  /* Where artwork sits behind the copy, clear it exactly: its rendered height is the card width times the ratio. */
  .uf-show--disco:has(.uf-show-body)   .uf-show-body { padding-top: calc(70.7% + 14px) !important; }  /* 1440x1018 */
  .uf-show--decades:has(.uf-show-body) .uf-show-body { padding-top: calc(90.9% + 14px) !important; }  /* 1600x1454 */
  .uf-show .uf-cta { width: 100%; justify-content: center; }
  /* Where the artwork carries the show's name, the text wordmark under it reads as a duplicate. Hide it from
     sight but keep it for screen readers, which have no access to a background image. Cards without artwork
     (the all-shows page) keep their visible name. */
  .uf-show--disco:has(.uf-show-body) .uf-show-name,
  .uf-show--disco:has(.uf-show-body) .uf-show-script--disco,
  .uf-show--decades:has(.uf-show-body) .uf-show-name,
  .uf-show--decades:has(.uf-show-body) .uf-show-script--decades {
    position: absolute !important;
    width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }

  /* ---- 2. Where we perform: wrapped tabs, panel that grows ------------- */
  .uf-perform-card { height: auto !important; min-height: 0 !important; border-radius: 24px !important; }
  .uf-perform-side { display: none !important; }   /* empty spacer column on phones */
  .uf-perform-tabs {
    position: static !important;        /* base rule is absolute, 402px wide */
    width: 100% !important;
    max-width: 100% !important;
    padding: 18px 16px 8px !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    overflow: visible !important;
  }
  /* the frozen sheet styles these as `.uf-perform-tabs [data-tab]`, so use the same shape to win on order */
  .uf-perform-tabs [data-tab] {
    height: auto !important;            /* inline style sets height:104px */
    flex: 1 1 calc(50% - 4px) !important;
    gap: 8px !important;
    padding: 10px 12px !important;
    border-radius: 999px !important;
    background: rgba(20, 18, 16, .55);
    box-shadow: inset 0 0 0 1px rgba(255, 180, 80, .22);
    justify-content: center !important;
  }
  .uf-perform-tabs [data-tab][aria-selected="true"] {
    background: linear-gradient(90deg, rgba(255, 138, 31, .28), rgba(255, 45, 26, .22));
    box-shadow: inset 0 0 0 1px rgba(255, 180, 80, .55);
  }
  .uf-perform-tabs [data-tab] > span:first-child { font-size: 12px !important; opacity: .8; }
  .uf-perform-tabs [data-tablabel] { font-size: 19px !important; line-height: 1.05 !important; }
  .uf-perform-panel {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    border-radius: 0 0 24px 24px !important;
  }
  /* The frozen stylesheet already stacks these panels with `.uf-perform-panel [data-tpanel] > div`,
     which outranks a `> div > div` selector, so match its shape and let source order decide. */
  .uf-perform-panel [data-tpanel] {
    min-height: 0 !important;           /* the copy sets the height, so no photo strip is left over */
    background-size: cover !important;
    background-position: center 22% !important;
  }
  .uf-perform-panel [data-tpanel] > div {
    padding: 214px 20px 26px !important;
    /* a clear band of photograph, a short fade, then a solid ground so the copy is properly legible */
    background: linear-gradient(180deg, rgba(8, 6, 10, 0) 0, rgba(8, 6, 10, 0) 176px, rgba(8, 6, 10, .93) 208px, rgba(8, 6, 10, .97) 100%) !important;
  }
  .uf-perform-panel .uf-arrowlink { margin-top: 4px; }

  /* ---- 3 and 4. Marquees become swipeable carousels -------------------- */
  /* The photo strip: viewport scrolls, track stops animating, cards fit the phone. */
  .uf-strip-vp {
    height: auto !important;
    min-height: 0 !important;
    overflow-x: auto !important;        /* base rule is overflow:hidden */
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .uf-strip-vp::-webkit-scrollbar { display: none; }
  .uf-strip-track {
    position: relative !important;      /* base rule is absolute, top:-45px */
    top: 0 !important;
    animation: none !important;
    padding: 0 20px !important;
    gap: 14px !important;
  }
  .uf-strip-track > * {
    width: calc(100vw - 64px) !important;   /* inline styles are 397px and 440px */
    height: 400px !important;
    border-radius: 26px !important;
    scroll-snap-align: center;
  }
  .uf-strip-track > * > span { left: 22px !important; bottom: 22px !important; }

  /* The Instagram ticker: same treatment, arrows added by uf-mobile.js. */
  .uf-ig-mq { overflow-x: auto !important; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .uf-ig-mq::-webkit-scrollbar { display: none; }
  .uf-ig-track { animation: none !important; gap: 14px !important; padding: 0 20px; }
  .uf-ig-card { width: calc(100vw - 72px) !important; scroll-snap-align: center; }
  .uf-ig-ph { width: 100% !important; height: 300px !important; min-height: 0 !important; }

  /* The decades page carries a third marquee, a row of venue cards in a viewport 480px wider than the
     screen with negative margins. Same treatment: swipe it. */
  .uf-dd-navvp {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow-x: auto !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .uf-dd-navvp::-webkit-scrollbar { display: none; }
  .uf-dd-navtrack { animation: none !important; gap: 12px; padding: 0 20px; }
  .uf-dd-navcard { scroll-snap-align: center; }

  /* ---- 5. Headings that are told never to wrap, and so run off the screen ---- */
  .uf-script-accent { white-space: normal !important; max-width: 100%; }
  .uf-titlerow { flex-wrap: wrap !important; max-width: 100%; }
  .uf-d2-head, .uf-d2-lead { max-width: 100% !important; }

  /* The production page's main heading carries an inline font-size of 116px and a no-wrap rule, so it ran
     1,461px wide and its second line was clipped off the screen. An !important declaration outranks the
     inline value; the size matches what every other page's closing heading already uses on a phone. */
  .uf-final-script {
    font-size: clamp(44px, 7vw, 86px) !important;
    white-space: normal !important;
    width: auto !important;
    max-width: 100% !important;
  }

  /* ---- 6. Labels that shrink below a readable size, and tap targets under 44px ---- */
  .uf-stat-label { font-size: 12.5px !important; }
  .uf-ig-view { font-size: 12.5px !important; }
  [data-uf="mutelabel"] { font-size: 12.5px !important; }
  .uf-foot-link { min-height: 40px; display: flex; align-items: center; }
  .uf-foot-legallink { min-height: 40px; display: inline-flex; align-items: center; }
  .uf-lineup-name { min-height: 40px; display: inline-flex; align-items: center; }
  .uf-link.uf-arrowlink { min-height: 44px; display: inline-flex; align-items: center; }
  .uf-choice-link, .uf-date-title, .uf-sc-follow { min-height: 40px; display: inline-flex; align-items: center; }

  /* Carousel furniture built by uf-mobile.js (no markup in the page source). */
  /* The dot is 7px, well under the 24px minimum touch target, and at a 7px gap the targets of neighbouring
     dots would overlap. The gap gives each one room and the ::before extends the tappable area to 24x24
     without changing how big the dot looks. */
  .uf-mdots { display: flex; justify-content: center; align-items: center; gap: 18px; margin: 14px 0 0; padding: 0; list-style: none; }
  .uf-mdot { position: relative; width: 7px; height: 7px; border-radius: 50%; border: 0; padding: 0; background: rgba(240, 214, 168, .32); transition: width .25s, background .25s; }
  .uf-mdot::before { content: ''; position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; transform: translate(-50%, -50%); }
  .uf-mdot[aria-current="true"] { width: 22px; border-radius: 4px; background: linear-gradient(90deg, #ffc946, #ff5a1e); }
  .uf-mnav { display: flex; justify-content: center; gap: 12px; margin-top: 14px; }
  .uf-mnav button {
    width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    background: rgba(20, 18, 16, .6); box-shadow: inset 0 0 0 1px rgba(255, 180, 80, .35);
    color: #ffb627;
  }
  .uf-mnav button:disabled { opacity: .35; }
  .uf-mnav svg { display: block; }
}

/* Someone who asks for less motion gets no marquee at any width. */
@media (prefers-reduced-motion: reduce) {
  .uf-strip-track, .uf-ig-track { animation: none !important; }
}