/* ═══════════════════════════════════════════════════════════════════════
   M-U-S-I-C — Home page sections (patterns: m-u-s-i-c/home-*).
   Section-specific values ported verbatim from 3.0 src/pages/Home.tsx
   inline styles. Shared vocabulary (music-container, music-section-*, music-grid-*,
   music-card, music-btn, music-panel-ink, music-cta-band…) lives in main.css.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Hero ────────────────────────────────────────────────────────────── */

.music-home-hero__copy {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.music-home-hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Home hero subtitle runs 1px larger than the shared music-lead--hero. */
.music-home-hero__lead {
  font-size: clamp(17px, 2.3vw, 20px);
  line-height: 1.5;
  color: #516078;
  margin: 0;
  max-width: 520px;
  text-wrap: pretty;
}

.music-home-hero__btns {
  margin-top: 4px;
}

.music-home-hero__figure img {
  height: 100%;
  min-height: 280px;
  object-fit: cover;
}

/* ── Logistics ribbon (ink) ──────────────────────────────────────────── */

.music-home-ribbon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px 32px;
  flex-wrap: wrap;
}

.music-home-ribbon__lead {
  font-family: "Space Grotesk", Arial, sans-serif;
  color: #ffffff;
  font-size: clamp(15px, 2vw, 17px);
  font-weight: 600;
  letter-spacing: 0.04em;
  margin: 0;
}

.music-home-ribbon__meta {
  color: #8b97aa;
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}

