/* Kabir for Kids: the Mahavir Senior Model School programme page (workshops/mahavir-senior-model-school.html).
   Layout and the page's own pieces only; every colour, size and space comes from k4k-system.css. Load after k4k-templates.css.
   Everything is visible without JavaScript: the script only turns stacked blocks into tabs, flips and stacks. */

/* ---- chips used as buttons (plan builder, voice tabs) ---- */
.lib-chip {
  border: 0; cursor: pointer; min-height: 44px; padding: 10px 18px 8px; border-radius: var(--radius-pill);
  font: 600 16px/1 var(--font-play); background: var(--paper); color: var(--kohl); box-shadow: inset 0 0 0 1.5px var(--line);
  transition: transform var(--quick) var(--ease);
}
.lib-chip:hover { transform: translateY(-2px); }
.lib-chip[aria-pressed="true"], .lib-chip[aria-selected="true"] { background: var(--dusk); color: var(--on-dusk); box-shadow: none; }

/* ---- hero ---- */
.mv-hero { padding-block: var(--space-5) var(--space-7); }
.mv-hero__head { display: grid; gap: var(--space-3); margin: var(--space-4) 0 var(--space-5); max-width: 880px; }
.mv-answer { max-width: 40em; }
.mv-hero__pic { margin: 0; display: grid; gap: var(--space-2); }
.mv-hero__pic img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-m); box-shadow: var(--shadow-cutout); }
.mv-hero__pic figcaption { font-size: 14px; color: var(--kohl-soft); }
.mv-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); margin: var(--space-5) 0 0; }
.mv-stat { background: var(--sun); border-radius: var(--radius-m); padding: var(--space-4); display: grid; gap: var(--space-1); position: relative; }
.mv-stat::before { content: ""; width: 16px; height: 16px; border-radius: var(--radius-round); background: var(--c, var(--marigold)); box-shadow: var(--shadow-cutout); }
.mv-stat dt { order: 2; font: 600 15px/1.3 var(--font-play); color: var(--kohl-soft); }
.mv-stat dd { order: 1; margin: 0; }
.mv-num { font: 600 40px/1.1 var(--font-display); color: var(--kohl); font-variant-numeric: tabular-nums; }
@media (max-width: 860px) { .mv-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- section jumps ---- */
.mv-jump { position: sticky; top: 0; z-index: 8; background: rgb(255 251 244 / .94); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); }
.mv-jump ul { list-style: none; margin: 0; padding: var(--space-2) 0; display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; }
.mv-jump ul::-webkit-scrollbar { display: none; }
.mv-jump a { display: inline-block; white-space: nowrap; padding: 8px 14px 6px; border-radius: var(--radius-pill); font: 600 15px/1.2 var(--font-play); color: var(--kohl); text-decoration: none; }
.mv-jump a:hover { background: var(--sun); }
.mv-jump a[aria-current="true"] { background: var(--dusk); color: var(--on-dusk); }
.mv [id] { scroll-margin-top: 64px; }

