/* v12-19: phones only, Afternoon section. The chapter tabs already switch panels, so the 1/4 arrows go;
   heading a touch smaller and panel pictures shorter so panel text sits clear of the floating Book button.
   (v12-18's Home and People changes were withdrawn at the user's request.) */
@media (max-width:600px){
  .programme-scene .rail-controls{display:none}
  .programme-heading h2{font-size:28px}
  .programme-scene .rail-toolbar{margin-bottom:8px}
  .programme-scene .panel-image{height:184px}
}
@media (max-width:600px) and (max-height:760px){
  .programme-scene .panel-image{height:164px}
}

/* v12-20: People, phones only. The two closing lines move up onto the bottom of the portrait, on a soft shade,
   so they are visible above the floating Book tickets button. The title, image and everything else stay as v12-17. */
@media (max-width:600px){
  .audience-scene .people-caption{position:relative;z-index:2;margin-top:-72px}
  .audience-scene .audience-art:after{background:linear-gradient(180deg,#102c27f0 0%,#102c27cc 24%,#102c2766 36%,transparent 46%,transparent 72%,#102c27b3 86%,#102c27 100%)}
}

/* v12-21: the footer stays put while swiping. Every card in a set takes the height of the tallest one. */
@media (max-width:600px){
  .programme-track{align-items:stretch}
  /* the extra height of a shorter card goes below its text, so the text keeps its place under the picture */
  .programme-panel{grid-template-rows:auto 1fr}
  .programme-panel .panel-copy{justify-content:flex-start}
}
@media (max-width:900px), (max-width:1100px) and (max-height:500px){
  .music-swipe-ready .music-track{align-items:stretch}
}
/* v12-21: Home, phones only. Slightly tighter opening so the facts line sits higher, clear of the floating button. */
@media (max-width:600px){
  .hero-copy{padding-bottom:16px}
  .hero-actions{margin-top:12px}
  .booking-note{margin-top:6px}
  .hero-facts{padding-top:12px}
}

/* v12-21: a sideways swipe never triggers the browser's own back/forward gesture on the page itself. */
html,body,.page-scroll{overscroll-behavior-x:none}
/* Sideways finger moves on the page itself belong to the chapter swipe, not the browser's back gesture.
   The card rails are their own scroll containers, so their native sideways swipe is unaffected. */
@media (pointer:coarse){.page-scroll{touch-action:pan-y pinch-zoom}}
.rail-viewport,.music-viewport{overscroll-behavior-x:contain}

/* v12-22: phones. Music and Afternoon cards fill the screen so the footer starts below it on arrival.
   The extra height goes to the pictures; text keeps clear of the floating Book tickets button (about 70px
   at the bottom right), and small phones (where cards already fill the screen) are unchanged. */
@media (max-width:600px){
  .music-swipe-ready .music-track>section{min-height:calc(100svh - 178px)}
  .music-swipe-ready .music-scene .photo-frame{height:max(clamp(155px,29svh,205px),calc(100svh - 478px))}
  .music-swipe-ready .people-hero .audience-art{height:max(clamp(380px,61svh,550px),calc(100svh - 318px))}
  .music-swipe-ready .people-hero .audience-art img{object-fit:cover;object-position:center 30%}

  .programme-panel{min-height:calc(100svh - 300px)}
  .programme-scene .panel-image{height:clamp(184px,calc(100svh - 560px),340px)}
}
@media (max-width:600px) and (max-height:760px){
  .programme-scene .panel-image{height:164px}
}