/* ==========================================================================
   ANAS RADWAN — Course page
   Loads AFTER style.css and reuses its tokens, buttons, .shead, .kicker,
   .carousel* controls and .shine. Only page-specific pieces live here.
   ========================================================================== */

/* ---------- 1. BREADCRUMB ---------- */
.crumb{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--slate);flex-wrap:wrap;margin-bottom:20px}
.crumb a{transition:color .25s}
.crumb a:hover{color:var(--light)}
.crumb svg{width:11px;height:11px;flex:none;opacity:.55}
.crumb [aria-current]{color:var(--mid)}

/* ---------- 2. COURSE HERO ---------- */
.chero{position:relative;overflow:hidden;display:flex;align-items:center;
  min-height:min(86svh,740px);padding:clamp(30px,4vw,46px) 0 clamp(46px,6vw,74px);
  border-bottom:1px solid var(--line)}

/* the promo fills the whole section: greyscale ambient loop, real colour on click */
.chero__bg{position:absolute;inset:0;z-index:0;background:var(--bg-2);cursor:pointer}
.chero__video{width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.1) brightness(.62);transition:filter .6s var(--ease)}
.chero__scrim{position:absolute;inset:0;z-index:1;pointer-events:none;transition:opacity .6s var(--ease);
  background:
    linear-gradient(to left,rgba(10,10,11,.93) 4%,rgba(10,10,11,.74) 42%,rgba(10,10,11,.4) 76%,rgba(10,10,11,.6)),
    linear-gradient(0deg,rgba(10,10,11,.92),transparent 46%)}
.chero__glow{position:absolute;inset:0;z-index:1;pointer-events:none;transition:opacity .5s var(--ease);
  background:
    radial-gradient(ellipse 55% 65% at 20% 40%,rgba(148,0,0,.34),transparent 62%),
    radial-gradient(ellipse 45% 60% at 85% 95%,rgba(148,0,0,.18),transparent 66%)}
.chero .hero__bars{z-index:1;transition:opacity .5s var(--ease)}

/* the background sits behind everything — let clicks on empty space reach it,
   while text stays selectable and links/buttons stay clickable */
.chero > .wrap{position:relative;z-index:2;pointer-events:none;width:100%}
.chero .wrap a,.chero .wrap button,.chero h1,.chero__lede,.chero .chips{pointer-events:auto}

.chero__inner{max-width:640px;transition:opacity .45s var(--ease)}

/* playing state — real colour, chrome out of the way */
.chero.is-playing .chero__video{filter:none;object-fit:contain;background:#000}
.chero.is-playing .chero__scrim,
.chero.is-playing .chero__glow,
.chero.is-playing .hero__bars{opacity:0}
.chero.is-playing .chero__inner,
.chero.is-playing .crumb{opacity:0;pointer-events:none}
.chero.is-playing .chero__bg{cursor:default}

.chero__close{position:absolute;top:20px;inset-inline-start:20px;z-index:4;
  width:44px;height:44px;display:grid;place-items:center;color:#fff;isolation:isolate;
  opacity:0;visibility:hidden;transition:.3s var(--ease)}
.chero__close::before{content:'';position:absolute;inset:0;z-index:-1;transform:skewX(var(--sk));
  background:rgba(10,10,11,.6);border:1px solid rgba(255,255,255,.3);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:background .3s}
.chero__close:hover::before{background:var(--red);border-color:var(--red)}
.chero__close svg{width:17px;height:17px}
.chero.is-playing .chero__close{opacity:1;visibility:visible}

/* no backdrop panel — just the red icon chip and the label, straight on the video */
.chero__play{display:inline-flex;align-items:center;gap:15px;margin-top:34px;
  position:relative;color:#fff;font-size:15px;font-weight:500;text-shadow:0 2px 10px rgba(0,0,0,.6);
  isolation:isolate;transition:transform .3s var(--ease)}
.chero__play:hover{transform:translateY(-2px)}
.chero__play i{width:40px;height:40px;flex:none;display:grid;place-items:center;position:relative;z-index:0;
  box-shadow:0 10px 24px -10px rgba(148,0,0,.8)}
.chero__play i::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--red);
  transform:skewX(var(--sk));transition:background .3s}
.chero__play:hover i::before{background:var(--red-hi)}
.chero__play svg{width:15px;height:15px;margin-inline-start:2px}

