/* ===== Course detail — layout mirrors the reference design, palette/fonts from the home theme.
        Everything is scoped under #coursePage so it never touches the marketing header/footer. ===== */
#coursePage{
  /* home-theme palette */
  --primary:#004238; --primary-2:#0a5a4c;
  --accent:#FF7043; --accent-hover:#ff4910; --orange:#F2994A;
  --yellow:#d5d52b; --yellow-deep:#b7b71f; --hero-bg:#f7f7f7; --hero-bg-2:#f7f7f7;
  --ink:#12201c; --ink-soft:#2b3733; --muted:#5c665f; --muted-2:#8b948e;
  --paper:#ffffff; --line:#e7e9e4; --line-strong:#d3d7d0;
  --ok:#1f9d63; --ok-bg:#e4f5ec; --warn:#c98a14; --warn-bg:#fbf0d6;
  --green-50:#f0f7f4; --green-100:#e3f0eb; --green-900:#093328;
  --r:16px; --shadow-sm:0 1px 2px rgba(12,31,26,.06); --shadow-card:0 12px 30px -18px rgba(9,40,32,.28);
  --disp:"Space Grotesk",sans-serif; --body:"Space Grotesk",sans-serif;
  font-family:var(--body); color:var(--ink); background:#fff;
  /* full-bleed bands use 100vw, which includes the scrollbar — clip the few px of
     overflow. `clip` (not `hidden`) so the sticky tab bar keeps working. */
  overflow-x:clip;
}
#coursePage *{box-sizing:border-box}
#coursePage a{color:inherit;text-decoration:none}
#coursePage h1,#coursePage h2,#coursePage h3,#coursePage h4,#coursePage p{margin:0}
#coursePage .disp{font-family:var(--disp)}
#coursePage .container{max-width:1200px;margin-left:auto;margin-right:auto;padding-left:0;padding-right:0}

/* buttons — pill style like the reference */
#coursePage .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--disp);font-weight:600;font-size:15px;padding:14px 28px;border-radius:40px;transition:.15s;white-space:nowrap;cursor:pointer;border:none;background:none;line-height:1}
#coursePage .btn-sm{padding:8px 15px;font-size:13px;border-radius:9px}
#coursePage .btn-block{width:100%}
#coursePage .btn-dark{background:var(--primary);color:#fff}
#coursePage .btn-dark:hover{background:#02332b}
#coursePage .btn-accent{background:#d5d52b;color:var(--ink)}
#coursePage .btn-accent:hover{background:#c2c223}
#coursePage .btn-ghost{background:transparent;border:1.5px solid var(--line-strong);color:var(--ink);border-radius:9px}
#coursePage .btn-ghost:hover{border-color:var(--primary);color:var(--primary)}

/* chips */
#coursePage .chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:30px}
#coursePage .chip-ok{background:var(--ok-bg);color:var(--ok)}
#coursePage .chip-warn{background:var(--warn-bg);color:var(--warn)}
#coursePage .chip-gold{background:#fbf6c9;color:#8a7a08}
#coursePage .card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-sm)}

/* ===== HERO ===== */
#coursePage .course-hero{background:linear-gradient(180deg,var(--hero-bg),var(--hero-bg-2));padding:130px 48px 56px}
#coursePage .hero-grid{display:grid;grid-template-columns:7fr 3fr;gap:48px;align-items:center}
#coursePage .hero-eyebrow{font-size:16px;color:var(--ink-soft);font-weight:500;margin-bottom:14px}
#coursePage .hero-cat-row{display:flex;align-items:center;gap:12px;margin-top:22px}
#coursePage .hero-meta{display:flex;align-items:center;flex-wrap:wrap;gap:14px 20px;margin-top:20px}
#coursePage .hero-meta .hero-cat-row{margin-top:0}
#coursePage .hero-author{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink-soft);line-height:1}
#coursePage .hero-author img,#coursePage .hero-author .avatar{flex:0 0 auto;display:block}
#coursePage .hero-cat-label{font-size:14px;color:#000;font-weight:600}
#coursePage .hero-cat{display:inline-flex;align-items:center;background:#f7f4c9;color:#8a7a08;font-family:var(--disp);font-weight:700;font-size:11px;padding:5px 12px;border-radius:25px}
#coursePage .hero-title{font-family:var(--disp);font-weight:700;font-size:52px;line-height:1.02;letter-spacing:-1px;color:var(--ink)}
#coursePage .hero-lead{font-size:15.5px;color:var(--ink-soft);line-height:1.75;margin-top:20px;max-width:670px}
#coursePage .hero-cta{display:flex;gap:16px;flex-wrap:wrap;margin-top:30px}
/* hero media + price badge */
#coursePage .hero-media{position:relative}
#coursePage .hero-media img{display:block;width:100%;height:auto;border-radius:14px;clip-path:polygon(9% 0,100% 0,100% 100%,0 100%,0 9%);box-shadow:var(--shadow-card)}
/* price badge — white card with a thick yellow border and a chamfered bottom-right corner.
   Two layers: yellow shape underneath, white shape on top inset by the border width, so the
   border shows on every edge (including the diagonal, which a plain clip-path would cut off). */
