/* =========================================================
   v6.49 — iPhone mobile QA corrections
   Keeps laptop/iPad designs intact; fixes issues visible on iPhone Pro.
   ========================================================= */
@media (max-width:700px){
  html,body{
    max-width:100%;
    overflow-x:hidden;
  }

  /* Smart header stays compact when it returns while scrolling. */
  header{
    height:70px!important;
    min-height:70px!important;
    padding:0!important;
  }
  header .wrap.nav{
    height:70px!important;
    min-height:70px!important;
    width:calc(100% - 28px)!important;
  }
  header .brand-logo{
    width:142px!important;
    min-width:142px!important;
    max-height:42px!important;
  }
  header .brand-logo img{
    width:142px!important;
    height:auto!important;
    max-height:42px!important;
    object-fit:contain!important;
  }
  header.smart-scrolled{
    background:rgba(20,19,17,.97)!important;
    -webkit-backdrop-filter:blur(12px) saturate(115%);
    backdrop-filter:blur(12px) saturate(115%);
  }
  html:not([data-theme="dark"]) header.smart-scrolled{
    background:rgba(246,242,233,.97)!important;
  }
  header .links{
    top:70px!important;
    max-height:calc(100svh - 82px)!important;
  }

  /* Method lab: no clipped tabs or desktop two-column workspace on phones. */
  .method-lab{
    overflow:visible!important;
  }
  .real-score-lab{
    width:100%!important;
    max-width:100%!important;
    overflow:hidden!important;
  }
  .real-score-lab .practice-stage-nav{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    width:100%!important;
    overflow:visible!important;
    scroll-snap-type:none!important;
  }
  .real-score-lab .practice-stage{
    width:auto!important;
    min-width:0!important;
    min-height:88px!important;
    padding:16px 14px!important;
    border-bottom:1px solid var(--line)!important;
  }
  .real-score-lab .practice-stage:nth-child(2n){
    border-right:0!important;
  }
  .real-score-lab .practice-stage strong{
    font-size:1rem!important;
    line-height:1.12!important;
    overflow-wrap:normal!important;
  }

  .practice-workspace{
    display:grid!important;
    grid-template-columns:1fr!important;
    min-height:0!important;
  }
  .real-score-workspace,
  .working-score{
    min-height:360px!important;
    height:auto!important;
    padding:22px 14px 18px!important;
    border-right:0!important;
    border-bottom:1px solid var(--line)!important;
    overflow:hidden!important;
  }
  .score-state{
    min-height:280px!important;
    width:100%!important;
  }
  .score-state img,
  .score-state video{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    max-height:330px!important;
    object-fit:contain!important;
  }
  .method-demo-video{
    background:#151411!important;
  }
  .score-caption{
    flex-wrap:wrap!important;
    gap:7px 14px!important;
    margin-top:14px!important;
  }
  .practice-explanation{
    display:block!important;
    width:100%!important;
    box-sizing:border-box!important;
    padding:30px 20px 34px!important;
  }
  .practice-copy h3{
    font-size:clamp(2rem,9vw,2.65rem)!important;
    line-height:1!important;
  }
  .practice-copy p{
    max-width:none!important;
  }

  /* Performance page: long titles and dates stay inside viewport. */
  .concert-dates,
  .performance-copy,
  .performance-copy h3,
  .performance-copy p,
  .performance-copy em,
  .performance-copy strong{
    max-width:100%!important;
    min-width:0!important;
    overflow-wrap:break-word;
  }
  .concert-dates strong{
    font-size:1.15rem!important;
    line-height:1.2!important;
  }
  .performance-story{
    min-width:0!important;
    overflow:hidden!important;
  }
  .performance-copy h3{
    font-size:clamp(3.45rem,15vw,4rem)!important;
  }

  /* Matias programme: do not squeeze a two-column printed programme into 350px.
     Keep it readable at a sensible width and let the visitor swipe across it. */
  .programme-panel{
    min-width:0!important;
    overflow:visible!important;
  }
  .programme-image-scroll{
    width:100%!important;
    max-width:100%!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-inline:contain;
    margin:4px 0 16px;
    padding-bottom:8px;
  }
  .programme-image-scroll:before{
    content:"Swipe to read the programme";
    display:block;
    margin:0 0 10px;
    font:.62rem var(--sans);
    letter-spacing:.11em;
    text-transform:uppercase;
    color:var(--grey);
  }
  .programme-image-scroll img{
    display:block!important;
    width:720px!important;
    max-width:none!important;
    height:auto!important;
    margin:0!important;
    border:1px solid var(--line);
  }

  /* Homepage performance transition: prevent large type from feeling cramped. */
  .performance-bridge h3{
    font-size:clamp(2.65rem,11.5vw,3.15rem)!important;
    line-height:1!important;
  }

  /* Generic containment for editorial grids and cards on small screens. */
  .wrap,
  .performance-combined,
  .performance-mosaic,
  .concert-collage,
  .faculty-page,
  .contact-choice-grid,
  .quote-layout,
  .form-grid{
    min-width:0!important;
    max-width:100%!important;
  }
}


