/* Redesigned pages (research-page-design/6-final-plan.md). Pilot: Kindergarten.
   Loaded only on the pages listed in ks_kit_pages() (inc/ks-kit.php).
   "Start side" = left in English, right in Kurdish/Arabic: only logical properties,
   and photos that contain writing are never mirrored. */

.ks-kg{--cream:#F7F1E6;--paper:#FBF8F1;--sand:#F3E6C8;--navy:#063A61;--gold:#c8993a;--gold-ink:#7E5F1E;--maroon:#8A1A1F;--ink:#3B3628;--ink2:#575042;color:var(--ink)}
.ks-kg h1,.ks-kg h2,.ks-kg h3{font-family:var(--ks-display);color:var(--navy);letter-spacing:-.015em;margin:0}
.ks-kg h1,.ks-kg h2{font-variation-settings:"opsz" 96}   /* small titles keep the automatic optical size */
.ks-kg h2 em{font-style:italic;color:var(--gold-ink)}
.ks-kg-wrap{max-width:1320px;margin:0 auto;padding:0 clamp(18px,5vw,72px)}
.ks-kg-label{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--maroon)}
.ks-kg-label i{flex:none;width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(200,153,58,.22)}
.ks-kg-acts{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.ks-kg-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;font-size:15.5px;font-weight:800;padding:16px 30px;border-radius:999px;transition:filter .3s ease,transform .3s ease,background .3s ease}
.ks-kg-btn--gold{background:var(--gold);color:var(--navy);box-shadow:0 18px 40px -20px rgba(200,153,58,.95)}
.ks-kg-btn--gold:hover{filter:brightness(1.06);transform:translateY(-1px)}
.ks-kg-btn--line{color:var(--navy);box-shadow:inset 0 0 0 1.5px rgba(6,58,97,.35)}
.ks-kg-btn--line:hover{background:rgba(6,58,97,.06)}
.ks-kg-btn:focus-visible{outline:3px solid var(--navy);outline-offset:3px}

/* 1 · Hero: words on the start side; the classroom in an arched doorway, play in a circle,
   a sun rising behind the arch (the day below is the sun's path). */
