/* Zirva website v9: detail fixes and the shared pieces for the teacher and school pages. */

/* grading demo: segmented progress, one segment per piece of work (same idea as lesson steps) */
.gd-top{gap:14px}
.gd-seg{flex:1;display:flex;gap:5px}
.gd-seg i{position:relative;flex:1;height:10px;border-radius:5px;background:rgba(255,255,255,.16);overflow:hidden}
.gd-seg i::after{content:"";position:absolute;inset:0;border-radius:5px;background:var(--group-tangerine);transform:scaleX(0);transform-origin:left;transition:transform 420ms var(--ease-out)}
.gd-seg i.on::after{transform:none}
.gd-seg i.now{box-shadow:inset 0 0 0 2px var(--group-tangerine)}
.lp-stagebox .gd-seg i{background:rgba(22,27,38,.1)}

/* student card path: room between the nodes so the current ring never touches its neighbour */
.zi2-path{gap:30px}
.zi2-road{left:20px;right:20px;background:linear-gradient(90deg,var(--color-success) 0 58%,var(--color-border-strong) 58%)}

/* ---------- shared pieces for subpages ---------- */
.sp-hero{padding:176px 0 0;text-align:center;overflow:hidden;position:relative}
.sp-hero h1{font:600 88px/88px var(--font-family-display);letter-spacing:-.05em;margin:0 auto;max-width:13ch}
.sp-hero h1 em{font-style:normal;display:block}
.sp-hero .lp-lead{margin:28px auto 0;font-size:21px;line-height:32px;max-width:42ch}
.sp-hero .zhero-act{margin-top:36px}
@media (max-width:640px){.sp-hero{padding-top:120px}.sp-hero h1{font-size:46px;line-height:50px}}
.em-c{color:var(--group-cobalt)} .em-g{color:var(--color-success)} .em-t{color:var(--group-tangerine)}

/* mini demos inside colour panels */
.zmini{width:100%;max-width:460px;padding:26px;border-radius:30px;background:var(--color-surface);color:var(--color-text);box-shadow:0 30px 70px rgba(0,0,0,.22)}
.zmini h4{font:600 18px/24px var(--font-family-ui)}
.zmini .lp-small{display:block;margin-bottom:6px}

/* steps on a road (school pilot) */
.zroad{position:relative;display:grid;gap:18px;margin-top:56px}
@media (min-width:900px){.zroad{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}}
.zroad::before{content:"";position:absolute;left:30px;top:30px;bottom:30px;width:8px;border-radius:4px;background:linear-gradient(var(--color-success) 0 25%,var(--color-border-strong) 25%)}
@media (min-width:900px){.zroad::before{left:12%;right:12%;top:26px;bottom:auto;width:auto;height:8px;background:linear-gradient(90deg,var(--color-success) 0 18%,var(--color-border-strong) 18%)}}
.zr-step{position:relative;display:grid;grid-template-columns:60px minmax(0,1fr);gap:16px;align-items:start}
@media (min-width:900px){.zr-step{grid-template-columns:1fr;justify-items:center;text-align:center}}
.zr-n{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;font:600 22px/1 var(--font-family-display);background:var(--color-surface-sunken);color:var(--color-text-secondary);box-shadow:inset 0 -5px 0 rgba(0,0,0,.06),0 0 0 6px var(--color-canvas);padding-bottom:5px}
.zr-step.first .zr-n{background:var(--color-success);color:#fff;box-shadow:inset 0 -5px 0 rgba(0,0,0,.2),0 0 0 6px var(--color-canvas)}
.zr-step b{display:block;font:600 20px/26px var(--font-family-ui);margin-top:6px}
.zr-step>div>span{display:block;font:var(--type-body-md);color:var(--color-text-secondary);margin-top:4px;max-width:28ch}
@media (min-width:900px){.zr-step>div>span{margin-left:auto;margin-right:auto}}

/* role switcher for the school page */
.zroles{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:40px}
.zroles button{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 20px 3px 8px;border:0;border-radius:999px;background:var(--color-surface);box-shadow:inset 0 0 0 1.5px var(--color-border-strong),inset 0 -3px 0 var(--color-surface-sunken);font:var(--type-label-lg);color:var(--color-text);cursor:pointer;transition:transform 120ms var(--ease-out)}
.zroles button:active{transform:translateY(2px)}
.zroles .ic{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--c);color:#fff;font-size:18px;box-shadow:inset 0 -3px 0 rgba(0,0,0,.18);padding-bottom:3px}
.zroles button[aria-selected="true"]{background:var(--color-text);color:#fff;box-shadow:inset 0 -3px 0 rgba(255,255,255,.12)}
.zrole-panel{display:grid;gap:40px;align-items:center;margin-top:48px}
@media (min-width:980px){.zrole-panel{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px}}
.zrole-panel[hidden]{display:none}
.zrole-panel h3{font:600 36px/42px var(--font-family-display);letter-spacing:-.03em}
.zrole-panel .zi2-list{margin:20px 0 0}
.zrole-panel .lp-shot{box-shadow:0 30px 70px rgba(22,27,38,.12)}

/* safety block on dark */
.zsafe{display:grid;gap:12px;margin-top:48px}
@media (min-width:900px){.zsafe{grid-template-columns:repeat(4,minmax(0,1fr))}}
.zsafe div{padding:22px;border-radius:24px;background:rgba(255,255,255,.07)}
.zsafe i{font-size:28px;color:#fff}
.zsafe b{display:block;margin-top:14px;font:600 19px/25px var(--font-family-ui);color:#fff}
.zsafe span{display:block;margin-top:6px;font:var(--type-body-md);color:rgba(255,255,255,.7)}

@media (prefers-reduced-motion:reduce){.gd-seg i::after{transition:none}}

/* detail fixes */
h1,.lp-h2,.zf-big,.zend h2{text-wrap:balance}
.sp-hero .zst .s1{top:-72px;left:3%}
.sp-hero .zst .s2{top:-64px;right:3%}
@media (max-width:899px){.sp-hero .zst .s1{top:-56px;left:0}.sp-hero .zst .s2{top:-52px;right:0}}
.zi2{grid-template-columns:minmax(0,1fr)}
@media (min-width:980px){.zi2{grid-template-columns:repeat(3,minmax(0,1fr))}}
.zi2-card{min-width:0}
@media (max-width:420px){.zi2-path{gap:16px}.zi2-node{width:42px;height:42px;font-size:18px}.zi2-node.now{width:52px;height:52px;font-size:22px}.zi2-top{padding:16px 10px}.zi2-scores button{min-height:44px}}