/* ============================================================
   MASTERCLASS BAND — for the LIGHT pages only (/learn, homepage).

   The masterclass page itself needs none of this: it reuses the
   course-page components already in site.css and carries its own
   dark overrides inline. This file exists purely so the promo band
   can sit on a cream page without inheriting anything odd.

   Load after site.css. Everything is namespaced .mc-*.
   ============================================================ */

.mc-band{
  position:relative;overflow:hidden;border-radius:22px;
  padding:clamp(20px,2.6vw,30px) clamp(20px,2.8vw,34px);
  color:#F2EBE0;
  background:
    radial-gradient(120% 90% at 88% 8%,rgba(243,206,115,.16) 0%,rgba(243,206,115,0) 60%),
    linear-gradient(150deg,#5A3F26 0%,#402C1A 46%,#2E2013 100%);
  background-color:#2E2013;
  border:1px solid rgba(237,230,218,.14);
  /* Two columns, top-aligned. The old layout put the price in a flex row
     pinned to the bottom, so when the seat meter hid itself at 0 sold it
     left a tall empty band with almost nothing in it. */
  /* Three columns: copy | pointers | price. The pointers used to sit under
     the copy, which left the middle of the band empty at desktop width. */
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.95fr) minmax(180px,230px);
  gap:14px 36px;align-items:start;
}
/* Explicit placement, rows included. Left to auto-placement the quick-look
   panel landed in column 2 and its width sized the whole column — the price
   rail ended up 755px wide and squeezed the copy into 300px.

   Rows matter too: the price rail is the tallest thing in the band, so if it
   sits in row 1 alone it stretches that row and leaves a dead gap between the
   dates line and "Quick look". Spanning it across rows 1-2 lets the foot ride
   up under the copy and the band closes around its content. */