.chero h1{font-family:var(--font-display);font-size:clamp(26px,3.5vw,45px);font-weight:400;line-height:1.4}
.chero h1 b{font-weight:400}
.chero__lede{margin-top:22px;font-size:clamp(15px,1.35vw,16.5px);line-height:1.98;color:var(--mid);max-width:52ch}

/* plain icon + stat row, no card/box — legibility comes from the scrim + a soft shadow */
.chips{display:flex;gap:24px;flex-wrap:wrap;margin-top:28px}
.chips span{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;color:var(--light);
  text-shadow:0 2px 8px rgba(0,0,0,.55)}
.chips svg{width:16px;height:16px;flex:none;color:var(--red-hi);
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.55))}
.chips b{font-family:var(--font-en);font-size:20px;color:#fff;font-style:normal;
  font-variation-settings:'wght' 600;direction:ltr;unicode-bidi:isolate}

/* ---------- 3. BODY GRID + STICKY PURCHASE CARD ---------- */
.cbody{padding:clamp(50px,6vw,80px) 0 clamp(60px,7vw,96px)}
.cgrid{display:grid;grid-template-columns:1fr 366px;gap:clamp(32px,4vw,58px);align-items:start}
.ccol{min-width:0}
.cside{position:sticky;top:calc(var(--nav-h) + 22px)}

.cblock{margin-bottom:clamp(46px,5.5vw,72px)}
.cblock:last-child{margin-bottom:0}
.cblock > .kicker{margin-bottom:14px}
.cblock h2{font-family:var(--font-display);font-size:clamp(22px,2.6vw,33px);font-weight:400;
  line-height:1.44;margin-bottom:clamp(24px,3vw,34px)}
.cblock h2 b{font-weight:400}