/* v6.50 — homepage performance mosaic: true contained 2×2 mobile grid */
@media (max-width:700px){
  .performance-combined{
    overflow:hidden!important;
  }
  .performance-combined > .wrap{
    width:calc(100% - 40px)!important;
    max-width:none!important;
    margin-left:auto!important;
    margin-right:auto!important;
    box-sizing:border-box!important;
  }
  .performance-mosaic{
    width:100%!important;
    max-width:100%!important;
    margin:38px auto 0!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-template-rows:190px 190px!important;
    gap:8px!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }
  .performance-mosaic figure,
  .performance-mosaic .programmes,
  .performance-mosaic .student,
  .performance-mosaic figure:nth-child(3),
  .performance-mosaic figure:nth-child(4){
    grid-column:auto!important;
    grid-row:auto!important;
    width:100%!important;
    height:190px!important;
    min-height:190px!important;
    max-height:190px!important;
    margin:0!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }
  .performance-mosaic figure img{
    display:block!important;
    width:100%!important;
    height:100%!important;
    min-width:0!important;
    max-width:none!important;
    object-fit:cover!important;
    object-position:center center!important;
    transform:none!important;
  }
  .performance-mosaic .programmes img{
    object-position:center 40%!important;
  }
  .performance-mosaic .student img{
    object-position:center 38%!important;
  }
  .performance-mosaic figure:nth-child(3) img{
    object-position:center center!important;
  }
  .performance-mosaic figure:nth-child(4) img{
    object-position:center 62%!important;
  }

  /* Keep the red bridge in normal flow below the completed grid. */
  .performance-combined .performance-bridge{
    position:relative!important;
    clear:both!important;
    width:calc(100% + 40px)!important;
    max-width:none!important;
    margin:32px -20px 0!important;
    padding:42px 20px 46px!important;
    box-sizing:border-box!important;
    z-index:1!important;
  }
}

@media (max-width:380px){
  .performance-mosaic{
    grid-template-rows:172px 172px!important;
  }
  .performance-mosaic figure,
  .performance-mosaic .programmes,
  .performance-mosaic .student,
  .performance-mosaic figure:nth-child(3),
  .performance-mosaic figure:nth-child(4){
    height:172px!important;
    min-height:172px!important;
    max-height:172px!important;
  }
}


/* v6.51 — definitive iPhone header layout */
@media (max-width:700px){
  header{
    height:70px!important;
    min-height:70px!important;
  }

  header .wrap.nav{
    width:calc(100% - 28px)!important;
    height:70px!important;
    min-height:70px!important;
    margin-left:auto!important;
    margin-right:auto!important;
    display:grid!important;
    grid-template-columns:44px minmax(0,1fr) 44px!important;
    grid-template-rows:70px!important;
    align-items:center!important;
    gap:0!important;
    position:relative!important;
  }

  /* Equal empty/control columns on each side make the identity truly centred. */
  header .brand-logo{
    position:static!important;
    grid-column:2!important;
    grid-row:1!important;
    justify-self:center!important;
    align-self:center!important;
    transform:none!important;
    left:auto!important;
    top:auto!important;
    width:142px!important;
    min-width:142px!important;
    max-width:142px!important;
    height:auto!important;
    margin:0!important;
    z-index:2!important;
  }
  header .brand-logo img{
    display:block!important;
    width:142px!important;
    max-width:142px!important;
    height:auto!important;
    max-height:42px!important;
    margin:0 auto!important;
    object-fit:contain!important;
  }

  header .header-actions{
    display:none!important;
  }

  header .menu{
    position:static!important;
    grid-column:3!important;
    grid-row:1!important;
    justify-self:end!important;
    align-self:center!important;
    width:44px!important;
    min-width:44px!important;
    height:44px!important;
    min-height:44px!important;
    padding:8px 0 8px 8px!important;
    margin:0!important;
    z-index:3!important;
  }

  header .links{
    position:absolute!important;
    top:70px!important;
    left:0!important;
    right:0!important;
    width:100%!important;
  }
}


/* v6.52 — Performance page concert images contained on iPhone */
@media (max-width:700px){
  .concert-collage{
    width:100%!important;
    max-width:100%!important;
    margin-left:auto!important;
    margin-right:auto!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-template-rows:220px 220px!important;
    gap:8px!important;
    height:auto!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }

  .concert-collage img{
    display:block!important;
    width:100%!important;
    height:220px!important;
    min-width:0!important;
    max-width:100%!important;
    object-fit:cover!important;
    object-position:center center!important;
    margin:0!important;
    box-sizing:border-box!important;
  }

  /* Keep all three supplied concert photographs visible on mobile.
     The third becomes a full-width row instead of being discarded. */
  .concert-collage img:nth-child(1){
    grid-column:1!important;
    grid-row:1!important;
    object-position:center 45%!important;
  }
  .concert-collage img:nth-child(2){
    grid-column:2!important;
    grid-row:1!important;
    object-position:center 42%!important;
  }
  .concert-collage img:nth-child(3){
    display:block!important;
    grid-column:1 / -1!important;
    grid-row:2!important;
    width:100%!important;
    object-position:center 48%!important;
  }

  .performance-intro,
  .performance-intro .wrap,
  .performance-intro .section-head-inline{
    min-width:0!important;
    max-width:100%!important;
  }
}

@media (max-width:380px){
  .concert-collage{
    grid-template-rows:200px 200px!important;
  }
  .concert-collage img{
    height:200px!important;
  }
}