/* Course page (/course/<slug>/): hero with player, text, "what is inside", FAQ, other courses (landing cards), link to the studio.
   Built on the landing tokens (--red, --ink, --disp …). */
.cs{padding-top:calc(var(--hdr) + clamp(22px,3.4vw,48px));padding-bottom:clamp(90px,10vw,150px);overflow-x:clip}
.cs-preview{margin:0 0 18px;padding:10px 14px;border-left:4px solid #f3c94a;background:rgba(243,201,74,.1);font-size:14px;font-weight:700}

/* hero */
.cs-hero{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(26px,5.5vw,84px);align-items:center;padding-bottom:clamp(54px,8vw,120px)}
.cs-hero-txt{display:grid;gap:clamp(16px,2vw,26px);justify-items:start;min-width:0}
.cs-title{font:700 var(--fs-h1)/.86 var(--disp);text-transform:uppercase;letter-spacing:-.01em;overflow-wrap:anywhere}
html[lang=hy] .cs-title{line-height:1}
.cs-lead{max-width:50ch;font-size:clamp(17px,1.7vw,21px);line-height:1.55;opacity:.9}
.cs-buy{display:flex;flex-wrap:wrap;align-items:center;gap:16px 26px;margin-top:6px}
.cs-buy .btn{flex:0 0 auto}
.cs-note{display:grid;gap:4px;max-width:46ch;padding:14px 18px;border-left:4px solid var(--red);background:rgba(255,255,255,.04)}
.cs-note b{font:700 15px/1.3 var(--sans);text-transform:uppercase;letter-spacing:.06em}
.cs-note span{font-size:15.5px;opacity:.85}
.cs-price{font:700 clamp(30px,3.6vw,50px)/1 var(--disp);letter-spacing:.01em}
.cs-price del{opacity:.45;font-size:.62em;margin-right:8px}
.cs-price ins{text-decoration:none;color:var(--red-2)}
.cs-media{margin:0;position:relative;aspect-ratio:4/5;max-height:78vh;justify-self:center;width:min(100%,520px)}
.cs-media::before{content:"";position:absolute;inset:-14px 14px 14px -14px;background:var(--red);clip-path:polygon(0 0,calc(100% - 30px) 0,100% 30px,100% 100%,30px 100%,0 calc(100% - 30px))}
.cs-media img,.cs-media video{position:relative;display:block;width:100%;height:100%;object-fit:cover;background:#111;clip-path:polygon(0 0,calc(100% - 30px) 0,100% 30px,100% 100%,30px 100%,0 calc(100% - 30px))}
.cs-media.has-video{aspect-ratio:9/16;max-height:80vh;width:min(100%,calc(80vh*9/16))}

/* generic sections */
.cs-sec{padding-block:clamp(34px,5vw,72px);border-top:1px solid var(--line)}
.cs-sec>.tag{margin-bottom:clamp(20px,3vw,34px)}

.cs-desc{display:grid;gap:14px;max-width:60ch;font-size:clamp(16px,1.4vw,18px)}
.cs-desc p{opacity:.88;margin:0}

/* faq (the first answer is the 4 steps of enrolling) */
.cs-faq{display:grid;max-width:820px}
.cs-faq details{border-top:1px solid var(--line);padding:0}
.cs-faq details:last-child{border-bottom:1px solid var(--line)}
.cs-faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;padding:20px 4px;font:700 clamp(17px,1.6vw,21px)/1.3 var(--sans)}
.cs-faq summary::-webkit-details-marker{display:none}
.cs-faq summary::after{content:"+";font:400 28px/1 var(--sans);color:var(--red);transition:transform .25s}
.cs-faq details[open] summary::after{transform:rotate(45deg)}
.cs-faq details[data-closing] summary::after{transform:none}
.cs-faq p{padding:0 4px 22px;max-width:62ch;opacity:.85}
.cs-faq .cs-steps{list-style:none;margin:0;padding:0 4px 24px;display:grid;gap:16px;max-width:62ch;counter-reset:s}
.cs-faq .cs-steps li{display:grid;gap:2px;padding-left:48px;position:relative;counter-increment:s}
.cs-faq .cs-steps li::before{content:counter(s);position:absolute;left:0;top:0;width:34px;height:34px;display:grid;place-items:center;font:700 19px/1 var(--disp);color:#fff;background:var(--red)}
.cs-faq .cs-steps h3{font:700 var(--fs-h3)/1.3 var(--sans)}
.cs-faq .cs-steps p{padding:0;font-size:15.5px}

/* other courses: the landing cards in a grid of three (no stagger) */
.cs-more .cards--more{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,36px)}
.cs-more .cards--more .card:nth-child(n){margin-top:0}

/* sticky bar */
.cs-sticky{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom));background:rgba(10,10,10,.96);border-top:2px solid var(--red);backdrop-filter:blur(8px)}
.cs-sticky[hidden]{display:none}
.cs-sticky-p{font:700 24px/1 var(--disp)}
.cs-sticky-p del{opacity:.45;font-size:.65em;margin-right:6px}
.cs-sticky-p ins{text-decoration:none;color:var(--red-2)}
.cs-sticky .btn{min-height:50px;padding:0 24px}
@media(min-width:900px){.cs-sticky{display:none!important}}

@media(max-width:900px){
  .cs-hero{grid-template-columns:1fr}
  .cs-media{order:-1;width:min(100%,420px);aspect-ratio:1/1;max-height:none;margin-bottom:10px}
  .cs-media.has-video{aspect-ratio:9/16;width:min(100%,340px)}
  .cs-media::before{inset:-10px 10px 10px -10px}
}
@media(max-width:900px){
  .cs-more .cards--more{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
  .cs-more .cards--more{grid-template-columns:1fr}
  .cs-more .cards--more .card:nth-child(n){margin:0 auto;max-width:360px;width:100%}
}
@media(max-width:520px){
  .cs-buy .btn{width:100%}
}

/* player = the landing card: grayscale poster, red play button (becomes pause), the video replaces the poster while it plays */
.cs-player{cursor:pointer}
.cs-player .card-m{position:absolute;inset:0;aspect-ratio:auto}
.cs-media.cs-player video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;clip-path:polygon(0 5%,100% 0,100% 100%,0 100%);transition:opacity .35s}
.cs-player.is-playing video{opacity:1}
.cs-player.is-playing .card-m img{filter:none}
.cs-player .play{position:absolute;z-index:3;right:18px;top:calc(5% + 14px);width:68px;height:68px;display:grid;place-items:center;background:var(--red);clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));transition:background .25s}
.cs-player .play svg{width:24px;height:24px;fill:#fff;transition:fill .25s}
.cs-player .play svg:first-child{margin-left:3px}
.cs-player .i-pause{display:none}
.cs-player.is-playing .play svg:first-child{display:none}
.cs-player.is-playing .i-pause{display:block}
.cs-player:hover .play,.cs-player .play:focus-visible{background:var(--ink)}
.cs-player:hover .play svg,.cs-player .play:focus-visible svg{fill:#0a0a0a}
.cs-player.is-playing .play{opacity:.0;transition:opacity .3s,background .25s}
.cs-player.is-playing:hover .play,.cs-player.is-playing .play:focus-visible{opacity:1}
@media(hover:none){.cs-player.is-playing .play{opacity:.85}}