#coursePage .price-badge{position:absolute;top:-26px;right:-10px;background:var(--yellow);padding:4px;clip-path:polygon(0 0,100% 0,100% 60%,78% 100%,0 100%);box-shadow:0 16px 34px -16px rgba(9,40,32,.45);z-index:2}
#coursePage .price-badge .pb-in{background:#fff;padding:20px 34px;text-align:center;clip-path:polygon(0 0,100% 0,100% 58%,76% 100%,0 100%)}
#coursePage .price-badge b{font-family:var(--disp);font-weight:700;font-size:30px;color:var(--ink);display:block;line-height:1;letter-spacing:-.5px}
#coursePage .price-badge .pb-sub{margin-top:10px;display:flex;align-items:center;justify-content:center;gap:8px}
#coursePage .price-badge a{font-size:13px;color:#1a63c9;text-decoration:underline}
#coursePage .price-badge s{color:var(--muted-2);font-size:15px;font-weight:500}
#coursePage .price-badge .pb-off{background:var(--ok-bg);color:var(--ok);font-size:12px;font-weight:700;padding:3px 9px;border-radius:20px;white-space:nowrap}

/* ===== INFO CARDS ===== */
#coursePage .info-cards{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin-top:52px}
#coursePage .info-card{background:#fff;border-radius:14px;padding:26px 18px;text-align:center;box-shadow:var(--shadow-card);min-height:190px;display:flex;flex-direction:column;align-items:center}
#coursePage .info-card .ic{width:30px;height:30px;margin-bottom:20px}
#coursePage .info-card h4{font-family:var(--disp);font-weight:700;font-size:19px;color:var(--ink);margin-bottom:12px}
#coursePage .info-card p{font-size:14px;color:var(--ink-soft);line-height:1.5}

/* ===== TABS (clean, title-case — matches educator profile tabs) ===== */
/* Single full-width bottom line on the edge-to-edge bar (not the centered container).
   The active tab's white box-shadow paints over this line beneath it, so no border is ever
   visible under the active tab while it stays visible under the inactive ones. */
#coursePage .course-tabs{background:#f7f7f7;box-shadow:0 6px 18px -20px rgba(9,40,32,.5);position:sticky;top:94px;z-index:40;padding-top:10px;border-bottom:2px solid #01483E}
/* overflow:visible (not auto) so the active tab's white shadow isn't clipped and can cover the line */
#coursePage .tabs-row{display:flex;gap:0;flex-wrap:nowrap;padding:0;overflow:visible}
/* inactive tab: transparent, borderless, grey text, sits only on the common bottom line */
#coursePage .tab-link{flex:1 1 0;padding:15px 12px;font-size:13.5px;font-weight:500;text-align:center;text-transform:uppercase;letter-spacing:.3px;border:2px solid transparent;border-bottom:none;border-radius:8px 8px 0 0;background:transparent;color:#666;white-space:nowrap;cursor:pointer;user-select:none;transition:color .25s ease,border-color .25s ease,background .25s ease}
#coursePage .tab-link:hover{color:#01483E}
/* active tab = raised folder-tab: top+left+right dark-green border, rounded top, white body,
   bold dark-green text, no bottom border — merges seamlessly into the white content below */