.pcard{background:var(--bg-2);border:1px solid var(--line);padding:20px}
.pcard__thumb{position:relative;overflow:hidden;aspect-ratio:16/10;margin-bottom:20px}
/* greyscale like the rest of the site, but the real colours come back on hover */
.pcard__thumb img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) brightness(.55);transition:filter .5s var(--ease),transform .7s var(--ease)}
.pcard__thumb:hover img{filter:none;transform:scale(1.04)}
.pcard__tag{position:absolute;top:12px;inset-inline-end:12px;font-size:11px;font-weight:500;
  color:#fff;padding:6px 14px;z-index:1}
.pcard__tag::before{content:'';position:absolute;inset:0;background:var(--red);
  transform:skewX(var(--sk));z-index:-1}

.pcard__price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.pcard__price b{font-family:var(--font-en);font-size:36px;color:#fff;line-height:1;
  font-variation-settings:'wght' 600;direction:ltr;unicode-bidi:isolate}
.pcard__price s{font-size:15px;color:var(--slate)}
.pcard__price s .num{font-family:var(--font-en);direction:ltr;unicode-bidi:isolate}
.pcard__price em{font-style:normal;font-size:14px;color:var(--mid)}
.pcard .btn{width:100%;justify-content:center;margin-top:18px}
.pcard .btn + .btn{margin-top:10px}
.pcard .btn svg{transition:transform .3s var(--ease)}
/* whatsapp button: glass by default, brand green on hover */
.btn--wa:hover::before{background:rgba(37,211,102,.5);border-color:rgba(37,211,102,.85);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 12px 28px -14px rgba(37,211,102,.7)}
.btn--wa:hover svg{transform:none}

.pfeats{margin-top:22px}
.pfeats li{display:flex;align-items:center;gap:13px;padding:14px 0;
  border-top:1px solid var(--line);font-size:15.5px;color:var(--light)}
.pfeats li:first-child{border-top:0;padding-top:4px}
.pfeats svg{width:19px;height:19px;flex:none;color:var(--red-hi)}

.pay{margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.pay__t{font-size:11.5px;color:var(--slate);margin-bottom:12px}
/* single combined logo strip, transparent background, no per-icon tiles */
.pay__list img{width:100%;max-width:280px;height:auto;display:block}

/* golden guarantee — deliberately a different accent (gold, not brand red) to
   read as a distinct, premium trust badge rather than another red panel */
.guarantee{--gold:#D8AE47;--gold-hi:#F0CD73;--gold-ink:#2b2107;
  margin-top:16px;display:flex;gap:12px;align-items:flex-start;padding:14px 15px;
  background:linear-gradient(180deg,rgba(216,174,71,.14),rgba(216,174,71,.05));
  border:1px solid rgba(216,174,71,.4)}
.guarantee__ic{width:36px;height:36px;flex:none;display:grid;place-items:center;position:relative;
  color:var(--gold-ink);z-index:0}
.guarantee__ic::before{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(135deg,var(--gold-hi),var(--gold));transform:skewX(var(--sk))}
.guarantee__ic svg{width:18px;height:18px}
.guarantee > span > b{display:block;font-size:13.5px;color:var(--gold-hi);font-weight:600;margin-bottom:5px}
.guarantee > span > span{font-size:12.5px;line-height:1.75;color:var(--mid)}
.guarantee a{color:var(--gold-hi);text-decoration:underline;text-underline-offset:3px}
.guarantee a:hover{color:#fff}

/* course gifts — sits under the purchase card */
.gifts{margin-top:16px;padding:20px;
  background:linear-gradient(180deg,rgba(148,0,0,.16),rgba(148,0,0,.06));
  border:1px solid rgba(148,0,0,.4)}
.gifts__head{display:flex;align-items:center;gap:13px}
.gifts__ic{width:40px;height:40px;flex:none;display:grid;place-items:center;position:relative;
  color:#fff;z-index:0}
.gifts__ic::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--red);
  transform:skewX(var(--sk))}
.gifts__ic svg{width:20px;height:20px}
.gifts__head b{display:block;font-size:15px;color:#fff;font-weight:600}
.gifts__head em{font-style:normal;font-size:12.5px;color:var(--red-hi)}

/* the free-gifts value is the whole point of this card — give it the same
   visual weight as the course price itself */
.gifts__price{display:flex;align-items:baseline;gap:9px;margin-top:16px;padding-top:16px;
  border-top:1px solid rgba(148,0,0,.28)}
.gifts__price b{font-family:var(--font-en);font-size:34px;color:#fff;line-height:1;
  font-variation-settings:'wght' 700;direction:ltr;unicode-bidi:isolate}
.gifts__price i{font-style:normal;font-size:13px;color:var(--red-hi);font-weight:500}

.gifts ul{margin-top:16px;display:grid;gap:10px}
.gifts li{display:flex;align-items:center;gap:13px;padding:10px 12px;
  background:rgba(215,216,213,.05);border:1px solid rgba(215,216,213,.1)}
.gifts li i{width:32px;height:32px;flex:none;display:grid;place-items:center;position:relative;
  font-style:normal;color:var(--red-hi);z-index:0}
.gifts li i::before{content:'';position:absolute;inset:0;z-index:-1;transform:skewX(var(--sk));
  background:rgba(148,0,0,.18);border:1px solid rgba(148,0,0,.4)}
.gifts li i svg{width:16px;height:16px}
.gifts li span{font-size:14px;color:#fff;font-weight:500;line-height:1.5}

/* ---------- 4. AUDIENCE ---------- */
.aud{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line)}
.aud article{background:var(--bg-2);padding:30px 22px;text-align:center;position:relative;
  overflow:hidden;transition:background .35s}
.aud article::after{content:'';position:absolute;bottom:0;right:0;width:0;height:3px;
  background:var(--red);transition:width .45s var(--ease)}
.aud article:hover{background:var(--bg-3)}
.aud article:hover::after{width:100%}
.aud__ic{width:62px;height:62px;margin:0 auto 18px;display:grid;place-items:center;flex:none;
  background:rgba(215,216,213,.07);border:1px solid rgba(215,216,213,.16);border-radius:18px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);transition:.35s var(--ease)}
.aud article:hover .aud__ic{border-color:rgba(148,0,0,.5);background:rgba(148,0,0,.1);transform:translateY(-3px)}
.aud__ic svg{width:28px;height:28px;color:var(--light);stroke-width:1.3}
.aud h3{font-size:16px;margin-bottom:8px}
.aud p{font-size:13.5px;color:var(--mid);line-height:1.8}

/* ---------- 5. WHAT YOU'LL LEARN ---------- */
.learn{display:grid;grid-template-columns:1fr 1fr;gap:15px 28px}
.learn li{display:flex;gap:13px;align-items:flex-start;font-size:14.5px;line-height:1.8;color:var(--light)}
.learn i{width:22px;height:22px;flex:none;margin-top:3px;display:grid;place-items:center;
  position:relative;font-style:normal;z-index:0}
.learn i::before{content:'';position:absolute;inset:0;z-index:-1;transform:skewX(var(--sk));
  background:rgba(148,0,0,.16);border:1px solid rgba(148,0,0,.5)}
.learn i svg{width:12px;height:12px;color:var(--red-hi);stroke-width:2.6}
.learn li > span{flex:1;min-width:0}

/* ---------- 6. CURRICULUM ---------- */
.curr__top{display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-bottom:16px;flex-wrap:wrap}
.curr__sum{font-size:13px;color:var(--mid)}
.curr__toggle{font-size:13px;color:var(--red-hi);display:inline-flex;align-items:center;gap:8px;
  transition:color .25s}
.curr__toggle:hover{color:#fff}
.curr__toggle svg{width:13px;height:13px;transition:transform .3s var(--ease)}
.curr__toggle.is-open svg{transform:rotate(180deg)}

.curr{border:1px solid var(--line);background:var(--bg-2)}
.curr details + details{border-top:1px solid var(--line)}
.curr summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:15px;
  padding:18px 20px;transition:background .25s}
.curr summary::-webkit-details-marker{display:none}
.curr summary:hover{background:var(--bg-3)}
.curr__no{width:34px;height:34px;flex:none;display:grid;place-items:center;position:relative;
  font-family:var(--font-en);font-size:13px;color:#fff;font-variation-settings:'wght' 600;z-index:0}
.curr__no::before{content:'';position:absolute;inset:0;z-index:-1;transform:skewX(var(--sk));
  background:rgba(148,0,0,.2);border:1px solid rgba(148,0,0,.5);transition:background .3s}
.curr details[open] .curr__no::before{background:var(--red);border-color:var(--red)}
.curr__t{flex:1;min-width:0}
.curr__t b{display:block;font-size:15.5px;font-weight:500;color:#fff;line-height:1.5}
.curr__t span{font-size:12px;color:var(--mid)}
.curr__chev{width:15px;height:15px;flex:none;color:var(--mid);transition:transform .3s var(--ease)}
.curr details[open] .curr__chev{transform:rotate(180deg)}

.curr ol{list-style:none;counter-reset:lesson;padding:0 20px 18px;margin-inline-start:49px}
.curr ol li{display:flex;align-items:center;gap:11px;padding:11px 0;
  border-top:1px solid var(--line);font-size:14px;color:var(--mid);line-height:1.65}
.curr ol li::before{counter-increment:lesson;content:counter(lesson);font-family:var(--font-en);
  width:22px;flex:none;font-size:11.5px;color:var(--slate);text-align:center}
.curr ol li svg{width:14px;height:14px;flex:none;color:var(--slate)}
.curr ol li > span{flex:1;min-width:0}

/* latin term inside an Arabic sentence — keep it inline, never a flex item */
.lat{font-family:var(--font-en);font-size:.92em;font-weight:inherit;letter-spacing:.02em;
  direction:ltr;unicode-bidi:isolate}

/* ---------- 6b. TOOLS YOU NEED ---------- */
.tools{border:1px solid var(--line);background:var(--bg-2)}
.tools li{display:flex;align-items:flex-start;gap:16px;padding:20px 22px}
.tools li + li{border-top:1px solid var(--line)}
.tools i{width:44px;height:44px;flex:none;display:grid;place-items:center;position:relative;
  font-style:normal;color:var(--light);z-index:0}
.tools i::before{content:'';position:absolute;inset:0;z-index:-1;transform:skewX(var(--sk));
  background:rgba(215,216,213,.06);border:1px solid rgba(215,216,213,.16)}
.tools i svg{width:21px;height:21px}
.tools b{display:block;font-size:15.5px;color:#fff;font-weight:500;margin-bottom:4px}
.tools span{font-size:13.5px;color:var(--mid);line-height:1.75}

/* ---------- 7. FULL-WIDTH SECTIONS ---------- */
.band{background:var(--bg-2);border-block:1px solid var(--line)}

/* vertical student-project carousel */
.vcar{position:relative}
.vcar__viewport{overflow:hidden}
.vcar__viewport:focus-visible{outline:2px solid var(--red-hi);outline-offset:6px}
.vcar__track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;padding:4px}
.vcar__track::-webkit-scrollbar{display:none}
.vcar__slide{flex:0 0 calc((100% - 3*18px)/4);scroll-snap-align:start;min-width:0}

.vplay{position:relative;aspect-ratio:9/16;overflow:hidden;background:var(--bg-3);
  border:1px solid var(--line);transition:.35s var(--ease)}
.vplay:hover{border-color:rgba(148,0,0,.55);transform:translateY(-4px)}
.vplay img,.vplay video{width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.62);
  transition:filter .4s}
.vplay:hover img{filter:grayscale(1) brightness(.75)}
.vplay.is-playing video{filter:none}
.vplay.is-playing img{display:none}
.vplay__btn{position:absolute;inset:0;width:100%;display:grid;place-items:center;z-index:2}
/* while playing, hand every click to the native video controls */
.vplay.is-playing .vplay__btn{opacity:0;pointer-events:none}
.vplay.is-playing figcaption{opacity:0;pointer-events:none}
.vplay__btn i{width:56px;height:56px;display:grid;place-items:center;position:relative;
  color:#fff;font-style:normal;z-index:0;transition:transform .3s var(--ease)}
.vplay__btn i::before{content:'';position:absolute;inset:0;z-index:-1;transform:skewX(var(--sk));
  background:rgba(148,0,0,.7);border:1px solid rgba(255,255,255,.26);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:background .3s}
.vplay__btn:hover i{transform:scale(1.08)}
.vplay__btn:hover i::before{background:rgba(193,0,0,.85)}
.vplay__btn svg{width:19px;height:19px;margin-inline-start:2px}
.vplay figcaption{position:absolute;inset:auto 0 0 0;z-index:1;padding:34px 16px 15px;
  background:linear-gradient(0deg,rgba(10,10,11,.95),transparent);
  font-size:13px;color:#fff;font-weight:500}
.vplay figcaption span{display:block;font-size:11.5px;color:var(--mid);font-weight:400;margin-top:3px}

/* ---------- 8. MOBILE BUY BAR ---------- */
.buybar{position:fixed;inset-inline:0;bottom:0;z-index:84;display:none;align-items:center;gap:14px;
  padding:11px 16px;background:rgba(10,10,11,.93);border-top:1px solid var(--line);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  transform:translateY(100%);transition:transform .3s var(--ease)}
.buybar.is-visible{transform:none}
.buybar__price b{display:block;font-size:19px;color:#fff;line-height:1.2;font-weight:500;white-space:nowrap}
.buybar__price b .num{font-size:21px;font-variation-settings:'wght' 600}
.buybar__price span{font-size:11px;color:var(--mid)}
.buybar .btn{flex:1;justify-content:center;padding:14px 20px;font-size:14px}

/* ---------- 9. RESPONSIVE ---------- */
@media (max-width:1120px){
  .cgrid{grid-template-columns:1fr 330px;gap:30px}
  .vcar__slide{flex-basis:calc((100% - 2*18px)/3)}
}

@media (max-width:980px){
  .cgrid{grid-template-columns:1fr;gap:44px}
  .cside{position:static;order:-1;max-width:560px}
  .cside .pcard{padding:22px}
  .buybar{display:flex}
  .wa-fab{bottom:92px}
  .totop{bottom:92px}
}

@media (max-width:900px){
  .chero{min-height:min(80svh,660px)}
  /* portrait: the scrim runs bottom-to-top instead of side-to-side */
  .chero__scrim{background:linear-gradient(0deg,rgba(10,10,11,.93) 10%,rgba(10,10,11,.6) 58%,rgba(10,10,11,.3))}
  .chero__video{filter:grayscale(1) contrast(1.1) brightness(.78)}
  .aud{grid-template-columns:1fr}
  .vcar__slide{flex-basis:calc((100% - 18px)/2)}
}

@media (max-width:620px){
  .learn{grid-template-columns:1fr}
  .cside{max-width:none}
  .curr summary{padding:16px 15px;gap:12px}
  .curr ol{margin-inline-start:0;padding:0 15px 16px}
  .vcar__slide{flex-basis:78%}
  .chero__play{width:100%;justify-content:center;margin-top:28px}
  .buybar__price b{font-size:17px}
}

@media print{
  .cside,.buybar,.vcar,.chero__play,.chero__close{display:none}
}