/* Zanjireh Academy («آموزش») — the home section and academy.html. Built only from the v4 tokens (v4.css). */

/* ---------- shared: a lesson card ---------- */
.ac-card{position:relative;display:flex;flex-direction:column;text-decoration:none;color:var(--tx);background:var(--surface);border:1px solid var(--line);border-radius:var(--r1);overflow:hidden;transition:transform .45s var(--ease),border-color .3s,background .3s}
.ac-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--z,var(--brass)) 55%,transparent)}
.ac-card:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.ac-card__img{position:relative;aspect-ratio:16/9;background:var(--bg2) center/cover no-repeat;overflow:hidden}
.ac-card__img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.ac-card:hover .ac-card__img img{transform:scale(1.04)}
.ac-card__img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(15,13,11,.78))}
.ac-card__play{position:absolute;inset:auto auto 12px 12px;z-index:1;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:rgba(15,13,11,.55);border:1px solid rgba(242,236,224,.28);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .3s,transform .3s var(--ease)}
.ac-card__play::before{content:"";margin-left:3px;border-style:solid;border-width:8px 0 8px 13px;border-color:transparent transparent transparent var(--tx)}
.ac-card:hover .ac-card__play{background:var(--z,var(--brass));transform:scale(1.08)}
.ac-card__dur{position:absolute;right:12px;bottom:14px;z-index:1;font-size:12px;font-family:var(--display);font-weight:700;color:var(--tx);background:rgba(15,13,11,.6);padding:2px 9px;border-radius:999px}
.ac-card__bar{height:3px;background:var(--z,var(--brass))}
.ac-card__prog{position:absolute;left:0;right:0;bottom:0;z-index:2;height:3px;background:rgba(242,236,224,.12)}
.ac-card__prog i{display:block;height:100%;width:0;background:var(--z,var(--brass))}
.ac-card__body{display:flex;flex-direction:column;gap:6px;padding:var(--s4) var(--s4) var(--s5)}
.ac-card__kick{font-size:12px;color:var(--tx3);display:flex;gap:var(--s2);align-items:center}
.ac-card__kick .gem-dot{width:9px;height:9px;border-radius:50%;background:var(--z,var(--brass));box-shadow:0 0 10px color-mix(in srgb,var(--z,var(--brass)) 60%,transparent)}
.ac-card h3{margin:0;font-family:var(--display);font-weight:700;font-size:var(--t17);line-height:1.5}
.ac-card p{margin:0;font-size:var(--t13);line-height:1.8;color:var(--tx3)}
.ac-card__done{position:absolute;top:10px;left:10px;z-index:2;font-size:12px;font-weight:700;color:#0F0D0B;background:var(--ok);padding:2px 9px;border-radius:999px}
.ac-card.is-now{border-color:var(--z,var(--brass));background:color-mix(in srgb,var(--z,var(--brass)) 10%,var(--surface))}
.ac-card.is-now .ac-card__play{background:var(--z,var(--brass))}

/* ---------- home: section #academy ---------- */
.aca{padding:var(--s10) 0;position:relative}
.aca::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(45% 55% at 85% 20%,rgba(215,178,107,.08),transparent 70%)}
.aca__head{display:grid;grid-template-columns:1.1fr 1fr;gap:var(--s8);align-items:end;margin-bottom:var(--s7)}
.aca__head .lead{margin-bottom:0}
.aca__facts{display:flex;gap:var(--s6);margin:0;padding:0;list-style:none}
.aca__facts b{display:block;font-family:var(--display);font-size:var(--t33);line-height:1.2;color:var(--brass)}
.aca__facts span{font-size:var(--t13);color:var(--tx3)}
.aca__stage{display:grid;grid-template-columns:1.35fr 1fr;gap:var(--s5);align-items:stretch}
.aca__hero{position:relative;display:block;border-radius:var(--r2);overflow:hidden;min-height:360px;text-decoration:none;color:var(--tx);border:1px solid var(--line2);background:var(--bg2)}
.aca__hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 22%;transition:transform 1.2s var(--ease)}
.aca__hero:hover img{transform:scale(1.03)}
.aca__hero::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(15,13,11,.94) 0%,rgba(15,13,11,.35) 48%,transparent 75%),linear-gradient(270deg,transparent 40%,rgba(15,13,11,.35))}
.aca__heroTxt{position:absolute;right:0;left:0;bottom:0;z-index:1;padding:var(--s6);display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s5)}
.aca__heroTxt small{display:block;font-size:var(--t13);color:var(--brass);margin-bottom:4px}
.aca__heroTxt h3{margin:0;font-family:var(--display);font-size:var(--t33);line-height:1.25}
.aca__heroTxt p{margin:6px 0 0;color:var(--tx2);font-size:var(--t15)}
.aca__big{flex:none;width:76px;height:76px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(140deg,#F3D9A0,var(--brass) 50%,var(--brass2));box-shadow:0 10px 40px -8px rgba(215,178,107,.6);transition:transform .4s var(--ease)}
.aca__big::before{content:"";margin-left:5px;border-style:solid;border-width:13px 0 13px 21px;border-color:transparent transparent transparent #20170A}
.aca__hero:hover .aca__big{transform:scale(1.08)}
.aca__big::after{content:"";position:absolute;width:76px;height:76px;border-radius:50%;border:1px solid rgba(215,178,107,.6);animation:acaPulse 2.6s var(--ease) infinite}
@keyframes acaPulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.7);opacity:0}}
.aca__side{display:grid;grid-template-rows:1fr 1fr;gap:var(--s5)}
.aca__side .ac-card{flex-direction:row}
.aca__side .ac-card__img{aspect-ratio:auto;flex:0 0 46%}
.aca__side .ac-card__body{justify-content:center}
.aca__railHead{display:flex;justify-content:space-between;align-items:center;margin:var(--s7) 0 var(--s4)}
.aca__railHead h3{margin:0;font-family:var(--display);font-size:var(--t21)}
.aca__arrows{display:flex;gap:var(--s2)}
.aca__arrows button{width:44px;height:44px;border-radius:50%;border:1px solid var(--line2);background:transparent;color:var(--tx);font-size:20px;cursor:pointer}
.aca__arrows button:hover{background:rgba(242,236,224,.06)}
.aca__rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(250px,23%);gap:var(--s4);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:var(--s3);scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
.aca__rail>*{scroll-snap-align:start}
.aca__acts{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s6)}

