/* Kabir for Kids page templates (redesign, D252). Layout only: every colour, size and space comes
   from k4k-system.css (the design system). Load after it. */

/* ---- Shared: header, footer, skip link, crumbs ---- */
.k-skip { position: absolute; left: -999px; top: 8px; z-index: 20; background: var(--paper); padding: var(--space-2) var(--space-3); border-radius: var(--radius-s); }
.k-skip:focus { left: 16px; }
.k-header__logo { display: inline-flex; }
.k-crumbs { font-size: 14px; color: var(--kohl-soft); display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); }
.k-crumbs a { color: var(--kohl-soft); }
.k-crumbs [aria-current] { color: var(--kohl); }

.k-footer { background: var(--dusk); color: var(--on-dusk); padding-block: var(--space-7) var(--space-5); }
.k-footer .k-wrap { display: grid; gap: var(--space-6); }
.k-footer__top { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(4, minmax(0, 1fr)); gap: var(--space-5); }
.k-footer__name { font: 600 28px/1.2 var(--font-display); color: var(--marigold); }
.k-footer__tag { font: italic 400 17px/1.5 var(--font-display); color: var(--on-dusk); margin-top: var(--space-1); }
.k-footer__blurb { font-size: 14px; color: var(--on-dusk-soft); margin-top: var(--space-3); max-width: 34ch; }
.k-footer__col h2 { font: 600 13px/1.3 var(--font-play); letter-spacing: .02em; color: var(--on-dusk-soft); margin-bottom: var(--space-3); }
.k-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.k-footer__col a { color: var(--on-dusk); text-decoration: none; font-size: 15px; }
.k-footer__col a:hover { color: var(--marigold); text-decoration: underline; text-underline-offset: 3px; }
.k-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); padding-top: var(--space-4); border-top: 1px solid rgb(255 251 244 / .16); font-size: 14px; color: var(--on-dusk-soft); }
.k-footer__bottom a { color: var(--on-dusk-soft); }
.k-footer__sig { font: 400 17px/1.3 var(--font-hindi); color: var(--marigold); }
@media (max-width: 900px) { .k-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } .k-footer__brand { grid-column: 1 / -1; } }

/* Two columns that stack on a phone */
.k-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-6); align-items: center; }
@media (max-width: 860px) { .k-split { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); } }
.k-pic { border-radius: var(--radius-m); width: 100%; height: auto; }

/* ---- Home ---- */
.home-intro { position: relative; z-index: 1; margin-top: calc(var(--space-7) * -1); padding-bottom: var(--section-gap); display: grid; gap: var(--space-3); }
.home-intro .t-lead { max-width: 34em; }
.home-intro .k-btn-row { margin-top: var(--space-3); }
.home-hindi { color: var(--terracotta); }
@media (max-width: 640px) { .home-intro { margin-top: calc(var(--space-5) * -1); padding-bottom: var(--phone-section-gap); } }

.home-doha { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-6); align-items: center; }
.home-doha__pic { aspect-ratio: 4 / 5; object-fit: cover; }
.home-doha .k-doha { gap: var(--space-3); }
@media (max-width: 860px) {
  .home-doha { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .home-doha__pic { aspect-ratio: 4 / 3; object-position: 50% 35%; }
}

.home-songs { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-6); align-items: start; }
.home-songs__list { display: grid; gap: var(--space-3); }
@media (max-width: 860px) { .home-songs { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); } }

.home-formats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.home-format { display: grid; gap: var(--space-2); align-content: start; }
.home-format img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-m); margin-bottom: var(--space-2); }
.home-format .t-hindi-line { color: var(--terracotta); font-size: 17px; }
.home-format p { color: var(--kohl-soft); }
@media (max-width: 860px) { .home-formats { grid-template-columns: minmax(0, 1fr); } }

.home-voices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.home-voice { margin: 0; background: var(--paper); border-radius: var(--radius-m); padding: var(--space-4); display: grid; gap: var(--space-3); align-content: space-between; }
.home-voice p { font: italic 400 18px/1.5 var(--font-display); color: var(--kohl); }
.home-voice footer { font-size: 14px; color: var(--kohl-soft); }
@media (max-width: 860px) { .home-voices { grid-template-columns: minmax(0, 1fr); } }

.home-schools__photos { display: grid; grid-template-columns: 3fr 2fr; grid-template-rows: auto auto; gap: var(--space-3); }
.home-schools__photos img { width: 100%; height: 100%; min-height: 0; object-fit: cover; border-radius: var(--radius-m); }
.home-schools__photos img:first-child { grid-row: span 2; aspect-ratio: 3 / 4; }
.home-schools__photos img:not(:first-child) { aspect-ratio: 4 / 3; }
.home-stats { display: flex; flex-wrap: wrap; gap: var(--space-5); margin-block: var(--space-2); }
.home-stats div { display: grid; }
.home-stats b { font: 600 28px/1.1 var(--font-display); color: var(--kohl); }
.home-stats span { font-size: 14px; color: var(--kohl-soft); }