/* ---- the film ---- */
.mv-film { position: relative; aspect-ratio: 16 / 9; max-width: 960px; border-radius: var(--radius-m); overflow: hidden; background: var(--dusk); box-shadow: var(--shadow-cutout); }
.mv-film img, .mv-film iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.mv-film .k-play { position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; transform: translate(-50%, -50%); }
.mv-film .k-play:hover { transform: translate(-50%, -50%) scale(1.06); }
.mv-chapters { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2) var(--space-3); max-width: 960px; }
.mv-chapters a { display: grid; gap: 2px; padding: var(--space-2) var(--space-3); background: var(--paper); border-radius: var(--radius-s); text-decoration: none; color: var(--kohl); font: 600 15px/1.3 var(--font-play); box-shadow: var(--shadow-cutout); transition: transform var(--quick) var(--ease); }
.mv-chapters a:hover { transform: translateY(-2px); }
.mv-chapters span { font: 600 13px/1.3 var(--font-body); color: var(--terracotta); font-variant-numeric: tabular-nums; }
@media (max-width: 860px) { .mv-chapters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- big quotes and the flip cards ---- */
.mv-bigquote { margin: 0; }
.mv-bigquote p { font: italic 400 24px/1.45 var(--font-display); color: var(--kohl); }
.mv-bigquote--small p { font-size: 20px; }
.mv-bigquote--wide { max-width: 760px; }
.mv-who { color: var(--kohl-soft); margin-top: var(--space-2); }
.mv-flipwrap { display: grid; gap: var(--space-4); justify-items: start; align-content: center; }
.mv-flip { display: grid; gap: var(--space-3); width: 100%; }
.mv-flip__face {
  background: color-mix(in srgb, var(--c, var(--sun)) 45%, var(--paper)); border-radius: var(--radius-m);
  padding: var(--space-5); box-shadow: var(--shadow-cutout); display: grid; gap: var(--space-3); align-content: center; min-height: 280px;
}
.mv-flip__big { font: 600 28px/1.2 var(--font-display); color: var(--kohl); }
.mv-flip.is-js { perspective: 1400px; transform-style: preserve-3d; transition: transform 600ms var(--ease); gap: 0; }
.mv-flip.is-js .mv-flip__face { grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.mv-flip.is-js .mv-flip__face--back { transform: rotateY(180deg); }
.mv-flip.is-js.is-flipped { transform: rotateY(180deg); }
.mv-how { margin-top: var(--space-6); background: var(--sky); border-radius: var(--radius-m); padding: var(--space-5); display: grid; gap: var(--space-2); justify-items: center; text-align: center; }
.mv-how .mv-bigquote { max-width: 760px; }

/* ---- the five sessions ---- */
.mv-tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.mv-tab {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: 56px; padding: 8px 18px 8px 10px; border: 0; cursor: pointer;
  border-radius: var(--radius-pill); background: var(--paper); color: var(--kohl); box-shadow: inset 0 0 0 1.5px var(--line); font: 600 15px/1.2 var(--font-play);
  transition: transform var(--quick) var(--ease);
}
.mv-tab:hover { transform: translateY(-2px); }
.mv-tab b { width: 36px; height: 36px; border-radius: var(--radius-round); display: grid; place-items: center; background: var(--coral); color: var(--kohl); font: 800 17px/1 var(--font-play); flex: none; }
.mv-tab:nth-child(2) b { background: var(--marigold); } .mv-tab:nth-child(3) b { background: var(--leaf); }
.mv-tab:nth-child(4) b { background: var(--aqua); } .mv-tab:nth-child(5) b { background: var(--pink); }
.mv-tab[aria-selected="true"] { background: var(--dusk); color: var(--on-dusk); box-shadow: none; }
.mv-panel { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-5) var(--space-6); align-items: center; margin-bottom: var(--space-6); }
.mv-panel img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-m); box-shadow: var(--shadow-cutout); }
.mv-panel > div { display: grid; gap: var(--space-3); }
.mv-steps.is-js .mv-panel { margin-bottom: 0; }
.mv-steps.is-js .mv-panel[hidden] { display: none; }
.mv-childsays { margin: 0; background: var(--paper); border-radius: var(--radius-m); padding: var(--space-3) var(--space-4); box-shadow: var(--shadow-cutout); }
.mv-childsays p { font: italic 400 18px/1.5 var(--font-display); color: var(--kohl); }
.mv-childsays footer { font-size: 14px; color: var(--kohl-soft); margin-top: var(--space-1); }
.mv-childsays--plain { box-shadow: none; background: transparent; padding: 0; }
@media (max-width: 860px) { .mv-panel { grid-template-columns: minmax(0, 1fr); } .mv-tab span { font-size: 14px; } }

/* ---- the songs ---- */
.mv-onstage { background: var(--paper); border-radius: var(--radius-m); padding: var(--space-3) var(--space-4); display: grid; gap: var(--space-1); box-shadow: var(--shadow-cutout); }
.mv-onstage .t-label { color: var(--terracotta); }
.mv-onstage__text { font: italic 400 18px/1.5 var(--font-display); color: var(--kohl); }