/* ---------- academy.html ---------- */
.acp{padding:110px 0 var(--s9);background:radial-gradient(60% 40% at 70% 0%,color-mix(in srgb,var(--z,var(--brass)) 14%,transparent),transparent 70%),var(--bg);transition:background 1s}
.acp__intro{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s6);margin-bottom:var(--s6)}
.acp__intro .h2{font-size:clamp(30px,3.6vw,var(--t56))}
.acp__intro p{margin:var(--s3) 0 0;color:var(--tx2);max-width:36em}
.acp__total{display:flex;gap:var(--s5);font-size:var(--t13);color:var(--tx3);white-space:nowrap}
.acp__total b{display:block;font-family:var(--display);font-size:var(--t26);color:var(--tx)}

.acp__theater{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(300px,1fr);gap:var(--s5);align-items:start}
.acp__player{position:relative;z-index:5}
@media (min-height:820px) and (min-width:1001px){.acp__player{position:sticky;top:84px}}
button.btn{font:inherit;font-family:var(--display);font-weight:700;font-size:var(--t15);cursor:pointer;background:transparent;color:var(--tx);border:1px solid var(--line2)}
button.btn--brass{border:0}
button.btn--ghost:hover{background:rgba(242,236,224,.06)}
.acp__screen{position:relative;border-radius:var(--r1);overflow:hidden;background:#000;border:1px solid var(--line2);aspect-ratio:16/9;box-shadow:0 30px 90px -30px rgba(0,0,0,.8),0 0 0 1px color-mix(in srgb,var(--z,var(--brass)) 30%,transparent)}
.acp__screen video{display:block;width:100%;height:100%;background:#000}
.acp__cover{position:absolute;inset:0;border:0;padding:0;cursor:pointer;background:#000 center/cover no-repeat;display:grid;place-items:center;transition:opacity .4s}
.acp__cover::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at center,rgba(15,13,11,.15),rgba(15,13,11,.6))}
.acp__cover .aca__big{position:relative}
.acp__cover.is-off{opacity:0;pointer-events:none}
.acp__resume{position:absolute;top:12px;right:12px;z-index:3;display:none;gap:var(--s2);align-items:center;font-size:var(--t13);background:rgba(15,13,11,.82);border:1px solid var(--line2);border-radius:999px;padding:6px 8px 6px 14px}
.acp__resume.is-on{display:flex}
.acp__resume button{font:inherit;font-weight:700;border:0;border-radius:999px;padding:4px 12px;cursor:pointer;background:var(--brass);color:#20170A}
.acp__resume button+button{background:transparent;color:var(--tx2)}
.acp__next{position:absolute;inset:0;z-index:4;display:none;flex-direction:column;align-items:center;justify-content:center;gap:var(--s3);background:rgba(15,13,11,.86);text-align:center;padding:var(--s5)}
.acp__next.is-on{display:flex}
.acp__next small{color:var(--tx3)}
.acp__next strong{font-family:var(--display);font-size:var(--t26)}
.acp__next .row{justify-content:center}

/* chapter strip under the video: one segment per chapter, filled as it plays */
.acp__strip{display:flex;gap:3px;margin-top:var(--s3);direction:ltr}
.acp__strip button{position:relative;flex:1 1 0;height:8px;border:0;padding:0;border-radius:4px;background:rgba(242,236,224,.12);cursor:pointer;overflow:hidden}
.acp__strip button i{position:absolute;inset:0 auto 0 0;width:0;background:var(--z,var(--brass))}
.acp__strip button:hover{background:rgba(242,236,224,.22)}
.acp__strip button[aria-current] {box-shadow:0 0 0 1px var(--z,var(--brass))}
.acp__now{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);margin-top:var(--s3);font-size:var(--t13);color:var(--tx3)}
.acp__now b{color:var(--tx);font-family:var(--display)}
.acp__tools{display:flex;gap:var(--s2)}
.acp__tools button{font:inherit;font-size:12px;font-weight:700;color:var(--tx2);background:transparent;border:1px solid var(--line2);border-radius:999px;padding:4px 12px;cursor:pointer}
.acp__tools button[aria-pressed="true"]{color:#20170A;background:var(--brass);border-color:var(--brass)}

.acp__info{margin-top:var(--s5)}
.acp__info small{color:var(--z,var(--brass));font-size:var(--t13);font-weight:700}
.acp__info h1{margin:4px 0 0;font-family:var(--display);font-size:var(--t33);line-height:1.3}
.acp__info p{margin:var(--s2) 0 var(--s4);color:var(--tx2)}
.acp__meta{display:flex;flex-wrap:wrap;gap:var(--s2);margin-bottom:var(--s4)}

/* side panel: chapters + transcript */
.acp__panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r1);display:flex;flex-direction:column;max-height:calc(100vh - 110px);position:sticky;top:84px}
.acp__tabs{display:flex;border-bottom:1px solid var(--line);flex:none}
.acp__tabs button{flex:1;font:inherit;font-family:var(--display);font-weight:700;font-size:var(--t15);color:var(--tx3);background:transparent;border:0;padding:14px 8px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.acp__tabs button[aria-selected="true"]{color:var(--tx);border-bottom-color:var(--z,var(--brass))}
.acp__pane{overflow-y:auto;padding:var(--s3);scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
.acp__pane[hidden]{display:none}
.acp__ch{display:grid;grid-template-columns:96px 1fr;gap:var(--s3);align-items:center;width:100%;text-align:right;font:inherit;color:var(--tx);background:transparent;border:1px solid transparent;border-radius:10px;padding:6px;cursor:pointer;transition:background .25s,border-color .25s}
.acp__ch:hover{background:rgba(242,236,224,.05)}
.acp__ch[aria-current]{background:color-mix(in srgb,var(--z,var(--brass)) 14%,transparent);border-color:color-mix(in srgb,var(--z,var(--brass)) 45%,transparent)}
.acp__ch img{width:96px;aspect-ratio:16/9;object-fit:cover;border-radius:6px;background:var(--bg2)}
.acp__ch b{display:block;font-size:var(--t15);line-height:1.5}
.acp__ch small{display:flex;gap:var(--s2);font-size:12px;color:var(--tx3)}
.acp__ch .st{color:var(--z,var(--brass));font-weight:700}
.acp__tr{margin:0;padding:0;list-style:none}
.acp__tr li{padding:2px 0}
.acp__tr button{display:block;width:100%;text-align:right;font:inherit;font-size:var(--t15);line-height:1.9;color:var(--tx3);background:transparent;border:0;border-radius:8px;padding:6px 10px;cursor:pointer;transition:color .2s,background .2s}
.acp__tr button:hover{color:var(--tx)}
.acp__tr button[aria-current]{color:var(--tx);background:color-mix(in srgb,var(--z,var(--brass)) 16%,transparent)}
.acp__tr .sec{display:block;font-size:12px;font-weight:700;color:var(--z,var(--brass));padding:12px 10px 2px}
.acp__note{font-size:12px;color:var(--tx4);padding:var(--s3) var(--s2) 0}

/* the course list */
.acp__list{margin-top:var(--s8)}
.acp__group{margin-bottom:var(--s7)}
.acp__group header{display:flex;align-items:baseline;gap:var(--s4);margin-bottom:var(--s4)}
.acp__group h2{margin:0;font-family:var(--display);font-size:var(--t26)}
.acp__group header span{color:var(--tx3);font-size:var(--t13)}
.acp__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4)}
.acp__grid--one{grid-template-columns:minmax(0,1fr)}
.acp__grid--one .ac-card{flex-direction:row}
.acp__grid--one .ac-card__img{flex:0 0 min(46%,520px);aspect-ratio:16/9}
.acp__grid--one .ac-card__body{justify-content:center;padding:var(--s5) var(--s6)}
.acp__grid--one .ac-card h3{font-size:var(--t26)}