/* ---- FAQ (both pages) ---- */
.k-faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-5); align-items: start; }
.k-faq--one { grid-template-columns: minmax(0, 1fr); max-width: var(--reading-width); }
.k-faq details { border-bottom: 1px solid var(--line); padding-block: var(--space-3); }
.k-faq summary { cursor: pointer; font: 600 19px/1.35 var(--font-play); color: var(--kohl); list-style: none; display: flex; justify-content: space-between; gap: var(--space-3); }
.k-faq summary::-webkit-details-marker { display: none; }
.k-faq summary::after { content: "+"; font: 600 24px/1 var(--font-play); color: var(--terracotta); flex: none; }
.k-faq details[open] summary::after { content: "–"; }
.k-faq details > div, .k-faq details > p { margin-top: var(--space-2); color: var(--kohl-soft); }
.k-faq a { color: var(--terracotta); }
@media (max-width: 860px) { .k-faq { grid-template-columns: minmax(0, 1fr); } }

/* ---- Doha page ---- */
.doha-top { padding-block: var(--space-5) var(--section-gap); }
.doha-top__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-6); align-items: start; margin-top: var(--space-4); }
.doha-top h1 { margin-bottom: var(--space-1); }
.doha-top .k-player { margin-top: var(--space-2); max-width: 520px; }
.doha-top__listen { font-size: 14px; color: var(--kohl-soft); }
.doha-top__answer { margin-top: var(--space-2); }
.doha-top__pic { aspect-ratio: 5 / 4; object-fit: cover; position: sticky; top: var(--space-4); }
@media (max-width: 860px) {
  .doha-top__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .doha-top__pic { position: static; order: -1; aspect-ratio: 16 / 9; }
}

.doha-meaning { display: grid; gap: var(--space-4); max-width: var(--reading-width); }
.doha-meaning [role="tabpanel"] { display: grid; gap: var(--space-2); }
.doha-meaning .k-tabs { justify-self: start; flex-wrap: wrap; }
.doha-panel-verse { font: italic 400 22px/1.5 var(--font-display); color: var(--kohl); }
.doha-panel-hindi { font: 400 22px/1.6 var(--font-hindi); color: var(--kohl); }
.doha-panel-note { font-size: 14px; color: var(--kohl-soft); }
.doha-panel-label { font: 600 13px/1.3 var(--font-play); letter-spacing: .02em; color: var(--kohl-soft); }

.doha-day { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-6); align-items: start; }
.doha-story { display: grid; gap: var(--space-3); }
.doha-story p { font: 400 19px/1.6 var(--font-display); color: var(--kohl); }
.k-talk ul { margin: 0; padding-left: 1.2em; display: grid; gap: var(--space-1); }
@media (max-width: 860px) { .doha-day { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); } }

.doha-video { position: relative; border-radius: var(--radius-m); overflow: hidden; aspect-ratio: 16 / 9; background: var(--dusk); max-width: 860px; }
.doha-video img, .doha-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.doha-video .k-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 72px; height: 72px; }
.doha-video .k-play:hover { transform: translate(-50%, -50%) scale(1.05); }

.doha-school { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-6); }
.doha-school p { color: var(--on-dusk); }
.doha-school .k-soft { color: var(--on-dusk-soft); }
@media (max-width: 860px) { .doha-school { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); } }

.doha-next { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.doha-next a { background: var(--paper); border-radius: var(--radius-m); padding: var(--space-4); display: grid; gap: var(--space-1); align-content: start; text-decoration: none; color: inherit; transition: transform var(--quick) var(--ease), box-shadow var(--quick) var(--ease); }
.doha-next a:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.doha-next .hi { font: 400 19px/1.45 var(--font-hindi); color: var(--kohl); }
.doha-next b { font: 600 17px/1.3 var(--font-play); color: var(--terracotta); }
.doha-next a > span:last-child { font-size: 14px; color: var(--kohl-soft); }
@media (max-width: 960px) { .doha-next { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .doha-next { grid-template-columns: minmax(0, 1fr); } }
.doha-corpus { font-size: 14px; color: var(--kohl-soft); max-width: var(--reading-width); }
.doha-corpus a { color: var(--terracotta); }

/* Meet the town: one painted panorama of the town with the heading on its sky, then the people.
   Phones skip the panorama and show the heading plainly. */
.town.k-band { padding-block: var(--space-5) var(--space-7); }
.town-pano { position: relative; margin-bottom: var(--space-5); }
.town-pano img { width: 100%; height: auto; aspect-ratio: 3 / 1; object-fit: cover; border-radius: var(--radius-m); box-shadow: var(--shadow-cutout); }
.town-pano__text { position: absolute; left: 59%; top: 13%; width: auto; display: grid; gap: var(--space-1); }
.town-pano__text h2 { font-size: clamp(28px, 3.2vw, 40px); text-shadow: 0 0 18px var(--paper), 0 0 6px var(--paper); }
.town-pano__text p .k-line { display: block; }
.town-pano__text p { color: var(--kohl); text-shadow: 0 0 14px var(--paper), 0 0 4px var(--paper); }
.town .k-discs { gap: var(--space-4) var(--space-3); }
.home-intro { padding-bottom: var(--space-6); }
@media (max-width: 860px) {
  .town-pano { margin-bottom: var(--space-4); }
  .town-pano img { display: none; }
  .town-pano__text { position: static; width: auto; }
  .town-pano__text h2 { font-size: var(--phone-section-title); text-shadow: none; }
  .town-pano__text p { color: var(--kohl-soft); text-shadow: none; }
}
@media (max-width: 640px) { .town.k-band { padding-block: var(--space-6) var(--space-6); } }
.voices.k-split { align-items: center; }
.voices .k-notes.is-stack { margin-block: var(--space-3); }
/* Phones skip the painting, so Little Kabir leads the row there on his own, bigger */
.town-kabir { display: none; }
@media (max-width: 860px) {
  .town-kabir { display: grid; grid-column: 1 / -1; }
  .town-kabir .k-disc__ring { width: 150px; }
  .town-kabir .k-disc__name { font-size: 22px; }
}

/* ---- Doha library (dohas.html) ---- */
.lib-top { padding-block: var(--space-5) var(--section-gap); }
.lib-top .k-split { margin-top: var(--space-4); align-items: center; }
.lib-top .k-band__head { margin: 0; }
.lib-hindi { color: var(--terracotta); }

.lib-today { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-6); align-items: center; }
.lib-today .k-note { cursor: default; }
.lib-today .k-note p::before { display: none; }
.lib-today .k-note .lib-today__verse { font: 400 24px/1.6 var(--font-hindi); font-style: normal; color: var(--kohl); margin: 0; }
.lib-today .k-note .lib-today__translit { font: italic 400 15px/1.5 var(--font-body); color: var(--kohl-soft); }
.lib-today .k-note .lib-today__meaning { font: italic 400 18px/1.5 var(--font-display); color: var(--kohl); }
@media (max-width: 860px) { .lib-today { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); } }

