/* ==========================================================================
   Music department page. Purple register ladder, bright vocal to deep
   orchestra. Composition is deliberately different from the Dance page:
   split hero, a stacked programme ladder instead of alternating panels,
   an individual/ensemble comparison, and a next-step route in place of a
   timetable (no music timetable exists in the source content).
   ========================================================================== */

:root{
  --m-ink:#2C0F30;
  --m-deep:#6E1277;
  --m-mid:#8B1A93;
  --m-vocal:#C337CE;
  --m-piano:#A21CAF;
  --m-guitar:#8B29D9;
  --m-violin:#7223C9;
  --m-drums:#5B21A8;
  --m-orchestra:#46186F;
  --m-pale:#F8EFFA;
  --m-pale-2:#F3ECFB;
  --m-line:#EEE2F1;
}

.music-page main{padding-bottom:0}

/* ---------- Hero: asymmetric split, copy on white, one ensemble image ---------- */
/* Hero follows the Taekwondo composition: one wide image, the copy on a firm
   panel beneath it, then the instrument index flush under that. */
.m-hero{margin:12px 0 clamp(96px,11vw,150px)}
.m-hero-frame{position:relative;border-radius:20px;overflow:hidden;background:var(--m-pale)}
.m-hero-frame img{display:block;width:100%;height:clamp(320px,42vw,520px);object-fit:cover;object-position:center 42%}
.m-hero-bar{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(36px,5vw,80px);align-items:end;padding:clamp(30px,3.4vw,44px) clamp(28px,3.4vw,46px);background:var(--m-ink);color:#fff}
.m-back{display:inline-flex;align-items:center;gap:8px;width:max-content;margin-bottom:26px;color:var(--soft);font-size:13px;font-weight:600;transition:color .2s ease}
.m-back:hover{color:var(--ink)}
/* No max-width: the 1.25fr grid column already sets the measure. The old 660px
   cap was sized for a four word heading and forced the client's longer ones
   onto an extra line inside a column that had room to spare. */
.m-hero-bar h1{margin:0;color:#fff;font-size:clamp(37px,3.92vw,54px);line-height:1.2;text-wrap:pretty}
.m-hero-lede{max-width:400px;margin:0 0 22px;color:#DDBCE4;font-size:14px;line-height:1.6}
/* Primary button, then the secondary link beneath it. These were flex rows that
   happened to wrap at different widths on each page, because the labels differ in
   length: "Book a taekwondo trial" is 30px wider than "Book a dance trial", so
   Taekwondo stacked while Dance did not. Stacking is now deliberate. */
.m-actions{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.m-primary{display:inline-flex;align-items:center;gap:10px;padding:13px 17px;background:#fff;color:var(--ink);border-radius:8px;font-size:13px;font-weight:600;transition:background .2s ease}
.m-primary:hover{background:#EFE7F0}
.m-primary i,.m-ladder-link i,.m-trial-action>a i:last-child,.m-route-link i{transition:transform .2s ease}
.m-primary:hover i,.m-ladder-link:hover i,.m-trial-action>a:hover i:last-child,.m-route-link:hover i{transform:translate(3px,-3px)}
.m-text-link{display:inline-flex;align-items:center;gap:7px;color:#D3BCD6;font-size:13px;font-weight:600;transition:color .2s ease}
.m-text-link:hover{color:#fff}

/* ---------- Programme index strip under the hero ---------- */
/* Nine programmes, five on the first row and four on the second, each row
   stretching the full width. A grid cannot do that: repeat(5,1fr) leaves an
   empty cell on row two. Flex can, because the basis only decides how many
   fit per line and grow then shares the rest out, so row one lands on 20%
   each and row two on 25% each. */
.m-index{display:flex;flex-wrap:wrap;gap:1px;margin:0;padding:0;list-style:none;background:var(--m-line,#E6D3EA);border:1px solid var(--m-line,#E6D3EA);border-top:0;border-radius:0 0 14px 14px;overflow:hidden}
.m-index li{display:flex;flex:1 1 18%}
.m-index li a{display:flex;flex:1;flex-direction:column;gap:9px;padding:20px 22px;background:#fff;color:#4C3A50;font-size:15px;font-weight:600;letter-spacing:.1px;transition:background .2s ease,color .2s ease}
.m-index li a:hover{background:var(--m-pale);color:var(--ink)}
.m-index .m-swatch{width:26px;height:5px;border-radius:3px;display:block}
.m-index li:nth-child(1) .m-swatch{background:var(--m-vocal)}
.m-index li:nth-child(2) .m-swatch{background:var(--m-piano)}
.m-index li:nth-child(3) .m-swatch{background:var(--m-guitar)}
.m-index li:nth-child(4) .m-swatch{background:var(--m-violin)}
.m-index li:nth-child(5) .m-swatch{background:var(--m-drums)}
.m-index li:nth-child(6) .m-swatch{background:var(--m-orchestra)}
.m-index li:nth-child(7) .m-swatch{background:var(--m-vocal)}
.m-index li:nth-child(8) .m-swatch{background:var(--m-piano)}
.m-index li:nth-child(9) .m-swatch{background:var(--m-guitar)}

/* ---------- Opening ---------- */
.m-opening{max-width:1120px;margin:0 auto clamp(90px,10vw,140px);display:grid;grid-template-columns:1.15fr .75fr;gap:clamp(50px,9vw,140px);align-items:end}
.m-opening>div>i{display:block;margin-bottom:18px;color:var(--m-mid);font-size:34px}
.m-opening h2{max-width:660px;margin:0;font-size:clamp(37px,4.4vw,59px);line-height:1.2;text-wrap:pretty}
.m-opening>p{max-width:420px;margin:0 0 7px;color:var(--soft);font-size:15px;line-height:1.6}

/* ---------- The register ladder ---------- */
.m-ladder{max-width:1120px;margin:0 auto clamp(96px,11vw,150px)}
.m-ladder-head{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:end;margin-bottom:34px}
.m-ladder-head h2{margin:0;font-size:clamp(29px,2.88vw,37px);line-height:1.2;text-wrap:pretty}
.m-ladder-head p{margin:8px 0 0;color:var(--soft);font-size:14px;max-width:460px}
.m-ladder-link{display:inline-flex;align-items:center;gap:9px;color:var(--ink);font-size:13px;font-weight:600;white-space:nowrap}
/* ---------- Instrument cards ----------
   Replaced the eight full width rows. A photograph of each instrument does the
   identifying, so the card carries no icon, no colour coding and no border
   trick. Surface and hover shadow are the page's own: var(--m-pale) as   used, and the shadow pair from .bl-card.

   The old rows also had a live bug this removes:   and the rows carrying a sub page link had a fifth child, so the link dropped
   into a new implicit row inside the 44px icon column and wrapped. */
.m-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:0;padding:0;list-style:none}
.m-cards>li{scroll-margin-top:104px}
.m-card{display:flex;flex-direction:column;height:100%;border-radius:16px;overflow:hidden;
        background:var(--m-pale);box-shadow:0 1px 2px rgba(26,17,34,.05),0 6px 18px rgba(26,17,34,.06);
        transition:box-shadow .25s ease,transform .25s ease}
a.m-card:hover{transform:translateY(-3px);box-shadow:0 2px 4px rgba(26,17,34,.07),0 14px 34px rgba(26,17,34,.11)}
a.m-card:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.m-card-shot{position:relative;display:block;aspect-ratio:16/11;overflow:hidden;background:var(--m-pale-2,#F3E8F6)}
.m-card-shot img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.75,.2,1)}
a.m-card:hover .m-card-shot img{transform:scale(1.04)}
.m-card-pill{position:absolute;left:12px;bottom:12px;padding:5px 10px;border-radius:999px;
             background:rgba(255,255,255,.94);color:#4C3A50;font-size:11px;font-weight:500}
.m-card-body{display:flex;flex-direction:column;flex:1;padding:18px 20px}
.m-card-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:7px}
.m-card-head h3{margin:0;font-size:19px;line-height:1.2;letter-spacing:.1px}
.m-card-meta{color:#6C5670;font-size:11px;font-weight:500;white-space:nowrap}
.m-card-body p{margin:0;color:#57465A;font-size:13.5px;line-height:1.55}
.m-card-foot{margin-top:auto;padding-top:16px}
.m-card-link{display:inline-flex;align-items:center;gap:7px;color:var(--ink);font-size:13px;font-weight:600}
.m-card-link i{font-size:14px;transition:transform .2s ease}
a.m-card:hover .m-card-link i{transform:translate(3px,-3px)}
.m-card-quiet{color:#9A8C9E;font-size:12px}

/* The index strip links to each instrument. In a grid a jump is harder to read
   than in a list, so the card names itself briefly on landing. */
.m-cards>li:target .m-card{animation:m-card-land 1.6s ease-out 1}
@keyframes m-card-land{
  0%,55%{box-shadow:0 0 0 2px var(--m-mid),0 14px 34px rgba(40,15,50,.14)}
  100%{box-shadow:0 1px 2px rgba(26,17,34,.05),0 6px 18px rgba(26,17,34,.06)}
}
@media(prefers-reduced-motion:reduce){.m-cards>li:target .m-card{animation:none}}

.m-ladder-note{margin:18px 2px 0;color:#6C5670;font-size:12px}

/* ---------- Individual and ensemble comparison ---------- */
.m-ways{max-width:1120px;margin:0 auto clamp(96px,11vw,150px);display:grid;grid-template-columns:1fr 1fr;gap:16px}
.m-way{display:grid;grid-template-rows:auto 1fr;border-radius:20px;overflow:hidden;background:var(--m-pale)}
.m-way:nth-child(2){background:var(--m-pale-2)}
.m-way figure{margin:0;overflow:hidden;height:320px}
.m-way figure img{width:100%;height:100%;object-fit:cover}
.m-way:nth-child(1) figure img{object-position:center 38%}
.m-way:nth-child(2) figure img{object-position:center 40%}
.m-way-copy{padding:clamp(30px,3.4vw,44px);display:flex;flex-direction:column;align-items:flex-start}
.m-way-copy>span{display:flex;align-items:center;gap:8px;margin-bottom:14px;color:var(--m-deep);font-size:12px;font-weight:600}
.m-way-copy>span i{font-size:17px}
.m-way-copy h3{margin:0 0 14px;font-size:clamp(22px,2.32vw,29px);line-height:1.2;letter-spacing:.1px}
.m-way-copy>p{margin:0 0 20px;color:#57465A;font-size:14px;line-height:1.6}
.m-way-copy ul{display:grid;gap:9px;margin:0;padding:0;list-style:none;color:#544455;font-size:13px}
.m-way-copy li{display:flex;gap:9px;align-items:flex-start}
.m-way-copy li i{flex:0 0 auto;margin-top:3px;font-size:15px;color:var(--m-mid)}
.m-way:nth-child(2) .m-way-copy li i{color:var(--m-violin)}

/* ---------- Exams and teaching ---------- */
.m-standards{max-width:1120px;margin:0 auto clamp(96px,11vw,150px);display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(50px,8vw,120px);align-items:start}
.m-standards-copy h2{margin:0 0 20px;font-size:clamp(34px,3.84vw,50px);line-height:1.2;text-wrap:pretty}
.m-standards-copy>p{max-width:430px;margin:0;color:var(--soft);font-size:15px;line-height:1.6}
.m-exams{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
.m-exam{padding:26px 24px;background:var(--m-pale);border-radius:14px}
.m-exam>i{display:block;margin-bottom:16px;font-size:30px;color:var(--m-piano)}
.m-exam:nth-child(2)>i{color:var(--m-violin)}
.m-exam:nth-child(3)>i{color:var(--m-orchestra)}
.m-exam b{display:block;margin-bottom:6px;font-size:21px;letter-spacing:.1px}
.m-exam span{display:block;color:#6A5670;font-size:12px;line-height:1.5}
.m-teacher{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;padding:26px 28px;background:var(--m-pale-2);border-radius:14px}
.m-teacher>i{font-size:30px;color:var(--m-deep)}
.m-teacher b{display:block;margin-bottom:4px;font-size:17px;letter-spacing:.1px}
.m-teacher span{display:block;color:#5C4A5E;font-size:13px;line-height:1.55}

/* ---------- How lessons are arranged (next-step route) ---------- */
.m-route{max-width:1120px;margin:0 auto clamp(96px,11vw,150px);padding:clamp(48px,6vw,80px);background:var(--m-pale);border-radius:20px;display:grid;grid-template-columns:.72fr 1.28fr;gap:clamp(50px,8vw,110px);align-items:center}
.m-route-side>i{display:block;margin-bottom:18px;font-size:32px;color:var(--m-mid)}
.m-route-side h2{margin:0 0 18px;font-size:clamp(27px,2.8vw,37px);line-height:1.2;text-wrap:pretty}
.m-route-side>p{margin:0 0 26px;color:#5B4A5E;font-size:14px;line-height:1.6}
.m-route-link{display:inline-flex;align-items:center;gap:9px;color:var(--ink);font-size:13px;font-weight:600}
.m-steps{display:grid;gap:2px;margin:0;padding:0;list-style:none;border-radius:14px;overflow:hidden;counter-reset:step}
.m-steps li{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:start;padding:24px 28px;background:#fff}
.m-steps li::before{counter-increment:step;content:counter(step,decimal-leading-zero);color:var(--m-mid);font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;padding-top:2px}
.m-steps b{display:block;margin-bottom:5px;font-size:16px;letter-spacing:.1px}
.m-steps span{display:block;color:#5F4E62;font-size:13px;line-height:1.55}

/* ---------- Trial close: the one dark panel ---------- */
.m-trial{max-width:1120px;margin:0 auto clamp(80px,9vw,120px);display:grid;grid-template-columns:1fr .85fr .75fr;gap:clamp(34px,6vw,78px);align-items:center;padding:clamp(48px,7vw,78px);background:#3B1140;color:#fff;border-radius:20px}
.m-trial>div:first-child>i{display:block;margin-bottom:15px;color:#E3A6EC;font-size:31px}
.m-trial h2{margin:0;font-size:clamp(30px,3.12vw,42px);line-height:1.2;text-wrap:pretty}
.m-trial>p{margin:0;color:#DDC4E2;font-size:14px;line-height:1.6}
.m-trial-action>a{display:grid;grid-template-columns:auto 1fr auto;gap:9px;align-items:center;padding:14px 16px;background:#fff;color:var(--ink);border-radius:8px;font-size:13px;font-weight:600;transition:background .2s ease}
.m-trial-action>a:hover{background:#EDEAF0}
.m-trial-action>span{display:block;margin-top:12px;color:#CFB2D6;font-size:11px}
.m-trial-action>span a{color:#fff;font-weight:600}

@media(max-width:1000px){
  .m-hero-bar{grid-template-columns:1fr;gap:26px;align-items:start}
  .m-index li{flex-basis:30%}
  .m-opening{grid-template-columns:1fr;gap:30px}
  .m-opening h2{max-width:640px}
  .m-ladder-head{grid-template-columns:1fr;gap:18px;align-items:start}
  .m-cards{grid-template-columns:repeat(2,1fr)}
  .m-ways{grid-template-columns:1fr;gap:14px}
  .m-way figure{height:290px}
  .m-standards{grid-template-columns:1fr;gap:40px}
  .m-standards-copy{max-width:660px}
  .m-route{grid-template-columns:1fr;gap:40px}
  .m-route-side{max-width:620px}
  .m-trial{grid-template-columns:1fr 1fr}
  .m-trial-action{grid-column:2}
  .m-trial>p{grid-column:1}
}

@media(max-width:680px){
  .m-hero{margin:18px 0 26px;gap:26px}
  .m-back{margin-bottom:20px}
  .m-hero h1{font-size:36px}
  .m-hero-lede{font-size:14px}
  .m-hero{margin:8px 0 96px}
  .m-hero-frame{border-radius:16px}
  .m-hero-frame img{height:250px}
  .m-hero-bar{padding:28px 22px}
  .m-hero-bar h1{font-size:35px}
  .m-index li{flex-basis:46%}
  .m-index li a{padding:16px 18px;font-size:14px}
  .m-opening{margin-bottom:80px}
  .m-opening h2{font-size:35px}
  .m-opening>p{font-size:14px}
  .m-ladder{margin-bottom:80px}
  .m-cards{grid-template-columns:1fr}
  .m-ladder-head h2{font-size:27px}
  .m-ways{margin-bottom:80px}
  .m-way{border-radius:16px}
  .m-way figure{height:220px}
  .m-way-copy{padding:28px 22px}
  .m-standards{margin-bottom:80px;gap:34px}
  .m-standards-copy h2{font-size:34px}
  .m-exams{grid-template-columns:1fr;gap:10px}
  .m-exam{padding:22px 20px}
  .m-teacher{padding:22px 20px;gap:16px}
  .m-route{margin-bottom:80px;padding:40px 22px;border-radius:16px;gap:34px}
  .m-route-side h2{font-size:32px}
  .m-steps li{grid-template-columns:auto 1fr;gap:16px;padding:20px 20px}
  .m-trial{margin-bottom:70px;padding:44px 26px;grid-template-columns:1fr;gap:26px;border-radius:16px}
  .m-trial h2{font-size:34px}
  .m-trial>p,.m-trial-action{grid-column:1}
}

@media(max-width:360px){
  .m-index li{flex-basis:100%}
}

/* ==========================================================================
   Music page, 2026-08-10 client round.
   Group classes lead the page, an image carousel, and teacher availability
   taken from the client's Class Timetable document.
   ========================================================================== */

/* Group is the promoted route, so its card is given more presence than the
   one-to-one card that follows it. */
.m-way-lead{position:relative}
.m-way-lead .m-way-copy>h3{font-size:clamp(19px,1.92vw,26px)}
.m-way-pending{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:18px}

/* --- Image carousel ------------------------------------------------------ */
.m-gallery{margin:0 auto;padding:0 26px;max-width:1120px}


/* --- Teacher availability ------------------------------------------------ */
.m-avail{margin:0 auto;padding:0 26px;max-width:1120px}
.m-avail-head{max-width:62ch;margin-bottom:22px}
.m-avail-head h2{margin:0 0 8px}
.m-avail-head p{margin:0;color:var(--soft);font-size:15px;line-height:1.6}
.m-avail-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:2px;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--line)}
.m-avail-card{padding:20px;background:#fff}
.m-avail-card h3{margin:0 0 5px;font:600 15px/1.3 'Switzer',sans-serif;letter-spacing:.1px}
.m-avail-inst{display:flex;align-items:center;gap:8px;margin:0 0 13px;color:var(--quiet);font-size:12.5px}
.m-avail-card dl{display:flex;flex-direction:column;gap:6px;margin:0}
.m-avail-card dl>div{display:flex;justify-content:space-between;gap:12px}
.m-avail-card dt{color:var(--quiet);font-size:12.5px}
.m-avail-card dd{margin:0;font-size:12.5px;font-variant-numeric:tabular-nums;text-align:right}

@media (max-width:640px){
  .m-gallery,.m-avail{padding:0 18px}
  .m-gallery-track>li{flex:0 0 78%}
  .m-avail-grid{grid-template-columns:1fr}
}