/* =====================================================================================================
   pages/course.css · /kursy/<slug> course showcase (Витрина). Phone first; tokens only.
   ===================================================================================================== */
.crs{--sp:var(--math);--cv:var(--math-cv);padding-bottom:10px}
.crs-fiz{--sp:var(--fiz);--cv:var(--fiz-cv)}
.crs-him{--sp:var(--him);--cv:var(--him-cv)}

/* header: title on a coloured cover band, then the free lesson */
.crs-head{position:relative;margin-top:8px;padding:16px 14px 16px 26px;background:var(--cv);border-radius:4px 12px 12px 4px;box-shadow:var(--sh-1)}
.crs-head::before{content:"";position:absolute;left:0;top:0;bottom:0;width:12px;border-radius:4px 0 0 4px;background:var(--sp);box-shadow:inset -3px 0 0 rgba(0,0,0,.14)}
.crs-head .kick{color:var(--sp);margin-bottom:2px}
.crs-h{margin:0 0 10px;font-size:clamp(27px,4.4vw + 10px,48px)}
.crs-meta{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 16px;font-size:16px;color:var(--ink-2)}
.crs-meta li{display:inline-flex;align-items:center;gap:6px}
.crs-meta .ico{width:20px;height:20px;color:var(--sp)}
.crs-price{margin:10px 0 0}
.crs-price a{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;min-height:44px;padding:6px 0;color:var(--ink);text-decoration:none}
.crs-price a:hover .crs-price-l{text-decoration:underline}
.crs-price-now{font:800 22px/1.1 var(--f-head);font-variant-numeric:tabular-nums;white-space:nowrap}
.crs-price s{font-size:16px;color:var(--pencil);text-decoration-color:var(--pen);white-space:nowrap}
.crs-price-l{font-size:16px;color:var(--blue);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px}
.crs-head .plaque{margin-top:14px}
.crs-try{display:grid;gap:14px;margin-top:16px;padding:14px;background:var(--sheet);border:1.5px solid var(--ink);border-radius:4px}
.crs-poster{display:block}
.crs-poster img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.crs-try-text{display:grid;justify-items:start;gap:8px}
.crs-free{margin:0;font:600 17px/1.35 var(--f-text)}
.crs-try .btn{width:100%}
.crs-try-note{margin:0;font-size:16px;color:var(--pencil)}

/* what is inside */
.crs-inside{padding-bottom:0}
.inside{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.inside li{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;background:var(--sheet);border-radius:4px;box-shadow:var(--sh-1);line-height:1.45}
.inside .ico{flex:none;color:var(--sp)}

/* programme */
.crs-prog .sec-h{margin-bottom:12px}
.crs-prog .sec-h h2{font-size:clamp(22px,2vw + 14px,32px)}
.crs-prog .blk{background:var(--sheet);border-radius:4px;box-shadow:var(--sh-1);padding:12px 8px 8px}
.crs-prog .blk-h{padding:0 6px 6px}

/* buy */
.buy-grid{display:grid;gap:22px}
.buy-price{display:grid;gap:10px;align-content:start}
.buy-price h2{margin:0}
.buy-combo{margin:0;font-size:16px;color:var(--ink-2)}
.buy-acts{display:grid;gap:4px;justify-items:stretch}
.buy-acts form{display:flex}
.buy-acts form .btn{flex:1;min-height:56px;font-size:18px}
.buy-acts form .btn:not([aria-pressed="true"]){background:var(--marker)}
.buy-acts form .btn:not([aria-pressed="true"]):hover{background:var(--marker-hover)}
.buy-child{display:flex;gap:10px;align-items:flex-start;margin:0;padding:10px 12px;background:var(--marker-soft);border-radius:8px}
.buy-small{margin:0;font-size:16px;line-height:1.45;color:var(--pencil)}
.buy-open-h{margin:0 0 10px;font-size:18px}
.buy-open .ticks{margin:0}

/* faq and others */
.crs-faq .accs{background:var(--sheet);border-radius:4px;box-shadow:var(--sh-1);padding:4px 14px}
.crs-faq .acc:last-child{border-bottom:0}

@media (min-width:600px){
  .crs-head{padding:22px 24px 22px 36px}
  .crs-head::before{width:16px}
  .crs-try{grid-template-columns:240px minmax(0,1fr);align-items:center}
  .crs-try:not(:has(.crs-poster)){grid-template-columns:minmax(0,1fr)}
  .crs-try .btn{width:auto}
  .inside{grid-template-columns:repeat(2,minmax(0,1fr))}
  .crs-prog .blk{padding:14px 14px 10px}
  .crs-faq .accs{padding:6px 24px}
}
@media (min-width:1024px){
  .crs-head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:0 36px;align-items:center}
  .crs-act>:first-child{margin-top:0}
  .crs-try{grid-template-columns:minmax(0,1fr)}
  .crs-try .btn{width:100%}
  .inside{grid-template-columns:repeat(3,minmax(0,1fr))}
  .buy-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px}
}