.music-home-ribbon__meta a {
  color: #cdd4df;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Program map ─────────────────────────────────────────────────────── */

.music-home-map {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Phase filter pills — static in the WP port (no JS in patterns):
   "ALL 10 DAYS" renders in its pressed state, the row doubles as the
   phase legend and all ten day cards stay visible. */
.music-home-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/*
 * All on one row, or one per row — never a partial wrap.
 *
 * Reported 2026-08-10: "Days 8 and 10 are on the same line as the second line…
 * they need to be pushed down to their own separate line." A plain flex-wrap
 * breaks wherever it runs out of room, so between roughly 420px and 840px the
 * row split as 3+1 or 2+2 and made ranges look grouped that are not a group.
 *
 * Measured on the live page: the four pills are 127 + 210 + 244 + 204 with
 * three 8px gaps = 809px of container, and the container sits inside 32px of
 * page gutter — so one row needs 841px of viewport. Below 860px (headroom over
 * the measurement, not a round number picked by eye) every pill takes its own
 * row. Above it they all share one, which carries no false grouping either.
 *
 * Deliberately not a <br> and not a fixed width: the fix has to hold at every
 * width, not just the one it was tested at.
 */
@media (max-width: 860px) {
  .music-home-filters {
    flex-direction: column;
    align-items: stretch;
  }

  .music-home-filter {
    justify-content: center;
  }
}

.music-home-filter {
  /* 3.0 renders these as <button>, whose UA box-sizing is border-box, so
   * min-height:44px is the TOTAL height. As a <p> it would default to
   * content-box and render ~69px tall. */
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 11px 18px;
  border-radius: 999px;
  border: 1.5px solid #cdd4df;
  background: #ffffff;
  color: #243047;
  min-height: 44px;
  margin: 0;
}

.music-home-filter--on {
  border-color: #111827;
  background: #111827;
  color: #ffffff;
}

/* Inline links in the program-map lead.
   Same treatment as the ways band above — quiet underline at rest, hover does
   the talking — but each phase carries the accent its own day cards use below
   (.music-home-day__tag--*), so hovering "Days 3–7" lights up in the same amber the
   INTENSIVE cards are tagged with. The capstone red is #c02a41 rather than the
   tag's #d7374f: as link text on the band that is 4.40:1, just under AA. */
.music-map__inline {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(36, 71, 198, 0.35);
  border-radius: 3px;
  transition: color 0.18s ease, text-decoration-color 0.18s ease,
              background-color 0.18s ease;
}

.music-map__inline--intro     { --map-accent: #0b7d58; }
.music-map__inline--intensive { --map-accent: #9a6200; }
.music-map__inline--capstone  { --map-accent: #c02a41; }

.music-map__inline:hover,
.music-map__inline:focus-visible {
  color: var(--map-accent, #2447c6);
  text-decoration-color: var(--map-accent, #2447c6);
  background-color: rgba(36, 71, 198, 0.07);
  background-color: color-mix(in srgb, var(--map-accent, #2447c6) 9%, transparent);
}

.music-map__inline:focus-visible {
  outline: 2px solid var(--map-accent, #2447c6);
  outline-offset: 2px;
}

/* The bold day range is the anchor a reader scans for; keep the weight when it
   is inside the link so the line still reads as "Days 3–7 …" and not as one
   undifferentiated run of link text. */
.music-map__inline strong { font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .music-map__inline { transition: none; }
}

/* Day cards (on music-card + music-card--top-* + hv-card). */
.music-home-day {
  padding: 18px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.music-home-day__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.music-home-day__num {
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #8b97aa;
  letter-spacing: 0.08em;
  margin: 0;
}

.music-home-day__tag {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin: 0;
}

.music-home-day__tag--intro     { color: #0b7d58; }
.music-home-day__tag--intensive { color: #9a6200; }
.music-home-day__tag--capstone  { color: #d7374f; }

.music-home-day__items {
  font-size: 13px;
  line-height: 1.6;
  color: #516078;
  margin: 0;
}

/* ── Whole-card links (day cards, editorial cards, phase pills) ───────────
   A reader who stops on "Record the performance" should be able to reach the
   Intensive from there. One real anchor per card carries the accessible name;
   its ::after stretches over the card so the whole tile is the target. That
   keeps exactly one link in the tab order — wrapping the card in an <a> would
   swallow the image and the body copy into the link text a screen reader
   announces. hv-card already supplies the lift on hover. */
.music-home-day,
.music-home-editorial__item,
.music-home-filter {
  position: relative;
}

.music-home-day__link,
.music-home-editorial__link,
.music-home-filter__link {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.music-home-day__link::after,
.music-home-editorial__link::after,
.music-home-filter__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

/* Hover is driven from the CARD, not the anchor, so pointing anywhere on the
   tile lights the title — the anchor itself is only a sliver of the box. */
.music-home-day:hover .music-home-day__link { color: #2447c6; }
.music-home-day.music-card--top-green:hover  .music-home-day__link { color: #0b7d58; }
.music-home-day.music-card--top-amber:hover  .music-home-day__link { color: #9a6200; }
.music-home-day.music-card--top-coral:hover  .music-home-day__link,
.music-home-day.music-card--top-red:hover    .music-home-day__link { color: #c02a41; }

.music-home-editorial__item:hover .music-home-editorial__link { text-decoration: underline; text-underline-offset: 3px; }

.music-home-day__link:focus-visible,
.music-home-editorial__link:focus-visible,
.music-home-filter__link:focus-visible {
  outline: 2px solid #2447c6;
  outline-offset: 3px;
  border-radius: 3px;
}

/* The pill is the click target; its label must not intercept the stretched
   area or the pointer lands on text instead of the whole pill. */
.music-home-filter__link { display: block; }

@media (prefers-reduced-motion: reduce) {
  .music-home-day__link,
  .music-home-editorial__link,
  .music-home-filter__link { transition: none; }
}

/* Inset ink panel copy stack (inside music-panel-ink). */
.music-home-panel__copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.music-home-panel__title {
  font-family: "Space Grotesk", Arial, sans-serif;
  color: #ffffff;
  font-size: clamp(16px, 2.4vw, 20px);
  font-weight: 700;
  margin: 0;
}

.music-home-panel__sub {
  color: #8b97aa;
  font-size: 14px;
  margin: 0;
}

/* ── Editorial band ("Real sessions…") ───────────────────────────────── */

.music-home-editorial {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.music-home-editorial__title {
  max-width: 640px;
}

.music-home-editorial__item {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.music-home-editorial__photo img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.music-home-editorial__cap {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.music-home-editorial__tag {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin: 0;
}

.music-home-editorial__tag--amber { color: #9a6200; }
.music-home-editorial__tag--teal  { color: #00789e; }
.music-home-editorial__tag--red   { color: #d7374f; }

.music-home-editorial__txt {
  font-size: 14.5px;
  line-height: 1.5;
  color: #516078;
  margin: 0;
}

/* ── Feature splits (Young artists / Master Mind) ────────────────────── */

.music-home-split__copy {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.music-home-split__body {
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
  text-wrap: pretty;
}

.music-home-guardian .music-home-split__body { color: #516078; }
.music-home-mm .music-home-split__body       { color: #8b97aa; }

.music-home-guardian__title {
  font-size: clamp(26px, 4vw, 36px);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.music-home-guardian__photo img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.music-home-faqlink {
  font-size: 15px;
  font-weight: 600;
  align-self: flex-start;
  margin: 0;
}

.music-home-mm__title {
  color: #ffffff;
  font-size: clamp(26px, 4.5vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

/* "How the seasons work" sits between the base and --sm button scales. */
.music-home-mm__btn,
.wp-block-button.music-home-mm__btn .wp-block-button__link {
  padding: 13px 24px;
  font-size: 15px;
}

.wp-block-button.music-home-mm__btn {
  padding: 0;
}

.music-home-mm__photo img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* ── the Harvey Mason jr. quote feature (below the cohort ribbon) ─────────
   Timed YouTube excerpt (16:44–18:36) in a same-origin iframe player at
   assets/players/harvey-mason.html, followed by the two speaker cards.
   Markup lives in the Home page content as an editable HTML block.
   Ported from the ChatGPT hand-off package; brand images self-hosted. */

.music-home-quote-feature {
  position: relative;
  overflow: hidden;
  padding: clamp(42px, 6vw, 76px) clamp(16px, 4vw, 32px) clamp(18px, 2.4vw, 26px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.52), rgba(255, 248, 239, 0.2)),
    #fff8ef;
}

.music-home-quote-feature::before {
  content: "";
  position: absolute;
  top: 0;
  right: -12%;
  width: 44%;
  height: 100%;
  background: rgba(215, 55, 79, 0.035);
  transform: skewX(-14deg);
  pointer-events: none;
}

.music-home-quote-feature__inner {
  position: relative;
  z-index: 1;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0;
}

.music-home-quote-feature iframe {
  display: block;
  width: 100%;
  /* The old poster held the whole quote, so it needed a tall box. The poster is
     a still with a play button now, so the box should be the shape of a video.
     At 154vw the phone was getting a 0.51:1 portrait frame and cropping a
     16:9 title card down to a vertical slice. */
  height: auto;
  aspect-ratio: 16 / 9;
  min-height: 220px;
  border: 0;
  border-radius: 16px;
  background: #111827;
  box-shadow: 0 22px 54px rgba(17, 24, 39, 0.15);
}

.music-speaker-roster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.2vw, 24px);
  margin-top: clamp(24px, 3vw, 34px);
}

.music-speaker-roster__intro {
  grid-column: 1 / -1;
  max-width: 780px;
  margin-bottom: clamp(2px, 0.8vw, 8px);
}

.music-speaker-roster__disclaimer {
  grid-column: 1 / -1;
  max-width: 780px;
  margin: clamp(8px, 1.2vw, 14px) 0 0;
  color: #6b7280;
  font-size: 12px;
  line-height: 1.55;
}

.music-speaker-roster__eyebrow {
  margin: 0 0 8px;
  color: #d7374f;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.13em;
  line-height: 1.3;
  text-transform: uppercase;
}

.music-speaker-roster__title {
  max-width: 720px;
  margin: 0;
  color: #111827;
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: clamp(27px, 3.5vw, 40px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.music-speaker-profile {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(24px, 3vw, 34px);
  color: #fff8ef;
  background: #243047;
  border: 1px solid rgba(17, 24, 39, 0.12);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 16px 38px rgba(17, 24, 39, 0.16);
  transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

.music-speaker-profile::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  background: #d7374f;
}

.music-speaker-profile:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 48px rgba(17, 24, 39, 0.2);
}

.music-speaker-profile__brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 84px;
  padding: 14px 16px;
  color: #111827;
  background: #fff8ef;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 12px;
  text-decoration: none;
}

.music-speaker-profile__brand:hover { color: #111827; background: #fff; }

.music-speaker-profile__brand-lockup {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.music-speaker-profile__brand-lockup--grammy img {
  width: 31px;
  height: 38px;
  object-fit: contain;
}

.music-speaker-profile__brand-lockup--grammy span { display: grid; gap: 1px; }

.music-speaker-profile__brand-lockup--grammy strong {
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: clamp(23px, 2.2vw, 29px);
  letter-spacing: -0.035em;
  line-height: 0.95;
}

.music-speaker-profile__brand-lockup--grammy small {
  color: #596579;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: uppercase;
}

.music-speaker-profile__brand-lockup--youtube img {
  display: block;
  width: clamp(145px, 15vw, 176px);
  height: auto;
}

.music-speaker-profile__brand-action {
  flex: 0 0 auto;
  color: #d7374f;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.08em;
  line-height: 1.25;
  text-align: right;
  text-transform: uppercase;
}

.music-speaker-profile__header {
  margin-top: 22px;
}

.music-speaker-profile__number,
.music-speaker-profile__role { margin: 0; }

.music-speaker-profile__number {
  color: #ff657c;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.11em;
  line-height: 1.3;
  text-transform: uppercase;
}

.music-speaker-profile__name {
  margin: 8px 0 3px;
  color: #fff8ef;
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: clamp(28px, 3vw, 36px);
  line-height: 1.05;
  letter-spacing: -0.025em;
}

.music-speaker-profile__role {
  color: rgba(255, 248, 239, 0.82);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.35;
}

.music-speaker-profile__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 13px;
  gap: 6px;
  color: #fff8ef;
  background: transparent;
  border: 1px solid rgba(255, 248, 239, 0.52);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
}

.music-speaker-profile__link:hover {
  color: #111827;
  background: #fff8ef;
  border-color: #fff8ef;
}

.music-speaker-profile__highlights {
  display: grid;
  gap: 8px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.music-speaker-profile__highlights li {
  position: relative;
  margin: 0;
  padding-left: 17px;
  color: rgba(255, 248, 239, 0.92);
  font-size: 14px;
  line-height: 1.48;
}

.music-speaker-profile__highlights li::before {
  content: "";
  position: absolute;
  top: 0.58em;
  left: 0;
  width: 6px;
  height: 6px;
  background: #ff657c;
  border-radius: 50%;
}

.music-speaker-profile__footer { margin-top: auto; padding-top: 22px; }

#program-map.music-home-map { padding-top: clamp(30px, 3vw, 38px); }

@media (max-width: 760px) {
  .music-home-quote-feature { padding-top: 36px; padding-bottom: 18px; }
  /* Narrow phones get a slightly taller frame so the player's own controls and
     title still fit without the poster being squeezed. */
  .music-home-quote-feature iframe { aspect-ratio: 4 / 3; }
  .music-speaker-roster { grid-template-columns: 1fr; gap: 16px; }
  .music-speaker-profile { padding: 24px; }
  .music-speaker-profile__brand { min-height: 78px; }
  .music-speaker-profile__brand-action { max-width: 92px; }
  .music-speaker-profile__link { align-self: flex-start; }
}

/* ── "One Road. Five Ways On." — the orientation band ─────────────────────
   Five entry cards. minmax(200px,1fr) puts all five on one row at desktop,
   falls to three then one without a media query. The colours match the
   editorial strip below it: teal = Days 1–2, amber = Days 3–7, red = 8–10. */
.music-ways__title {
  margin: 6px 0 0;
}

.music-ways__lead {
  margin: 12px 0 0;
  max-width: 68ch;
}

.music-ways__sub {
  margin: 10px 0 0;
  max-width: 68ch;
}

.music-ways__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-top: clamp(20px, 3vw, 32px);
}

.music-ways__card {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.music-ways__kicker {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #5b6472;
}

.music-ways__name {
  margin: 0;
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.25;
}

/* Each card carries its own accent, taken from its top rule, so a hovered
   title lights up in the colour the reader already associates with that card.
   These are the DARKENED variants the theme uses for accent TEXT (.music-eyebrow--*),
   not the top-rule hexes: #19a974 and #ffb000 are ~2.9:1 and ~1.7:1 on the cream
   band, well under AA. The values below clear 4.5:1. */
.music-ways__card                    { --ways-accent: #2447c6; }
.music-ways__card.music-card--top-green { --ways-accent: #0b7d58; }
.music-ways__card.music-card--top-teal  { --ways-accent: #00789e; }
.music-ways__card.music-card--top-amber { --ways-accent: #9a6200; }
.music-ways__card.music-card--top-red   { --ways-accent: #c02a41; }
.music-ways__card.music-card--top-cobalt{ --ways-accent: #2447c6; }

/* The whole heading is the link, so the target is large and obvious. The
   arrow is decorative (aria-hidden) — the link text already names the card.
   No underline in either state: the title previously carried .u-grow AND a
   text-decoration hover rule, so two underlines drew at once. The hover is now
   a colour shift plus the arrow, which is legible without adding a second line
   under a heading that is already visually distinct. */
.music-ways__link {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  transition: color 0.2s ease;
}

.music-ways__link:hover,
.music-ways__link:focus-visible {
  color: var(--ways-accent);
}

.music-ways__link:focus-visible {
  outline: 2px solid var(--ways-accent);
  outline-offset: 3px;
  border-radius: 3px;
}

.music-ways__arrow {
  transition: transform 0.2s ease;
}

.music-ways__link:hover .music-ways__arrow,
.music-ways__link:focus-visible .music-ways__arrow {
  transform: translateX(3px);
}

/* Inline links inside the intro paragraphs.
   These keep a quiet underline AT REST — inside running prose, colour alone is
   not enough to tell a reader something is a link (WCAG 1.4.1), and five bright
   blue phrases in one short paragraph would read as a link farm. So: inherited
   text colour with a faint rule under it, and the hover does the talking. */
.music-ways__inline {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(36, 71, 198, 0.35);
  border-radius: 3px;
  transition: color 0.18s ease, text-decoration-color 0.18s ease,
              background-color 0.18s ease;
}

.music-ways__inline:hover,
.music-ways__inline:focus-visible {
  color: #2447c6;
  text-decoration-color: #2447c6;
  background-color: rgba(36, 71, 198, 0.07);
  box-shadow: 0 0 0 3px rgba(36, 71, 198, 0.07);
}

.music-ways__inline:focus-visible {
  outline: 2px solid #2447c6;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .music-ways__link,
  .music-ways__inline,
  .music-ways__arrow { transition: none; }
}

.music-ways__txt {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: #39414f;
}