/* ---- the tables turned ---- */
.mv-turn { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-6); align-items: center; }
.mv-turn__media { margin: 0; display: grid; gap: var(--space-2); }
.mv-turn__media video { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-m); box-shadow: var(--shadow-cutout); background: var(--sun); }
.mv-turn__media figcaption { font-size: 14px; color: var(--kohl-soft); }
@media (max-width: 860px) { .mv-turn { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); } }

/* ---- the voices ---- */
.mv-voicetabs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-5); }
.mv-voices { display: grid; gap: var(--space-3); justify-items: center; padding-bottom: var(--space-4); }
.mv-voices[hidden] { display: none; }
.mv-voices:not(.is-solo) { }
.mv-voicetabs:not([hidden]) ~ .mv-voices .mv-voices__title { display: none; }
.mv-voices__title { justify-self: start; }
.mv-voices .k-notes:not(.is-stack) { width: 100%; justify-self: stretch; }
.mv-voices .k-notes-bar { justify-content: center; margin-top: var(--space-5); }
.mv-voices .k-notes.is-stack { margin-top: var(--space-3); }
.mv-press { margin-top: var(--space-6); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: baseline; background: var(--paper); border-radius: var(--radius-m); padding: var(--space-3) var(--space-4); }
.mv-press .t-label { color: var(--terracotta); }

