/* Phone readability only. Desktop and all motion modules remain unchanged. */
@media (max-width: 767px) {
  .hero-copy .lead { font-size: 1.9rem; line-height: 1.45; }
  .eyebrow { font-size: 1.4rem; line-height: 1.4; }
  .dates { font-size: 1.6rem; line-height: 1.4; }
  .hero-copy > p:has([data-price]) { font-size: 1.72rem; line-height: 1.45; }
  .small { font-size: 1.52rem; line-height: 1.45; }
  .intro > p:last-child { font-size: 2rem; line-height: 1.45; }
  .session .date { font-size: 1.56rem; line-height: 1.4; }
  .session p:last-child { font-size: 1.7rem; line-height: 1.45; max-width: none; }
  .details li, .contact > div > p:last-child { font-size: 1.7rem; line-height: 1.45; }
  .details .price, .details [data-location], .reservation > p:not(.eyebrow):not(.small) { font-size: 2rem; line-height: 1.45; }
  .field label { font-size: 1.5rem; line-height: 1.4; margin-bottom: 10px; }
  .field label span { font-size: 1.4rem; }
  .field input, .field textarea { font-size: 2rem; line-height: 1.4; padding: 14px; min-height: 64px; }
  .button { font-size: 1.15rem; line-height: 1.35; max-width: 100%; gap: 12px; padding: 16px 18px; min-height: 58px; }
  .hero-copy > p, .intro > p, .contact > div > p, .reservation > p { margin-bottom: 24px; }
  .session { padding-top: 28px; }
  .sessions { gap: 44px; }
  .details li { padding: 16px 0; }
  .field { margin-bottom: 26px; }
  .form-status { margin-top: 14px; }
  footer { font-size: 1.3rem; line-height: 1.45; }
  /* Reserve real space for the larger placeholder caption below the play glyph. */
  .video-area > p { position: relative; inset: auto; margin: 20px 20px 24px; font-size: 1.5rem; line-height: 1.4; text-align: center; }
  .video-area .play { flex-shrink: 0; margin-top: 24px; }
  .video-area { aspect-ratio: auto; min-height: 220px; }
  /* Content spacing only: no reel widths, gaps, gates or scroll values change. */
  :is(#workshop-gallery, #instructor-gallery) [data-lego-phr="eyebrow"] { font-size: 2rem; line-height: 1.2; white-space: normal; }
  :is(#workshop-gallery, #instructor-gallery) [data-lego-phr="desc"] { font-size: 2rem; line-height: 1.45; }
  :is(#workshop-gallery, #instructor-gallery) [data-lego-phr="counter"] { font-size: 2rem; line-height: 1.2; }
  :is(#workshop-gallery, #instructor-gallery) .s-progress-label { font-size: 1.52rem; line-height: 1.3; letter-spacing: .07em; }
  :is(#workshop-gallery, #instructor-gallery) [data-lego-phr="progress-row"] { flex-wrap: wrap; gap: 10px; }
  :is(#workshop-gallery, #instructor-gallery).lego-msr-active [data-lego-phr="track"] { padding-bottom: 10rem; }
}

/* Major phone headings only; previously approved supporting type is unchanged. */
@media (max-width: 767px) {
  .hero-copy h1 { font-size: min(4rem, 17.1vw); line-height: 1.04; margin-bottom: 38px; }
  .intro h2, #sessions-title { font-size: 3.6rem; line-height: 1.08; }
  .reservation h2 { font-size: 4rem; line-height: 1.08; }
  .details h2, .contact h2 { font-size: 2.4rem; line-height: 1.12; margin-bottom: 24px; }
  :is(#workshop-gallery, #instructor-gallery) .s-progress-label { font-size: min(3.04rem, 11.4vw); line-height: 1.1; max-width: 100%; }
  /* Keep the enlarged section title clear of the moving photos. Motion unchanged. */
  :is(#workshop-gallery, #instructor-gallery).lego-msr-active [data-lego-phr="track"] { padding-bottom: 15rem; }
}


/* First-screen hero: reserve room for the full title in the small viewport. */
@media (max-width: 767px) {
  .hero-copy > .eyebrow { display: none; }
  .hero-art { height: auto; min-height: 0; aspect-ratio: auto; }
  .hero-art img { position: static; display: block; width: 100%; height: auto; max-height: min(52svh, 420px); object-fit: contain; }
  .hero-copy { padding-top: 16px; }
  .hero-copy h1 { margin-top: 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
}