/* v12-28, phones only: anchoring instead of per-screen pixel offsets. Same look as v12-27 (text over the
   pictures, same shading, colours and type); only the sizing and anchoring rules change.
   --music-fill / --rail-fill: visible height left for the cards, measured on the device (layout-fit-v1.js).
   --fab-lane: height of the floating Book tickets lane above each card's bottom edge. */
@media (max-width:600px){
  /* Music and People cards fill the visible screen. */
  .event-page.music-swipe-ready .music-track>section{min-height:var(--music-fill,calc(100svh - 178px))}

  /* The music: the photo takes the space left; the text keeps its size and ends above the button lane. */
  .event-page.music-swipe-ready .music-track>.music-scene{display:flex;flex-direction:column}
  .event-page.music-swipe-ready .music-scene .music-image{flex:1 1 auto;display:flex;flex-direction:column;min-height:110px}
  .event-page.music-swipe-ready .music-scene .photo-frame{flex:1 1 auto;height:auto;min-height:110px}
  .event-page.music-swipe-ready .music-scene .music-copy{flex:none;padding-bottom:var(--fab-lane,64px)}

  /* The people: the portrait fills the card down to the button lane. The title is anchored to the top of the
     picture and the closing lines to its bottom, so they stay on the image on every phone. */
  .event-page.music-swipe-ready .music-track>.audience-scene{display:flex;flex-direction:column}
  .event-page.music-swipe-ready .audience-scene .people-hero{flex:none;height:calc(var(--music-fill,calc(100svh - 178px)) - 2px);min-height:0;position:relative}
  .event-page.music-swipe-ready .audience-scene .people-hero .audience-art{position:absolute;top:0;left:0;right:0;bottom:var(--fab-lane,64px);height:auto;aspect-ratio:auto;margin:0;align-self:stretch;justify-self:stretch}
  .event-page.music-swipe-ready .audience-scene .people-caption{position:absolute;left:0;right:0;bottom:calc(var(--fab-lane,64px) + 4px);margin:0;padding-bottom:0}

  /* Afternoon panels fill the visible screen; the picture takes the space left (title stays on it) and
     the text ends above the button lane. */
  .event-page .programme-track>.programme-panel{display:flex;flex-direction:column;min-height:var(--rail-fill,calc(100svh - 300px))}
  .event-page .programme-scene .programme-panel .panel-image{flex:1 1 auto;height:auto;min-height:150px}
  .event-page .programme-scene .programme-panel .panel-copy{flex:none;padding-bottom:var(--fab-lane,64px)}
  /* The per-screen "wrap beside the button" fixes are no longer needed. */
  .event-page .listen-panel .panel-copy>p:first-of-type,.event-page .table-panel .panel-copy>p:not(.panel-label){max-width:none}
}
/* Short screens (iPhone SE, small Androids with browser bars): pictures may shrink further so text fits. */
@media (max-width:600px) and (max-height:700px){
  .event-page .programme-scene .programme-panel .panel-image{min-height:112px}
  .event-page.music-swipe-ready .music-scene .music-image,.event-page.music-swipe-ready .music-scene .photo-frame{min-height:96px}
}
/* iPhone Safari: text pinned over the portrait inside the sideways music/people slider could fail to paint
   when the card slides in. Give the card its own stacking context, keep the picture underneath and put the
   title and closing lines on their own layer on top. Same look on every browser. */
@media (max-width:600px){
  .event-page.music-swipe-ready .audience-scene .people-hero{isolation:isolate}
  .event-page.music-swipe-ready .audience-scene .people-hero .audience-art{z-index:0}
  .event-page.music-swipe-ready .audience-scene .people-title,
  .event-page.music-swipe-ready .audience-scene .people-caption{z-index:2;-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}
}
/* The shade behind the closing lines travels with the text, not with a percentage of the portrait, so the
   lines stay readable wherever they land on the picture (taller screens put them over the white coat).
   Same soft overlay as before: it fades in from transparent above the text, no box. */
@media (max-width:600px){
  .event-page.music-swipe-ready .audience-scene .people-caption::before{content:'';position:absolute;z-index:-1;left:0;right:0;top:-72px;bottom:calc(-1 * var(--fab-lane,64px) - 4px);background:linear-gradient(180deg,#102c2700 0%,#102c278c 26%,#102c27d9 48%,#102c27f2 70%,#102c27 100%);pointer-events:none}
}
/* iPhone Safari draws the portrait on its own layer inside the rounded card and can put it above the
   shading (::after), so the shading behind the title and closing lines vanished on iPhone only. Lift the
   shading onto its own layer above the picture; text stays above both. */
@media (max-width:600px){
  .event-page.music-swipe-ready .audience-scene .people-hero .audience-art img{position:relative;z-index:0}
  .event-page.music-swipe-ready .audience-scene .people-hero .audience-art::after{z-index:1;-webkit-transform:translateZ(0);transform:translateZ(0)}
}