.mc-band__main{grid-column:1;grid-row:1}
.mc-points{grid-column:2;grid-row:1}
.mc-band__side{grid-column:3;grid-row:1/span 2}
.mc-band .mc-foot{grid-column:1/3;grid-row:2;align-self:end}
.mc-band .mc-panel{grid-column:1/-1;grid-row:3}
/* Quick look and the details link on one line rather than two rows */
.mc-band .mc-foot{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:2px}
.mc-band .mc-foot a{font-size:13px;color:#A6DBC2;font-weight:600}
.mc-band > *{position:relative;z-index:1}

/* the studio's ghost cup, same treatment as .band-dark in bands.css */
.mc-band .mc-cup{
  position:absolute;z-index:0;pointer-events:none;
  right:-52px;top:-38px;width:250px;aspect-ratio:1808/1248;opacity:.06;
}
.mc-band .mc-cup path{fill:#EDE6DA}
@media(max-width:700px){.mc-band .mc-cup{display:none}}

.mc-band__kicker{
  display:inline-flex;align-items:center;gap:9px;
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;
  font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:#A6DBC2;
}
.mc-dot{width:8px;height:8px;border-radius:50%;background:#A6DBC2;flex:none;
  box-shadow:0 0 0 0 rgba(166,219,194,.6);animation:mcPulse 2.4s ease-out infinite}
@keyframes mcPulse{
  0%{box-shadow:0 0 0 0 rgba(166,219,194,.55)}
  70%{box-shadow:0 0 0 11px rgba(166,219,194,0)}
  100%{box-shadow:0 0 0 0 rgba(166,219,194,0)}
}

.mc-band__title{
  font-family:'Bungee',sans-serif;
  font-size:clamp(23px,3.1vw,34px);line-height:1.06;margin:10px 0 0;color:#F2EBE0;
}
.mc-band__title em{font-style:normal;color:#F3CE73}
.mc-band__sub{margin-top:8px;font-size:14.5px;color:#CBB9A3;max-width:none}

/* three pointers — what the empty middle is for */
/* The middle column. It stretches to the full row height and centres its own
   content, so the bullets sit against the title/blurb block instead of hanging
   off the kicker line. The rule gives the column an edge to sit against. */
.mc-points{list-style:none;margin:0;padding:0;display:grid;gap:11px;
  align-self:stretch;align-content:center;
  border-left:1px solid rgba(237,230,218,.15);padding-left:30px}
.mc-points li{
  position:relative;padding-left:22px;font-size:13.5px;color:#E4DACB;line-height:1.4;
}
.mc-points li::before{
  content:'';position:absolute;left:0;top:6px;width:9px;height:9px;border-radius:50%;
  background:rgba(243,206,115,.28);border:1.5px solid #F3CE73;box-sizing:border-box;
}
.mc-points b{color:#F3CE73;font-weight:800}

.mc-band__note{margin-top:12px;font-size:12.5px;color:#CBB9A3}

/* right column: price, seats, action */
.mc-band__side{text-align:right;flex:none;min-width:190px}
.mc-was{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:14px;
  color:#CBB9A3;text-decoration:line-through;margin-right:8px}
.mc-now{font-family:'Bungee',sans-serif;font-size:clamp(34px,4.6vw,50px);color:#F3CE73;
  line-height:1;letter-spacing:-.01em}
.mc-gst{display:block;font-size:10.5px;letter-spacing:.13em;color:#CBB9A3;margin-top:4px}

.mc-meter{height:8px;background:rgba(242,235,224,.13);border-radius:20px;overflow:hidden;margin-top:14px}
.mc-meter i{display:block;height:100%;width:0;background:#F3CE73;border-radius:20px;
  transition:width .9s cubic-bezier(.22,1,.36,1)}
.mc-meter[data-empty="true"]{display:none}
.mc-meter__label{display:block;margin-top:7px;
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:12px;color:#F2EBE0}

.mc-cta{
  display:inline-block;margin-top:14px;
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:14px;
  text-decoration:none;color:#2A1B10;background:#F3CE73;
  border-radius:26px;padding:13px 24px;white-space:nowrap;
  box-shadow:3px 4px 0 #F0A6C4;
  transition:transform .2s ease,box-shadow .22s ease,filter .18s;
}
.mc-cta:hover{transform:translateY(-2px);filter:brightness(1.05);box-shadow:4px 6px 0 #F0A6C4}
.mc-cta:active{transform:translateY(0);box-shadow:1px 2px 0 #F0A6C4}

@media(max-width:1000px){
  /* two columns: copy+pointers stacked on the left, price still on the right.
     The rule and the vertical centring are a desktop-only device — once the
     pointers sit under the copy they read as a continuation of it. */
  .mc-band{grid-template-columns:minmax(0,1fr) minmax(170px,220px)}
  .mc-band__main{grid-column:1;grid-row:1}
  .mc-points{grid-column:1;grid-row:2;margin-top:14px;
    border-left:none;padding-left:0;align-self:start;align-content:start}
  /* centred, or the price sits at the top of a column that runs the whole
     height of the copy and leaves a hole under the button */
  .mc-band__side{grid-column:2;grid-row:1/span 3;align-self:center}
  .mc-band .mc-foot{grid-column:1;grid-row:3}
  .mc-band .mc-panel{grid-column:1/-1;grid-row:4}
}
@media(max-width:760px){
  .mc-band{grid-template-columns:1fr;gap:4px}
  .mc-band__main{grid-column:1;grid-row:1}
  .mc-points{grid-column:1;grid-row:2}
  .mc-band__side{grid-column:1;grid-row:3}
  .mc-band .mc-foot{grid-column:1;grid-row:4;margin-top:18px}
  .mc-band .mc-panel{grid-column:1;grid-row:5}
  .mc-band__side{text-align:left;min-width:0;margin-top:16px;
    padding-top:16px;border-top:1px solid rgba(237,230,218,.16)}
  .mc-now{font-size:38px}
  .mc-cta{display:block;text-align:center}
}

/* quick look */
.mc-quick{
  margin-top:0;background:none;border:none;cursor:pointer;padding:0;
  display:inline-flex;align-items:center;gap:9px;
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:13px;color:#A6DBC2;
}
.mc-quick u{text-underline-offset:3px}
.mc-quick__plus{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;
  background:rgba(166,219,194,.16);font-size:14px;line-height:1;transition:transform .3s}
.mc-quick[aria-expanded="true"] .mc-quick__plus{transform:rotate(45deg)}

.mc-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .38s ease}
.mc-panel[data-open="true"]{grid-template-rows:1fr}
.mc-panel__in{overflow:hidden}
.mc-panel__body{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:24px 34px;
  padding-top:22px;margin-top:20px;border-top:1px solid rgba(237,230,218,.16);
}
.mc-panel__body h4{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;
  font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:#F3CE73;margin-bottom:9px}
.mc-panel__body p{font-size:14px;color:#CBB9A3;line-height:1.55}
.mc-mini{list-style:none;display:grid;gap:7px;margin:0;padding:0}
.mc-mini li{display:flex;gap:10px;font-size:13.5px;color:#E4DACB;line-height:1.45}
.mc-mini li b{flex:none;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;
  color:#F3CE73;min-width:34px}

@media(prefers-reduced-motion:reduce){
  .mc-meter i,.mc-panel,.mc-quick__plus,.mc-cta{transition:none}
  .mc-dot{animation:none}
}

/* ============================================================
   HERO RAIL — the masterclass announcement inside /learn's
   kinetic hero. "Making music is a mindset" keeps the headline;
   this sits under the CTAs as a dated, clickable pill.

   Deliberately a pill, not a third button: it announces rather
   than competes. The espresso fill ties it to /masterclass while
   everything around it stays cream, so it is the only dark thing
   in the hero and catches the eye without shouting.

   The full band lower down does the selling — this only has to
   say "this exists, it is soon, here is the price".

   Carries data-mc-price, so set-masterclass-seats.py keeps it
   current along with everything else.
   ============================================================ */
.mc-rail{
  display:inline-flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;
  margin:24px auto 0;padding:11px 13px 11px 18px;
  border-radius:40px;text-decoration:none;
  background:linear-gradient(120deg,#43301F 0%,#2E2013 100%);
  border:1px solid rgba(243,206,115,.30);
  box-shadow:0 6px 18px rgba(46,32,19,.16);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s;
  max-width:100%;
}
.mc-rail:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(46,32,19,.24);
  border-color:rgba(243,206,115,.55)}
.mc-rail:focus-visible{outline:3px solid #2B7A60;outline-offset:3px}

.mc-rail b{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:13.5px;
  color:#F2EBE0;letter-spacing:.01em;
}
.mc-rail__new{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:#A6DBC2;
}
.mc-rail__when{font-size:12.5px;color:#CBB9A3;white-space:nowrap}
.mc-rail__sep{width:1px;height:18px;background:rgba(237,230,218,.22);flex:none}
.mc-rail__price{font-family:'Bungee',sans-serif;font-size:15px;color:#F3CE73;white-space:nowrap}
.mc-rail__go{
  flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:#F3CE73;color:#2A1B10;font-size:15px;font-weight:700;
  transition:transform .2s ease;
}
.mc-rail:hover .mc-rail__go{transform:translateX(3px)}
.mc-rail .mc-dot{width:7px;height:7px;margin-right:-6px}

@media(max-width:620px){
  .mc-rail{gap:9px;padding:11px 12px 11px 15px;border-radius:22px}
  .mc-rail__when,.mc-rail__sep{display:none}
}
@media(prefers-reduced-motion:reduce){.mc-rail,.mc-rail__go{transition:none}}