#coursePage .tab-link.on{color:#01483E;font-weight:700;background:#fff;border-color:#01483E;position:relative;z-index:2}
/* white strip covers only the line BETWEEN the side borders (left/right:0 = padding box, i.e. inside the borders),
   so the bottom corners stay green and connect cleanly to the line instead of looking cut */
#coursePage .tab-link.on::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:3px;background:#fff}

/* ===== CONTENT (all sections stacked; tab bar scroll-spies them) ===== */
#coursePage .content-wrap{padding:44px 48px}
#coursePage .content-wrap [data-panel]{scroll-margin-top:184px}
#coursePage .content-wrap [data-panel]:not(:last-child){margin-bottom:40px;padding-bottom:40px;border-bottom:1px solid var(--line)}
#coursePage .sec-head{font-family:var(--disp);font-size:22px;font-weight:700;color:var(--ink);margin-bottom:16px;line-height:1.2}
#coursePage .content-grid{display:grid;grid-template-columns:340px 1fr;gap:56px;align-items:start}
#coursePage .content-label{font-size:12.5px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
#coursePage .content-head{font-family:var(--disp);font-weight:700;font-size:40px;line-height:1.03;letter-spacing:-.5px;color:var(--ink)}
#coursePage .content-body{font-size:16px;color:var(--ink-soft);line-height:1.85}
#coursePage .content-body p{margin:0 0 14px}
/* "Structure" description type — centred heading + accordion rows */
/* "Structure" description type — centred heading + accordion rows */
#coursePage .desc-structure{background:#fff;padding:20px 0 8px}
#coursePage .desc-structure-h{font-family:var(--disp);font-weight:700;font-size:clamp(28px,4vw,42px);line-height:1.08;letter-spacing:-1px;color:var(--primary);text-align:center;margin:0 0 34px}
#coursePage .desc-acc{display:flex;flex-direction:column;width:100%}
#coursePage .desc-acc-item{border-bottom:1px solid var(--line-strong)}
#coursePage .desc-acc-item>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 2px;font-family:var(--disp);font-size:19px;font-weight:700;color:var(--ink);transition:color .15s}
#coursePage .desc-acc-item>summary::-webkit-details-marker{display:none}
#coursePage .desc-acc-item>summary:hover{color:var(--primary)}
#coursePage .desc-acc-item[open]>summary{color:var(--primary)}
/* lucide swaps the <i> for an <svg>, so both have to be targeted */
#coursePage .desc-acc-item>summary i,#coursePage .desc-acc-item>summary svg{flex:none;width:22px;height:22px;stroke-width:2.2;color:var(--primary);transition:transform .25s}
#coursePage .desc-acc-item[open]>summary i,#coursePage .desc-acc-item[open]>summary svg{transform:rotate(180deg)}
#coursePage .desc-acc-item>.content-body{padding:0 2px 30px;font-size:16.5px;line-height:1.8}
#coursePage .desc-acc-item>.content-body>*:last-child{margin-bottom:0}
@media(max-width:760px){
  #coursePage .desc-structure{padding:8px 0}
  #coursePage .desc-structure-h{margin-bottom:22px}
  #coursePage .desc-acc-item>summary{font-size:17px;padding:18px 2px}
  #coursePage .desc-acc-item>.content-body{font-size:15.5px;padding-bottom:22px}
}

/* "Entry requirements 1" description type — slogan + heading + intro + card grid */
#coursePage .desc-cards{padding:20px 0 8px;text-align:center}
#coursePage .desc-cards-slogan{font-family:var(--disp);font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
#coursePage .desc-cards-h{font-family:var(--disp);font-weight:700;font-size:clamp(28px,4vw,42px);line-height:1.08;letter-spacing:-1px;color:var(--primary);margin:0 0 16px}
#coursePage .desc-cards-lead{max-width:820px;margin:0 auto 40px}
#coursePage .desc-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px;text-align:center}
#coursePage .desc-card{background:var(--green-50);border-radius:var(--r);padding:34px 24px 30px;display:flex;flex-direction:column;align-items:center;gap:14px}
#coursePage .desc-card-ic{width:38px;height:38px;stroke-width:1.6;color:var(--primary);flex:none}
/* FontAwesome icons are glyphs, not SVGs — size them with font-size instead */
#coursePage i.desc-card-ic[class*="fa-"]{width:auto;height:auto;font-size:34px;line-height:1}
#coursePage .desc-card-t{font-family:var(--disp);font-size:20px;font-weight:700;line-height:1.2;color:var(--ink);margin:0}
#coursePage .desc-card-b{font-size:15.5px;line-height:1.7;margin:0}
#coursePage .desc-card-b>*:last-child{margin-bottom:0}
@media(max-width:760px){
  #coursePage .desc-cards-lead{margin-bottom:26px}
  #coursePage .desc-card-grid{gap:14px}
  #coursePage .desc-card{padding:26px 20px}
}