@media (max-width:1200px){.acp__grid{grid-template-columns:repeat(3,minmax(0,1fr))}.aca__rail{grid-auto-columns:minmax(240px,31%)}}
@media (max-width:1000px){
  .aca{padding:var(--s9) 0}
  .aca__head{grid-template-columns:1fr;gap:var(--s5)}
  .aca__stage{grid-template-columns:1fr}
  .aca__hero{min-height:260px}
  .aca__heroTxt{padding:var(--s5)}
  .aca__heroTxt h3{font-size:var(--t26)}
  .aca__big,.aca__big::after{width:60px;height:60px}
  .aca__rail{grid-auto-columns:minmax(230px,72%)}
  .aca__arrows{display:none}
  .acp{padding-top:76px}
  .acp__intro{flex-direction:column;align-items:flex-start}
  .acp__theater{grid-template-columns:1fr;gap:var(--s3)}
  .acp__player{display:contents}
  .acp__screen{position:sticky;top:60px;z-index:6;margin:0 -20px;border-radius:0;border-left:0;border-right:0}
  .acp__now{flex-wrap:wrap}
  .acp__info{margin-top:var(--s4)}
  .acp__info h1{font-size:var(--t26)}
  .acp__panel{position:static;max-height:none}
  .acp__pane{max-height:60vh}
  .acp__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .acp__grid--one .ac-card{flex-direction:column}
  .acp__grid--one .ac-card__img{flex:none;width:100%}
}
@media (max-width:560px){
  .aca__side{grid-template-rows:none}
  .aca__side .ac-card{flex-direction:column}
  .aca__side .ac-card__img{flex:none;aspect-ratio:16/9}
  .acp__grid{grid-template-columns:1fr}
  .acp__total{gap:var(--s4)}
}
@media (prefers-reduced-motion:reduce){
  .aca__big::after{animation:none}
  .ac-card,.ac-card__img img,.aca__hero img{transition:none}
}