/* Course pages in the MasterClass look (Oct 2026): full-width poster, one short line, actions, then the lesson list.
   Remove the <link> to this file and the body class "mc" to go back to the previous layout. */
body.mc main{padding-top:0}
html:not([lang=en]) body.mc main .en{display:none!important}
body.mc .rhero>.kick,body.mc .rhero>h1,body.mc .cintro,body.mc .cdesc,body.mc #coursehare,body.mc .next,body.mc .ygbook,body.mc .more{display:none!important}
body.mc .rhero{padding:0}
.mch{position:relative;margin:0 auto;max-width:560px}
.mch .pst{position:relative;aspect-ratio:2/3;max-height:82vh;width:100%;overflow:hidden;background:#111}
.mch .pst img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.mch .pst::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,19,22,0) 42%,rgba(18,19,22,.72) 74%,var(--bg,#121316) 100%)}
.mch .ttl{position:absolute;inset:auto 0 18px 0;z-index:2;text-align:center;padding:0 16px}
.mch .ttl h1{margin:0;font:800 clamp(36px,11vw,54px)/1.15 Cairo,'IBM Plex Sans Arabic',sans-serif;text-wrap:balance;color:#fff}
.mch .ttl .sub{margin-top:6px;font:400 13.5px Poppins,sans-serif;letter-spacing:5px;text-transform:uppercase;color:#e5e0d4;direction:ltr}
.mch .ttl .dash{display:block;width:22px;height:2px;background:#fff;margin:16px auto 12px}
.mch .ttl .by{font-size:16px;font-weight:600;color:#fff}
.mch .ds{margin:6px 20px 0;text-align:center;color:#b9b4a9;font-size:15.5px;line-height:1.8}
.mch .acts{display:flex;gap:10px;margin:18px 20px 0}
.mch .acts button{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;border-radius:10px;border:0;cursor:pointer;font:700 15.5px 'IBM Plex Sans Arabic',sans-serif;background:#26282e;color:#f3f0e8}
.mch .acts .go{flex:1}
.mch .acts .go svg{width:18px;height:18px;fill:currentColor}
.mch .acts .sh{width:52px;flex:none;border-radius:50%}
.mch .acts .sh svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mch .acts button:focus-visible{outline:2px solid #FBD27D;outline-offset:3px}
/* lessons */
body.mc #ls{font:600 13px 'IBM Plex Sans Arabic',sans-serif;letter-spacing:1px;color:#d8d3c8;margin:30px 0 12px}
body.mc .members{display:grid;gap:10px;justify-items:stretch;text-align:center;background:none;border:0;padding:0;margin:0 0 14px}
body.mc .members b{font-size:15px;font-weight:600;color:#cfcac0}
body.mc .members.own b{color:#7fe0b2}
body.mc .members .btn{width:100%;justify-content:center}
body.mc .lessons{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
body.mc .card{flex-direction:row!important;align-items:flex-start;border:0!important;border-radius:12px;background:#1b1c21;padding:12px;gap:12px;height:auto}
body.mc .les.ready .card:hover{transform:none;background:#222329}
body.mc .th{flex:0 0 44%!important;border-radius:6px;overflow:hidden}
body.mc .tx{display:flex!important;flex-direction:column;padding:0!important;min-width:0}
body.mc .tx b{order:1;font-size:15.5px!important;line-height:1.45;margin:0}
body.mc .tx .tags{order:2;margin:6px 0 0;gap:6px}
body.mc .tg{border:0;background:none;padding:0;font-weight:600;font-size:12.5px;color:#a09b90}
body.mc .tg.t-free{background:none;color:#F7C04F}
body.mc .tg.t-lock{background:none;color:#a09b90}
body.mc .tg.t-own{color:#7fe0b2}
body.mc .levels{display:flex!important;gap:0;margin:0 0 14px;border-bottom:1px solid #2e3137;overflow-x:auto}
body.mc .levels a{flex:1;min-width:0;text-align:center;padding:10px 6px!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;position:relative}
body.mc .levels a b{font-size:14.5px}
body.mc .levels a .lp{display:block;font-size:12px;color:#a09b90}
body.mc .levels a[aria-current]::after{content:"";position:absolute;inset:auto 10% -1px 10%;height:3px;border-radius:3px;background:#F7C04F}
@media (min-width:900px){
  .mch{max-width:1080px;display:grid;grid-template-columns:420px 1fr;gap:0 40px;align-items:end;padding:28px 20px 0}
  .mch .pst{grid-row:1/4;border-radius:16px;max-height:none}
  .mch .ttl{position:static;text-align:start;padding:0}
  .mch .pst .ttl{display:none}
  .mch .ttl2{display:block!important}
  .mch .ds,.mch .acts{margin-inline:0;text-align:start}
  .mch .ttl .dash{margin-inline:0}
  body.mc .lessons{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.mch .ttl2{display:none}
body.mc .panel .share{display:none!important}
body.mc .tg.t-dur:has(.tic){display:none}

/* ===== watch view (MasterClass lesson page): tapping a lesson shows its video edge to edge at the top,
   then title, description and training files, then the rest of the lessons ===== */
body.mc-watch .rhero,body.mc-watch #ls,body.mc-watch #cta,body.mc-watch #bndbox,body.mc-watch .audnote,body.mc-watch .levels,body.mc-watch #me,body.mc-watch .prog-sum,body.mc-watch .mechip,body.mc-watch header.ygn,body.mc-watch .ygt,body.mc-watch .ygn-top{display:none!important}
body.mc-watch main{padding-top:0}
body.mc-watch .lessons{gap:0!important}
body.mc-watch .les.open{order:-1;margin:0 -20px 14px;grid-column:1/-1}
body.mc-watch .les.open .panel{display:block!important;border:0!important;border-radius:0!important;padding:0 0 6px!important;background:var(--bg,#121316)!important;box-shadow:none!important}
body.mc-watch .les.open .panel>*:not(.player){margin-inline:20px}
body.mc-watch .les.open .player{border-radius:0!important;margin:0 0 16px!important;border:0!important}
body.mc-watch .les.open .panel h3{font-size:20px;line-height:1.45;margin-top:4px}
body.mc-watch .les:not(.open){margin-bottom:10px}
.mcw-x{position:fixed;top:calc(10px + env(safe-area-inset-top,0px));left:10px;z-index:70;width:42px;height:42px;border-radius:50%;border:0;background:rgba(0,0,0,.55);display:none;place-items:center;cursor:pointer}
.mcw-x svg{width:22px;height:22px;stroke:#fff;stroke-width:2.2;fill:none;stroke-linecap:round}
body.mc-watch .mcw-x{display:grid}
.mcw-q{display:none;margin:4px 0 12px;font:600 13px 'IBM Plex Sans Arabic',sans-serif;letter-spacing:1px;color:#d8d3c8}
body.mc-watch .mcw-q{display:none}
@media (min-width:900px){body.mc-watch .les.open{margin:24px 0 18px}body.mc-watch .les.open .player{border-radius:14px!important}body.mc-watch .les.open .panel>*:not(.player){margin-inline:0}}
/* watch view on phones: the video stays pinned at the top while the details and the lesson list scroll under it */
@media (max-width:899px){
  body.mc-watch .les.open{padding-top:calc(56.25vw + 16px)}
  body.mc-watch .les.open .player:not(.pfs){position:fixed!important;top:0;left:0;right:0;width:100vw;aspect-ratio:16/9;height:auto;z-index:40;margin:0!important;background:#000}
  body.mc-watch .les.open .player:not(.pfs) video,body.mc-watch .les.open .player:not(.pfs) iframe{width:100%;height:100%}
}
/* computers: the video is NOT pinned — it scrolls with the page so the details below can be read */
@media (min-width:900px){body.mc .les.open .player:not(.pfs){position:relative!important;top:auto!important}}
/* lesson code (F01, E13 …) above each lesson title, in the list and on the lesson page */
html body.mc main .no.en,html:not([lang=en]) body.mc main .no.en{display:block!important;font:700 12.5px Poppins,'IBM Plex Sans Arabic',sans-serif;letter-spacing:.5px;color:#F7C04F;margin:0 0 3px;unicode-bidi:isolate}
body.mc main .tx .no.en{order:0}
body.mc main .now .no.en{font-size:13.5px;margin:4px 0 4px}
body.mc main .no .en{display:none!important}

/* ===== levels strip: one thumbnail per level, right under the course poster ===== */
body.mc .levels{display:none!important}
.mcl{max-width:1080px;margin:30px auto 0}
.mcl h2{margin:0 20px 12px;font:600 13px 'IBM Plex Sans Arabic',sans-serif;letter-spacing:1px;color:#d8d3c8}
.mcl-r{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 20px 4px;scrollbar-width:none}
.mcl-r::-webkit-scrollbar{display:none}
.mcl-c{flex:0 0 74vw;max-width:340px;scroll-snap-align:center;display:block;color:inherit;text-decoration:none}
.mcl-c .im{display:block;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#1b1c21;outline:2px solid transparent;outline-offset:-2px;transition:outline-color .2s}
.mcl-c .im img{width:100%;height:100%;object-fit:cover;display:block}
.mcl-c.on .im{outline-color:#F7C04F}
.mcl-c .ln{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-top:8px}
.mcl-c b{font-size:15px;font-weight:700;color:#f3f0e8}
.mcl-c small{font-size:12.5px;color:#a09b90;flex:none}
.mcl-c.on small{color:#F7C04F}
.mcl-c:focus-visible{outline:none}.mcl-c:focus-visible .im{outline-color:#FBD27D}
body.mc-watch .mcl{display:none!important}
@media (min-width:900px){
  .mcl{padding:0 20px}.mcl h2{margin-inline:0}
  .mcl-r{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible;padding:0}
  .mcl-c{max-width:none}
  .mcl-c:not(.on):hover .im{outline-color:#4a4c53}
}

/* ===== English pages (/en/courses/…): same look, left to right ===== */
html[lang=en] body.mc main .en{text-align:left}
html[lang=en] .mch .ttl h1{font:600 clamp(38px,11vw,58px)/1.1 Poppins,sans-serif;letter-spacing:-1px}
html[lang=en] .mch .acts button,html[lang=en] body.mc .tx b,html[lang=en] .mcl-c b{font-family:Poppins,'IBM Plex Sans Arabic',sans-serif}
html[lang=en] body.mc .tx b{font-weight:500}
html[lang=en] .mcl h2,html[lang=en] body.mc #ls,html[lang=en] .mcw-q{letter-spacing:.5px;font-family:Poppins,sans-serif;font-weight:500}
html[lang=en] body.mc .audnote{font-size:13.5px;color:#a09b90;margin:0 0 12px}
body.mc .rhero .mebar,body.mc .rhero #me{margin:18px 20px 0}
@media (min-width:900px){body.mc .rhero .mebar,body.mc .rhero #me{margin-inline:0}}
/* lesson page: the X sits top-left, so the full-screen button moves to the top-right and the lesson name to the middle */
body.mc-watch .les.open .player .fsb{left:auto;right:10px}
body.mc-watch .les.open .player .stagebar{right:auto;left:50%;transform:translateX(-50%);max-width:60%}
/* phone turned sideways: the playing lesson fills the screen (also when Bunny's own player is used) */
body.mc .player.stage.pfs{position:fixed!important;inset:0!important;z-index:9999;width:100vw!important;height:100dvh!important;margin:0!important;border-radius:0!important;background:#000}
body.mc .player.stage.pfs iframe{position:absolute;inset:0;width:100%!important;height:100%!important;aspect-ratio:auto!important}
/* lesson comment box */
.mcc{margin:22px 0 6px;padding:16px;border:1px solid #2e3137;border-radius:14px;background:#17181c}
.mcc h4{margin:0 0 4px;font:700 16px 'IBM Plex Sans Arabic',Poppins,sans-serif;color:#f3f0e8}
html[lang=en] .mcc h4{font-family:Poppins,sans-serif;font-weight:600}
.mcc-sub{margin:0 0 10px!important;font-size:13.5px!important;color:#a29e94}
.mcc textarea{width:100%;box-sizing:border-box;min-height:84px;resize:vertical;padding:12px;border-radius:10px;border:1px solid #2e3137;background:#121316;color:#f3f0e8;font:15px/1.6 'IBM Plex Sans Arabic',Poppins,sans-serif}
.mcc textarea:focus{outline:none;border-color:#F7C04F}
.mcc-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}
.mcc-row button{height:42px;padding:0 22px;border:0;border-radius:10px;background:#F7C04F;color:#141519;font:700 15px 'IBM Plex Sans Arabic',Poppins,sans-serif;cursor:pointer}
.mcc-row button:disabled{opacity:.6}
.mcc-msg{font-size:13.5px;color:#7fe0b2}
.mcc-in{display:inline-block;margin-top:6px;color:#F7C04F;font-weight:600}
.mcc-mine{display:grid;gap:8px;margin-top:12px}
.mcc-it{padding:10px 12px;border-radius:10px;background:#1f2126}
.mcc-it p{margin:0!important;font-size:14.5px!important;white-space:pre-wrap}
.mcc-it small{color:#a29e94;font-size:12px}

/* player controls fade while the video plays (mc.js) */
.mcw-x,body.mc-watch .les.open .player .fsb,body.mc-watch .les.open .player .pnav{transition:opacity .3s}
body.mc-idle .mcw-x,body.mc-idle .les.open .player .fsb,body.mc-idle .les.open .player .pnav{opacity:0!important;pointer-events:none}