/* "Entry requirements 2" — the same rows drawn as a connected step timeline */
#coursePage .desc-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px 24px;text-align:center}
#coursePage .desc-step{position:relative;padding:0 6px}
/* the rail joining each circle to the one before it */
#coursePage .desc-step:not(:first-child)::before{content:"";position:absolute;top:31px;right:50%;width:calc(100% + 24px);height:2px;background:var(--primary);opacity:.55}
#coursePage .desc-step-ic{position:relative;z-index:1;width:62px;height:62px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
#coursePage .desc-step-ic i,#coursePage .desc-step-ic svg{width:26px;height:26px;stroke-width:1.8}
#coursePage .desc-step-ic i[class*="fa-"]{width:auto;height:auto;font-size:24px;line-height:1}
#coursePage .desc-step-t{font-family:var(--disp);font-size:19px;font-weight:700;line-height:1.2;color:var(--ink);margin:0 0 10px}
#coursePage .desc-step-b{font-size:15.5px;line-height:1.7}
#coursePage .desc-step-b>*:last-child{margin-bottom:0}
@media(max-width:900px){
  /* once the row wraps, a rail would point off into empty space */
  #coursePage .desc-steps{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:30px 20px}
  #coursePage .desc-step:not(:first-child)::before{display:none}
}

/* "Your future" — image beside the heading + copy. The image is shown whole
   (no crop, no clip-path), so its own aspect ratio drives the row height. */
#coursePage .desc-split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;padding:20px 0 8px}
#coursePage .desc-split-solo{grid-template-columns:1fr}
#coursePage .desc-split-media img{display:block;width:100%;height:auto;border-radius:var(--r)}
#coursePage .desc-split-h{font-family:var(--disp);font-weight:700;font-size:clamp(26px,3.2vw,38px);line-height:1.1;letter-spacing:-1px;color:var(--primary);margin:0 0 18px}
#coursePage .desc-split-body .content-body{font-size:16px}
#coursePage .desc-split-body .content-body>*:last-child{margin-bottom:0}
@media(max-width:860px){
  #coursePage .desc-split{grid-template-columns:1fr;gap:26px}
}

/* Educator tab — split hero: copy left, portrait right, on a tinted band.
   The band breaks out of the 1200px container to run edge to edge; the split
   inside is pulled back to the container width so it stays aligned with the
   rest of the page. */
#coursePage .edu-band{background:var(--green-50);width:100vw;margin:20px 0 8px calc(50% - 50vw);padding:56px 60px}
#coursePage .edu-split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;max-width:1200px;margin:0 auto}
#coursePage .edu-eyebrow{font-size:15px;color:var(--ink-soft);margin-bottom:10px}
#coursePage .edu-name{font-family:var(--disp);font-weight:700;font-size:clamp(30px,4vw,46px);line-height:1.05;letter-spacing:-1px;color:var(--ink)}
#coursePage .edu-headline{font-size:14.5px;color:var(--muted);margin-top:10px}
#coursePage .edu-bio{margin-top:20px;font-size:16px}
#coursePage .edu-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
#coursePage .edu-split-media img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px;box-shadow:var(--shadow-card)}
@media(max-width:860px){
  #coursePage .edu-band{padding:32px 20px}
  #coursePage .edu-split{grid-template-columns:1fr;gap:26px}
  #coursePage .edu-split-media{order:-1}
}