.ks-kg-hero{background:var(--cream);padding:104px 0 clamp(64px,7vw,104px);overflow:hidden}
.ks-kg-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:clamp(32px,5vw,88px);align-items:center;margin-top:clamp(28px,4vw,52px)}
.ks-kg-pill{display:inline-block;font-size:13px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink);background:#fff;border-radius:999px;padding:9px 18px;box-shadow:0 10px 26px -18px rgba(126,95,30,.6)}
.ks-kg-hero h1{font-size:clamp(44px,5.7vw,86px);font-weight:600;line-height:1.0;margin-top:22px;max-width:9.5em}
.ks-kg-lead{font-size:clamp(18px,1.55vw,21px);line-height:1.68;color:var(--ink);margin:26px 0 0;max-width:33em}
.ks-kg-arch{position:relative;isolation:isolate;justify-self:end;width:min(100%,560px);aspect-ratio:5/6}
.ks-kg-arch-win{position:absolute;inset:0;border-radius:999px 999px 34px 34px;overflow:hidden;background:#d9cdb5;box-shadow:0 60px 110px -60px rgba(6,32,54,.55)}
.ks-kg-arch-win img{width:100%;height:100%;object-fit:cover;object-position:22% 50%;display:block}
.ks-kg-sun{position:absolute;top:2%;inset-inline-end:-6%;width:24%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 38% 36%,#ecc777,var(--gold) 62%,#b78428);z-index:-1;box-shadow:0 0 0 14px rgba(200,153,58,.14),0 0 0 30px rgba(200,153,58,.07)}
.ks-kg-circle{position:absolute;inset-inline-start:-13%;bottom:7%;width:41%;aspect-ratio:1;border-radius:50%;overflow:hidden;border:9px solid var(--cream);box-shadow:0 30px 60px -30px rgba(6,32,54,.55)}
.ks-kg-circle img{width:100%;height:100%;object-fit:cover;object-position:62% 50%;display:block}

/* 2 · The day as the sun's arc, Arrive → Home Time. The SVG is drawn in a 1200×300 box;
   each stop sits on the arc through --y (its height in that box) and container units. */
.ks-kg-day{background:#fff;padding:clamp(88px,10vw,140px) 0 clamp(80px,9vw,124px)}
.ks-kg-day-head{text-align:center;max-width:720px;margin:0 auto}
.ks-kg-day-head h2,.ks-kg-offers h2,.ks-kg-end h2{font-size:clamp(34px,4.4vw,62px);font-weight:600;line-height:1.06;margin-top:16px}
.ks-kg-day-head p{font-size:18px;line-height:1.7;color:var(--ink2);margin:18px auto 0;max-width:34em}
.ks-kg-arc{position:relative;container-type:inline-size;margin:clamp(48px,6vw,80px) auto 0;max-width:1200px}
.ks-kg-arc > svg{position:absolute;inset:0 0 auto 0;width:100%;height:auto;overflow:visible}
.ks-kg-arc-path{fill:none;stroke:var(--gold);stroke-width:2.5;stroke-linecap:round}
.ks-kg-arc-ghost{fill:none;stroke:#EADFC8;stroke-width:2.5;stroke-dasharray:2 10;stroke-linecap:round}
.ks-kg-arc-sun{fill:var(--gold);stroke:#fff;stroke-width:5;opacity:0}
.ks-kg-stops{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));list-style:none;margin:0;padding:0}
.ks-kg-stop{--d:clamp(104px,12.5cqw,150px);text-align:center;margin-top:calc(var(--y) / 1200 * 100cqw - var(--d) / 2);padding:0 10px}
.ks-kg-dot{width:var(--d);height:var(--d);margin:0 auto;border-radius:50%;overflow:hidden;border:7px solid #fff;box-shadow:0 0 0 2px rgba(200,153,58,.55),0 24px 44px -26px rgba(6,32,54,.55);background:var(--sand);display:grid;place-items:center}
.ks-kg-dot img{width:100%;height:100%;object-fit:cover;display:block}
.ks-kg-dot svg{width:42%;height:42%;color:var(--maroon)}
.ks-kg-stop .ks-kg-label{font-size:12px;margin-top:20px}
.ks-kg-stop h3{font-size:clamp(20px,1.8vw,24px);font-weight:600;margin-top:8px;line-height:1.15}
.ks-kg-stop p{font-size:16px;line-height:1.6;color:var(--ink2);margin:8px auto 0;max-width:15em}
.ks-kg-name{display:flex;justify-content:center;margin-top:clamp(44px,5vw,64px)}
.ks-kg-name span{display:inline-flex;align-items:center;gap:10px;background:var(--cream);border-radius:999px;padding:14px 26px;font-size:15.5px;font-weight:800;color:var(--navy);text-align:center}
.ks-kg-name b{color:var(--maroon)}

/* 3 · Real moments in mixed shapes, running off the end of the screen. */
.ks-kg-strip{background:var(--cream);padding:clamp(72px,8vw,112px) 0}
.ks-kg-strip-top{display:flex;align-items:end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.ks-kg-strip-top a{color:var(--navy);font-weight:800;font-size:15.5px;text-decoration:none;border-bottom:2px solid var(--gold);padding-bottom:4px}
.ks-kg-strip-top a:focus-visible{outline:3px solid var(--navy);outline-offset:4px}
.ks-kg-reel{--edge:max(clamp(18px,5vw,72px),calc((100% - 1320px) / 2 + clamp(18px,5vw,72px)));display:flex;gap:clamp(14px,1.6vw,22px);overflow-x:auto;scroll-snap-type:x mandatory;padding:34px var(--edge) 8px;scroll-padding-inline:var(--edge);scrollbar-width:none;overscroll-behavior-x:contain}
.ks-kg-reel::-webkit-scrollbar{display:none}
.ks-kg-reel:focus-visible{outline:3px solid var(--navy);outline-offset:-3px}
.ks-kg-reel figure{flex:none;margin:0;height:clamp(250px,26vw,370px);scroll-snap-align:start;overflow:hidden;background:#e7dcc6}
.ks-kg-reel img{width:100%;height:100%;object-fit:cover;display:block}
.ks-kg-r-wide{aspect-ratio:3/2;border-radius:28px}
.ks-kg-r-arch{aspect-ratio:3/4;border-radius:999px 999px 28px 28px}
.ks-kg-r-round{aspect-ratio:1;border-radius:50%}
/* Mouse users get a slim gold scrollbar to reach the photos off screen (touch swipes). */
@media (pointer:fine){
  .ks-kg-reel{scrollbar-width:thin;scrollbar-color:var(--gold) rgba(6,58,97,.08);padding-bottom:22px}
}

/* 4 · What we offer: heading on the start side, four soft cards. */
.ks-kg-offers{background:#fff;padding:clamp(88px,10vw,136px) 0}
.ks-kg-offers-grid{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.5fr);gap:clamp(32px,5vw,80px);align-items:center}
.ks-kg-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.ks-kg-card{background:var(--cream);border-radius:28px;padding:30px 30px 32px}
.ks-kg-card:nth-child(2),.ks-kg-card:nth-child(3){background:var(--paper);box-shadow:inset 0 0 0 1.5px #EFE4CF}
.ks-kg-ic{width:58px;height:58px;border-radius:50%;background:#fff;display:grid;place-items:center;color:var(--maroon);box-shadow:0 12px 26px -18px rgba(138,26,31,.6)}
.ks-kg-ic svg{width:27px;height:27px}
.ks-kg-card h3{font-size:24px;font-weight:600;margin-top:20px}
.ks-kg-card p{font-size:17px;line-height:1.65;color:var(--ink2);margin:10px 0 0}

/* 5 · Ending: the page's own photo on the end side, fading into cream under the words. */
.ks-kg-end{position:relative;min-height:clamp(460px,46vw,620px);display:flex;align-items:center;overflow:hidden;background:var(--cream)}
.ks-kg-end-ph{position:absolute;inset-block:0;inset-inline-end:0;width:66%}
.ks-kg-end-ph img{width:100%;height:100%;object-fit:cover;object-position:62% 40%;display:block;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 34%);mask-image:linear-gradient(to right,transparent 0,#000 34%)}
[dir="rtl"] .ks-kg-end-ph img{-webkit-mask-image:linear-gradient(to left,transparent 0,#000 34%);mask-image:linear-gradient(to left,transparent 0,#000 34%)}
.ks-kg-end .ks-kg-wrap{position:relative;z-index:1;width:100%}
.ks-kg-end-copy{max-width:520px}
/* Mid widths: a narrower photo and copy so the words stay on cream, clear of the girl. */
@media (min-width:900px) and (max-width:1199px){
  .ks-kg-end-ph{width:54%}
  .ks-kg-end-copy{max-width:min(520px,42vw)}
}
.ks-kg-end p{font-size:19px;line-height:1.7;color:var(--ink);margin:18px 0 0}

/* Kurdish/Arabic: Noto Kufi headings need more line height and a smaller top size;
   letter-spacing breaks the joined script, uppercase does nothing. */
:lang(ckb) .ks-kg :is(h1,h2,h3),:lang(ar) .ks-kg :is(h1,h2,h3){letter-spacing:0;line-height:1.35;font-variation-settings:normal}
:lang(ckb) .ks-kg-hero h1,:lang(ar) .ks-kg-hero h1{font-size:clamp(34px,3.6vw,54px);max-width:12em}
:lang(ckb) .ks-kg :is(.ks-kg-day-head,.ks-kg-offers,.ks-kg-end) h2,:lang(ar) .ks-kg :is(.ks-kg-day-head,.ks-kg-offers,.ks-kg-end) h2{font-size:clamp(28px,3.3vw,46px)}
:lang(ckb) .ks-kg h2 em,:lang(ar) .ks-kg h2 em{font-style:normal}
:lang(ckb) .ks-kg :is(.ks-kg-label,.ks-kg-pill),:lang(ar) .ks-kg :is(.ks-kg-label,.ks-kg-pill){letter-spacing:0;font-size:14px}
:lang(ckb) .ks-kg-stop h3,:lang(ar) .ks-kg-stop h3{font-size:clamp(17px,1.5vw,20px)}
[dir="rtl"] .ks-kg-arc > svg{transform:scaleX(-1)}
/* The arch photo is never mirrored, so in RTL the circle lands under the other boy, who sits
   lower in the frame: drop it a little so it clears his chin. */
@media (min-width:900px){[dir="rtl"] .ks-kg-circle{bottom:2%}}

@media (max-width:1100px){
  .ks-kg-offers-grid{grid-template-columns:1fr;gap:34px}
}
/* Short laptop screens (1366×768, 1280×720): keep the hero's buttons above the fold. */
@media (min-width:900px) and (max-height:860px){
  .ks-kg-hero{padding-top:96px}
  .ks-kg-hero-grid{margin-top:12px}
  .ks-kg-hero h1{font-size:clamp(40px,4.3vw,62px);margin-top:16px}
  .ks-kg-lead{font-size:18px;margin-top:16px}
  .ks-kg-hero .ks-kg-acts{margin-top:22px}
  .ks-kg-arch{width:min(100%,460px)}
  :lang(ckb) .ks-kg-hero h1,:lang(ar) .ks-kg-hero h1{font-size:clamp(30px,3.1vw,44px)}
  :lang(ckb) .ks-kg-lead,:lang(ar) .ks-kg-lead{line-height:1.6}
}
@media (max-width:899px){
  .ks-kg-hero-grid{grid-template-columns:1fr;gap:34px}
  .ks-kg-arch{order:-1;justify-self:center;width:min(100%,430px);aspect-ratio:6/7}
  .ks-kg-circle{inset-inline-start:-4%;bottom:-6%;width:38%;border-width:7px}
  .ks-kg-sun{inset-inline-end:-2%;width:22%}
  .ks-kg-hero h1{max-width:none}
  .ks-kg-arc{container-type:normal;margin-top:44px}
  .ks-kg-arc > svg{display:none}
  .ks-kg-stops{grid-template-columns:1fr;padding-inline-start:4px}
  /* one connector per stop, from its dot centre to the next one */
  .ks-kg-stop:not(:last-child)::before{content:"";position:absolute;inset-inline-start:calc(var(--d) / 2 - 1.25px);top:calc(var(--d) / 2);height:100%;width:2.5px;background:rgba(200,153,58,.7)}
  .ks-kg-stop{--d:92px;display:grid;grid-template-columns:var(--d) 1fr;column-gap:18px;text-align:start;margin-top:0;padding:0 0 26px;position:relative}
  .ks-kg-dot{grid-row:span 3;margin:0;border-width:5px;position:relative;z-index:1}
  .ks-kg-stop .ks-kg-label{margin-top:12px}
  .ks-kg-stop p{margin:6px 0 0;max-width:none}
  .ks-kg-end{min-height:0;display:block}
  .ks-kg-end-ph{position:relative;width:auto;inset:auto}
  .ks-kg-end-ph img,[dir="rtl"] .ks-kg-end-ph img{height:auto;aspect-ratio:4/3;object-position:82% 40%;-webkit-mask-image:linear-gradient(to bottom,#000 70%,transparent);mask-image:linear-gradient(to bottom,#000 70%,transparent)}
  .ks-kg-end .ks-kg-wrap{padding-top:8px;padding-bottom:64px}
  .ks-kg-reel figure{height:min(230px,52vw)}
}
@media (max-width:560px){
  .ks-kg-cards{grid-template-columns:1fr}
  .ks-kg-acts .ks-kg-btn{flex:1 1 auto}
}
@media (prefers-reduced-motion:reduce){
  .ks-kg-btn{transition:none}
}