/* ---- the gallery and its lightbox ---- */
.mv-gallery { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.mv-gallery button { display: block; width: 100%; padding: 0; border: 0; cursor: zoom-in; border-radius: var(--radius-m); overflow: hidden; background: var(--sun); box-shadow: var(--shadow-cutout); transition: transform var(--quick) var(--ease); }
.mv-gallery button:hover { transform: translateY(-3px); }
.mv-gallery img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 960px) { .mv-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mv-lightbox { border: 0; padding: var(--space-3); border-radius: var(--radius-m); background: var(--paper); color: var(--kohl); max-width: min(94vw, 1100px); width: 100%; }
.mv-lightbox::backdrop { background: rgb(59 36 20 / .78); }
.mv-lightbox figure { margin: 0; display: grid; gap: var(--space-2); }
.mv-lightbox img { width: 100%; height: auto; max-height: 72vh; object-fit: contain; border-radius: var(--radius-s); background: var(--sun); }
.mv-lightbox figcaption { font-size: 15px; color: var(--kohl-soft); min-height: 1.5em; }
.mv-lightbox__bar { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: flex-end; margin-top: var(--space-3); }

/* ---- plan a programme ---- */
.mv-plan { background: var(--paper); border-radius: var(--radius-m); padding: var(--space-5); display: grid; gap: var(--space-4); box-shadow: var(--shadow-cutout); }
.mv-plan__group { border: 0; padding: 0; margin: 0; display: grid; gap: var(--space-2); min-width: 0; }
.mv-plan__group legend { padding: 0; color: var(--kohl-soft); margin-bottom: var(--space-2); }
.mv-plan__opts { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.mv-plan__sum { background: var(--sky); border-radius: var(--radius-s); padding: var(--space-3) var(--space-4); color: var(--kohl); }
@media (max-width: 640px) { .mv-plan { padding: var(--space-4); } .mv-flip__face { padding: var(--space-4); min-height: 240px; } .mv-num { font-size: 36px; } }

/* ---- tighter layout (27 Oct 2026, Saurabh: "some waste of spaces can still be seen") ----
   Laptop: hero text beside its picture, section intros beside their titles, the film beside its chapters,
   the notes beside their intro. Everywhere: shorter gaps between bands, slimmer number cards. */
.mv .k-band { padding-block: 56px; }
.mv-hero { padding-block: var(--space-4) var(--space-6); }
.mv-hero__head { margin: var(--space-3) 0 var(--space-4); }
.mv-stats { margin-top: var(--space-4); gap: var(--space-2) var(--space-3); }
.mv-stat { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 2px var(--space-3); padding: var(--space-3) var(--space-4); }
.mv-stat::before { display: none; }
.mv-stat dd { grid-row: 1; grid-column: 1; }
.mv-stat dt { grid-row: 1; grid-column: 2; display: flex; align-items: center; gap: var(--space-2); }
.mv-stat dt::before { content: ""; width: 12px; height: 12px; flex: none; border-radius: var(--radius-round); background: var(--c, var(--marigold)); }
.mv-how { margin-top: var(--space-5); padding: var(--space-4) var(--space-5); }
.mv-voices .k-notes-bar { margin-top: var(--space-4); }
.mv-press { margin-top: var(--space-5); }
.mv :is(.mv-panel, .k-band__head) p span[lang="hi"] { white-space: nowrap; }   /* a short Hindi phrase never splits */

@media (min-width: 961px) {
  /* hero: words left, the hall right, the numbers in one strip under both */
  .mv-hero .k-wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0 var(--space-6); align-items: center; }
  .mv-hero .k-crumbs, .mv-stats { grid-column: 1 / -1; }
  .mv-hero__head { margin-bottom: 0; }
  .mv-hero__pic img { aspect-ratio: 4 / 3; }
  .mv-hero .t-page-title .k-line { display: block; }

  /* section intros: title on the left, the lead beside it */
  .mv .k-wrap:not(.k-split) > .k-band__head:has(> p.t-lead:last-child) { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: 1fr auto; column-gap: var(--space-6); align-items: end; }
  .mv .k-wrap:not(.k-split) > .k-band__head > * { grid-column: 1; }
  .mv .k-wrap:not(.k-split) > .k-band__head > p.t-lead:last-child { grid-column: 2; grid-row: 1 / span 2; max-width: none; }

  /* the film with its chapters down the side */
  #film .k-wrap { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 3fr); gap: 0 var(--space-4); align-items: stretch; }
  #film .k-band__head { grid-column: 1 / -1; }
  .mv-film { max-width: none; }
  .mv-chapters { grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(8, minmax(0, 1fr)); margin: 0; max-width: none; gap: var(--space-2); }
  .mv-chapters a { grid-template-columns: 3.4em minmax(0, 1fr); align-items: baseline; gap: var(--space-2); height: 100%; box-sizing: border-box; align-content: center; padding-block: 0; }

  /* the notes beside their intro, once the tabs are working */
  #voices .k-wrap:has(> .mv-voicetabs:not([hidden])) { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: auto auto 1fr; gap: 0 var(--space-6); }
  #voices .k-wrap:has(> .mv-voicetabs:not([hidden])) > .k-band__head { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  #voices .k-wrap:has(> .mv-voicetabs:not([hidden])) > .k-band__head > p:last-child { grid-column: 1; grid-row: auto; }
  #voices .mv-voicetabs:not([hidden]) ~ .mv-voices { grid-column: 2; grid-row: 1 / span 3; align-self: center; padding-bottom: 0; }
  #voices .mv-voicetabs:not([hidden]) ~ .mv-press { grid-column: 1; grid-row: 3; align-self: start; margin-top: var(--space-2); }
}
@media (max-width: 640px) {
  .mv .k-band { padding-block: 40px; }
  /* one swipeable row instead of three rows of tabs, and of the eight pictures */
  .mv-tabs, .mv-gallery { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * var(--phone-gutter)); padding: 2px var(--phone-gutter) var(--space-2); scroll-padding-inline: var(--phone-gutter); }
  .mv-tabs::-webkit-scrollbar, .mv-gallery::-webkit-scrollbar { display: none; }
  .mv-tabs .mv-tab { flex: none; scroll-snap-align: start; }
  .mv-gallery { display: flex; gap: var(--space-3); }
  .mv-gallery li { flex: 0 0 72%; scroll-snap-align: start; }
  .mv-stat { padding: var(--space-3); gap: 0 var(--space-2); }
  .mv-stat dt { font-size: 14px; }
  .mv-flip__face { min-height: 200px; }
}
@media (max-width: 380px) { .mv-hero .t-page-title { font-size: 29px; } }   /* keeps "Mahavir Senior Model School" on one line */