/* "Video section" — centred heading + a 16:9 responsive embed */
#coursePage .desc-video{padding:20px 0 8px;text-align:center}
#coursePage .desc-video-h{font-family:var(--disp);font-weight:700;font-size:clamp(28px,4vw,42px);line-height:1.08;letter-spacing:-1px;color:var(--primary);margin:0 0 30px}
#coursePage .desc-video-frame{position:relative;width:100%;max-width:880px;margin:0 auto;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:#000;box-shadow:var(--shadow-card)}
#coursePage .desc-video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
#coursePage .content-body ul,#coursePage .content-body ol{margin:0 0 14px 18px}
#coursePage .lo-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
#coursePage .lo-list li{display:flex;gap:12px;font-size:16px;color:var(--ink-soft);line-height:1.6}
#coursePage .lo-list .lo-ic{flex:none;width:22px;height:22px;color:var(--ok);margin-top:1px}

/* enquiry modal — two columns: image left, form right */
#coursePage .field{margin-bottom:14px}
#coursePage .field label{display:block;font-size:12.5px;font-weight:600;color:#3c463f;margin-bottom:6px}
#coursePage .field input,#coursePage .field select,#coursePage .field textarea{width:100%;border:1.5px solid var(--line-strong);border-radius:9px;padding:10px 12px;font-family:inherit;font-size:13.5px;color:var(--ink);background:#fff;transition:.14s}
#coursePage .field input:focus,#coursePage .field select:focus,#coursePage .field textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--green-100)}
#coursePage .enq-box{background:#fff;border-radius:18px;width:100%;max-width:1160px;max-height:92vh;box-shadow:0 20px 60px -12px rgba(16,40,34,.4);display:grid;grid-template-columns:1fr 1fr;position:relative;overflow:hidden}
#coursePage .enq-media{position:relative;min-height:100%;background:var(--green-50);display:flex;align-items:center;justify-content:center}
#coursePage .enq-media img{width:100%;height:auto;max-height:100%;object-fit:contain;display:block}
#coursePage .enq-form-col{padding:26px 28px;overflow-y:auto;max-height:92vh}
#coursePage .ck.ck-voice-label,#coursePage .ck-editor__label{display:none !important}
#coursePage .enq-title{font-size:20px;font-weight:700;color:var(--green-900)}
#coursePage .enq-sub{font-size:13px;color:var(--muted);margin:5px 0 18px}
#coursePage .enq-close{position:absolute;top:14px;right:14px;z-index:3;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.92);border:none;cursor:pointer;font-size:20px;line-height:1;color:var(--ink);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(6,18,14,.18)}
/* inline enquiry (rendered inside the "Enquiry now" tab, not as a modal) */
#coursePage .enq-inline{max-width:none;max-height:none;box-shadow:0 12px 30px -18px rgba(9,40,32,.28)}
#coursePage .enq-inline .enq-form-col{max-height:none;overflow:visible}

/* ===== responsive ===== */
@media(max-width:1000px){
  #coursePage .info-cards{grid-template-columns:repeat(3,1fr)}
  #coursePage .content-grid{grid-template-columns:1fr;gap:20px}
  #coursePage .hero-title{font-size:42px}
}
@media(max-width:820px){
  #coursePage .hero-grid{grid-template-columns:1fr;gap:34px}
  #coursePage .course-hero{padding:112px 22px 44px}
  #coursePage .content-wrap{padding:40px 22px}
  #coursePage .tabs-row{padding:0 12px}
  /* shrink so all tabs fit the row without needing a scroll (keeps the active-tab shadow un-clipped) */
  #coursePage .tab-link{min-width:auto;flex:1 1 auto;padding:14px 8px;font-size:13px}
  #coursePage .content-head{font-size:30px}
}
@media(max-width:767px){
  #coursePage .course-tabs{top:162px}
  #coursePage .content-wrap [data-panel]{scroll-margin-top:250px}
}
@media(max-width:560px){
  #coursePage .info-cards{grid-template-columns:1fr 1fr}
  #coursePage .hero-title{font-size:34px}
  #coursePage .tabs-row{padding:0 6px}
  #coursePage .tab-link{padding:12px 5px;font-size:11.5px;border-radius:10px 10px 0 0}
  #coursePage .price-badge{position:static;margin:0 auto 16px;display:inline-block}
  #coursePage .enq-box{grid-template-columns:1fr;max-width:480px}
  #coursePage .enq-media{min-height:140px}
}