.lib-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.lib-filters button {
  border: 0; cursor: pointer; min-height: 40px; padding: 8px 14px 6px; border-radius: var(--radius-pill);
  font: 600 15px/1 var(--font-play); background: var(--paper); color: var(--kohl); box-shadow: inset 0 0 0 1.5px var(--line);
}
.lib-filters button[aria-pressed="true"] { background: var(--dusk); color: var(--on-dusk); box-shadow: none; }

.lib-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.lib-card { display: grid; gap: var(--space-2); align-content: start; text-decoration: none; color: inherit; }
.lib-card img { width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; border-radius: var(--radius-m); box-shadow: var(--shadow-cutout); transition: transform var(--quick) var(--ease); }
.lib-card:hover img { transform: translateY(-3px); }
.lib-card .hi { font: 400 18px/1.45 var(--font-hindi); color: var(--kohl); }
.lib-card b { font: 600 16px/1.3 var(--font-play); color: var(--terracotta); }
.lib-card .k-chips { gap: 4px; }
.lib-card .k-chip { font-size: 12px; padding: 4px 8px 2px; }
.k-chip--song { background: var(--marigold); }
.k-chip--video { background: var(--sky); }
@media (max-width: 960px) { .lib-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .lib-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-3); } .lib-card .hi { font-size: 16px; } }

.lib-search { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-bottom: var(--space-3); }
.lib-search input {
  flex: 1 1 280px; min-height: 48px; padding: 10px 16px; border-radius: var(--radius-pill); border: 1.5px solid var(--kohl-soft);
  background: var(--paper); color: var(--kohl); font: 400 17px/1.2 var(--font-body);
}
.lib-search input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.lib-count { font: 600 15px/1 var(--font-play); color: var(--kohl-soft); }
.lib-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); align-items: start; }
.lib-doha { background: var(--paper); border-radius: var(--radius-m); box-shadow: var(--shadow-cutout); }
.lib-doha summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: 2px var(--space-3); padding: var(--space-3) var(--space-4); }
.lib-doha summary::-webkit-details-marker { display: none; }
.lib-doha summary::after { content: "+"; grid-column: 2; grid-row: 1 / span 2; align-self: center; font: 600 24px/1 var(--font-play); color: var(--terracotta); }
.lib-doha[open] summary::after { content: "–"; }
.lib-doha .hi { font: 400 19px/1.45 var(--font-hindi); color: var(--kohl); }
.lib-doha .en { font: 600 14px/1.3 var(--font-play); color: var(--kohl-soft); }
.lib-doha__body { display: grid; gap: var(--space-2); padding: 0 var(--space-4) var(--space-4); }
.lib-doha__body .k-doha__verse { font-size: 22px; }
.lib-doha__label { font: 600 13px/1.3 var(--font-play); color: var(--kohl-soft); margin-top: var(--space-2); }
.lib-doha__sing { font: 400 18px/1.55 var(--font-hindi); color: var(--kohl); }
.lib-doha__meaning { font: italic 400 17px/1.5 var(--font-display); color: var(--kohl); }
.lib-empty { padding: var(--space-5); text-align: center; color: var(--kohl-soft); }
@media (max-width: 860px) { .lib-list { grid-template-columns: minmax(0, 1fr); } }