/* ==========================================================================
   Course details page (v3 design system).
   Rides on home.css tokens + shared chrome (navbar/footer, .mm-h2 brackets,
   .mm-btn-*, .mm-carousel-dots, .mm-reveal). Page-scoped classes: .crs-*
   ========================================================================== */

/* ---- hero ---------------------------------------------------------------- */
.crs-hero { position: relative; padding-block: clamp(30px, 4vw, 58px) clamp(10px, 1.2vw, 16px); }
.crs-hero-grid {
    display: grid; grid-template-columns: minmax(0, 1fr) min(36vw, 420px);
    column-gap: clamp(40px, 6vw, 96px);
    /* text and poster share one centre line, so the hero reads as one piece */
    align-items: center;
}

.crs-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.crs-chip {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12.5px; font-weight: 800;
    padding: 6px 14px; border-radius: 999px;
}
.crs-chip-cat { background: var(--mm-soft); color: var(--mm-orange-deep); }
.crs-chip-level { background: rgba(31, 168, 201, .12); color: var(--mm-teal-deep); }
.crs-chip-loc { background: #fff; color: #57514B; border: 1.4px solid var(--mm-line); }
.crs-chip-loc svg { width: 14px; height: 14px; flex: none; color: var(--mm-teal-deep); }
.crs-chip-lang svg { color: #23855A; }

.crs-title {
    font-size: clamp(28px, 4.6vw, 60px);
    font-weight: 900; line-height: 1.25; letter-spacing: -.5px; text-wrap: balance;
    color: var(--mm-ink);
    margin-bottom: 16px;
}

.crs-meta { display: flex; flex-wrap: wrap; gap: 8px 26px; margin-bottom: 22px; }
.crs-meta-item { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--mm-ink); }
.crs-meta-item b { font-weight: 900; font-variant-numeric: tabular-nums; }
.crs-meta-item svg { color: var(--mm-orange); flex: none; }

.crs-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.crs-ctas .mm-btn-primary svg { transition: transform .2s ease; }
.crs-ctas .mm-btn-primary:hover svg { transform: translateX(3px); }
[dir="rtl"] .crs-ctas .mm-btn-primary svg { transform: scaleX(-1); }
[dir="rtl"] .crs-ctas .mm-btn-primary:hover svg { transform: scaleX(-1) translateX(3px); }
.crs-udemy-mark { font-weight: 900; color: #A435F0; font-size: 13px; }

/* program rating: one big score, the stars and the review count stacked beside it,
   split from the button by a hairline (the divider goes when it wraps under a 2nd button) */
.crs-proof {
    display: flex; align-items: center; gap: 10px;
    margin-inline-start: 4px; padding-inline-start: 18px;
    border-inline-start: 1.5px solid var(--mm-line);
}
.crs-proof-below { flex-basis: 100%; margin: 8px 0 0; padding-inline-start: 0; border: 0; }
.crs-proof-score { font-size: 32px; font-weight: 900; line-height: 1; letter-spacing: -.5px; color: var(--mm-ink); font-variant-numeric: tabular-nums; }
.crs-proof-meta { display: flex; flex-direction: column; gap: 3px; }
.crs-proof-stars { display: inline-flex; gap: 2px; color: #E8A718; }
.crs-proof-stars svg { width: 15px; height: 15px; }
.crs-proof-count { font-size: 13px; font-weight: 700; line-height: 1.3; color: var(--mm-muted); white-space: nowrap; }

/* hero media: course art is a portrait poster; the frame hugs it edge-to-edge
   (no white letterbox bars, no cropping) and the block sits flush against the
   container's outer edge, lining up with the description card below */
/* definite width (not max-width): with an auto inline margin the block would
   otherwise shrink-wrap the img — and the responsive-images bootstrap starts
   on a 32px placeholder, so the measured width locks the tiny variant in */
.crs-media { position: relative; width: 100%; }
.crs-media-frame {
    position: relative; z-index: 1; border-radius: 26px; overflow: hidden;
    box-shadow: var(--mm-card-shadow);
    background: #fff;
}
.crs-media-frame img, .crs-media-frame video {
    display: block; width: 100%; height: auto;
}
.crs-ring {
    position: absolute; inset-inline-end: -34px; top: -34px; z-index: 0;
    width: 110px; height: 110px; border-radius: 50%;
    border: 14px solid rgba(255, 107, 61, .16);
}
.crs-dots {
    position: absolute; inset-inline-start: -26px; top: -22px; z-index: 0;
    width: 96px; height: 68px;
    background-image: radial-gradient(rgba(31, 168, 201, .35) 2.2px, transparent 2.6px);
    background-size: 17px 17px;
}

/* ---- decorative note under the poster ------------------------------------- */
/* A caption under the poster, its arrow pointing up at it; mirrors itself in RTL.
   Purely decorative. */
.crs-tagline {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    margin-top: 22px; pointer-events: none;
    color: var(--mm-orange);
}
.crs-tagline-text { font-size: clamp(15px, 1.25vw, 18px); font-weight: 800; line-height: 1.5; text-align: center; }
.crs-tagline-arrow { flex: none; width: 40px; height: auto; opacity: .9; transform: rotate(-100deg); }
[dir="rtl"] .crs-tagline-arrow { transform: scaleX(-1) rotate(-100deg); }

/* ---- section heading scale (page-local, reuses .mm-h2 brackets) ---------- */
.crs-sec-head { margin-bottom: clamp(14px, 1.8vw, 24px); }
.crs-sec-head .mm-h2 { font-size: clamp(23px, 2.6vw, 34px); }

/* ---- description ---------------------------------------------------------- */
.crs-desc { padding-block: clamp(18px, 1.9vw, 24px) clamp(26px, 3.5vw, 52px); }
.crs-desc-card {
    background: #fff; border: 1px solid var(--mm-line); border-radius: 24px;
    padding: clamp(22px, 3vw, 42px);
    box-shadow: var(--mm-card-shadow);
}
/* description + curriculum share one centred reading column, so the card is as wide
   as its text and no half-empty white card is left beside it */
.crs-col { max-width: min(97vw, 980px); }
.crs-prose { font-size: 15.5px; line-height: 2.05; color: var(--mm-body-text); overflow-wrap: anywhere; }
.crs-prose p { margin: 0 0 8px; }
/* one small gap where the saved text had a run of empty lines (see $tidyBreaks) */
.crs-gap { display: block; height: 8px; }
.crs-prose img { border-radius: 12px; }

.crs-prereq { margin-top: 22px; padding-top: 20px; border-top: 1.5px dashed var(--mm-line); }
.crs-prereq-label { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 800; color: var(--mm-ink); margin-bottom: 10px; }
.crs-prereq-label svg { color: var(--mm-teal); flex: none; }
.crs-prereq-links { display: flex; flex-wrap: wrap; gap: 8px; }
.crs-prereq-pill {
    display: inline-flex; align-items: center; gap: 7px;
    background: #FAF3EC; border: 1.4px solid var(--mm-line);
    font-size: 13px; font-weight: 700; color: var(--mm-ink);
    padding: 7px 15px; border-radius: 999px;
    transition: border-color .2s ease, color .2s ease;
}
.crs-prereq-pill:hover { border-color: var(--mm-orange); color: var(--mm-orange-deep); }
.crs-prereq-pill svg { color: var(--mm-orange); flex: none; }
[dir="rtl"] .crs-prereq-pill svg { transform: scaleX(-1); }

/* ---- curriculum journey (vertical twin of the homepage tracks rail) ------ */
.crs-curr { padding-block: clamp(10px, 2vw, 30px) clamp(30px, 4vw, 56px); }
.crs-steps { position: relative; }
.crs-steps::before {
    content: ''; position: absolute;
    inset-inline-start: 21px; top: 26px; bottom: 30px;
    border-inline-start: 2.5px dashed #EFA984;
}
.crs-step {
    position: relative; display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 16px; padding-block: 9px;
}
.crs-step-dot {
    position: relative; z-index: 1;
    width: 44px; height: 44px; border-radius: 50%;
    background: #fff; border: 2.5px solid var(--mm-orange);
    display: grid; place-items: center;
    font-weight: 900; font-size: 15px; color: var(--mm-orange-deep);
    box-shadow: 0 6px 14px rgba(244, 90, 42, .14);
    align-self: start; margin-top: 3px;
}
.crs-step-body {
    background: #fff; border: 1px solid var(--mm-line); border-radius: 16px;
    padding: 14px 20px;
    transition: box-shadow .25s ease, border-color .25s ease;
}
.crs-step:hover .crs-step-body { border-color: #F3D9C8; box-shadow: var(--mm-card-shadow); }
.crs-step-title { font-size: 12.5px; font-weight: 800; color: var(--mm-orange-deep); margin-bottom: 3px; }
.crs-step-text { font-size: 14.5px; line-height: 1.9; color: var(--mm-body-text); font-weight: 600; }
.crs-step-text p { margin: 0; }

.crs-finish {
    position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr);
    gap: 16px; align-items: center; padding-block: 12px 0;
}
.crs-finish-medal { position: relative; z-index: 1; width: 44px; display: grid; place-items: center; }
.crs-finish-medal svg { width: 38px; height: 46px; filter: drop-shadow(0 6px 12px rgba(224, 160, 21, .35)); }
.crs-finish-label { font-weight: 900; font-size: 16px; color: var(--mm-ink); }
.crs-finish-label small { display: block; font-size: 12.5px; font-weight: 700; color: var(--mm-muted); margin-top: 1px; }

/* ---- more tracks: postcards deck ------------------------------------------ */
.crs-more { position: relative; padding-block: clamp(20px, 3vw, 44px) clamp(44px, 5vw, 72px); }
.crs-more .mm-container-md { position: relative; }
.crs-more-dotsbg {
    position: absolute; inset-inline-end: clamp(10px, 3vw, 60px); top: -6px;
    width: 120px; height: 80px; pointer-events: none;
    background-image: radial-gradient(rgba(255, 107, 61, .28) 2.2px, transparent 2.6px);
    background-size: 17px 17px;
}
/* rides the shared [data-scroller] paint-room box (padding 40/12 cancelled by
   negative margins): shadows and hover lift have room, layout spacing intact */
.crs-more-track {
    display: flex; align-items: stretch; gap: clamp(18px, 2vw, 30px);
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x proximity; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--mm-fade-l, 0px), #000 calc(100% - var(--mm-fade-r, 0px)), transparent);
    mask-image: linear-gradient(to right, transparent, #000 var(--mm-fade-l, 0px), #000 calc(100% - var(--mm-fade-r, 0px)), transparent);
}
.crs-more-track::-webkit-scrollbar { display: none; }
.crs-more-card {
    scroll-snap-align: start;
    width: clamp(248px, 22vw, 306px); flex: none;
    background: #fff; border-radius: 22px;
    border: 1px solid var(--mm-line);
    padding: 10px 10px 16px;
    transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s ease;
    display: block;
}
.crs-more-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 38px rgba(184, 142, 108, .18);
}
.crs-more-art { display: block; position: relative; border-radius: 15px; overflow: hidden; aspect-ratio: 16 / 11.4; background: var(--mm-soft); }
.crs-more-art img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s ease; }
.crs-more-card:hover .crs-more-art img { transform: scale(1.05); }
.crs-more-lvl {
    position: absolute; top: 10px; inset-inline-start: 10px;
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11.5px; font-weight: 900; color: #fff;
    padding: 5px 12px; border-radius: 999px;
    background: var(--crs-lvl-bg, var(--mm-teal));
    box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
    transform: rotate(-2.5deg);
}
[dir="ltr"] .crs-more-lvl { transform: rotate(2.5deg); }
.crs-more-body { display: block; padding: 13px 6px 0; }
.crs-more-name {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-weight: 900; font-size: 16.5px; line-height: 1.5; color: var(--mm-ink);
    min-height: calc(2 * 1.5em);
    transition: color .25s ease;
}
.crs-more-card:hover .crs-more-name { color: var(--mm-orange-deep); }
.crs-more-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.crs-more-facts { display: flex; align-items: center; gap: 12px; font-size: 12.5px; font-weight: 800; color: var(--mm-body-text); }
.crs-more-facts span { display: inline-flex; align-items: center; gap: 5px; }
.crs-more-facts svg { color: var(--mm-orange); flex: none; }
.crs-more-go {
    width: 34px; height: 34px; border-radius: 50%; flex: none;
    display: grid; place-items: center;
    background: var(--mm-soft); color: var(--mm-orange-deep);
    transition: background .25s ease, color .25s ease, transform .25s ease;
}
[dir="rtl"] .crs-more-go svg { transform: scaleX(-1); }
.crs-more-card:hover .crs-more-go { background: var(--mm-orange); color: #fff; transform: translateX(3px); }
[dir="rtl"] .crs-more-card:hover .crs-more-go { transform: translateX(-3px); }
/* dots keep their default clamp(26px…40px) top margin: the tilted postcards
   (rotation + 12px offset + shadow) reach below the track's padding, so the
   dots must not be pulled up toward the deck */

/* ---- desktop rhythm ------------------------------------------------------
   From 901px up the hero column breathes ~15% more between its rows, and the
   information card is flatter so it sits consistently with the icon row above
   it. Phone and tablet keep the compact spacing set further down. */
@media (min-width: 901px) {
    .crs-chips { margin-bottom: 18px; }
    .crs-title { margin-bottom: 18px; }
    .crs-meta { margin-bottom: 25px; }
    .crs-desc { padding-top: clamp(24px, 2.6vw, 38px); }
}

/* ---- responsive ------------------------------------------------------------- */
@media (max-width: 900px) {
    .crs-hero-grid { grid-template-columns: 1fr; gap: 14px; }
    .crs-media { order: -1; width: min(100%, 460px); margin-inline: auto; }
    .crs-ring { inset-inline-end: -14px; top: -18px; width: 74px; height: 74px; border-width: 10px; }
    .crs-dots { inset-inline-start: -8px; top: -14px; }
    /* the decorative note is desktop-only: on a phone or tablet it would only
       push the course content further down */
    .crs-tagline { display: none; }
    /* on a phone the booking button reads best as the closing step, after the
       highlights and the information card */
    .crs-hero-body { display: flex; flex-direction: column; }
    .crs-hero-body .crs-ctas { order: 5; margin-top: 14px; }
    /* one row, every chip whole: --crs-fit (1 by default) is set by the fit
       script under the chips in courseDetails.blade.php, shrinking text, padding,
       gaps and icons together just enough to fit. Only when that would go below
       ~80% does it tag .is-wrap and let the chips take a second line. */
    .crs-chips { flex-wrap: nowrap; gap: calc(6px * var(--crs-fit, 1)); }
    .crs-chips.is-wrap { flex-wrap: wrap; }
    .crs-chip {
        flex: none; gap: calc(5px * var(--crs-fit, 1));
        font-size: calc(12.5px * var(--crs-fit, 1));
        padding: 5px calc(12px * var(--crs-fit, 1));
    }
    .crs-chip-loc svg { width: calc(13px * var(--crs-fit, 1)); height: calc(13px * var(--crs-fit, 1)); }
    .crs-meta { gap: 8px 18px; }
    .crs-meta-item { font-size: 14px; }
    .crs-steps::before { inset-inline-start: 19px; }
    .crs-step { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; }
    .crs-step-dot { width: 40px; height: 40px; font-size: 14px; }
    .crs-finish { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; }
}

/* ---- optional YouTube video in the hero media frame ----------------------------
   The course image stays the poster; a floating play control sits dead centre
   (inset + margin auto, so it is centred in both LTR and RTL). On click the
   frame's content is replaced by the iframe, sized to the poster's own box. */
.crs-has-video { cursor: pointer; }
.crs-video-play {
    position: absolute; inset: 0; margin: auto; z-index: 2;
    width: clamp(62px, 6.4vw, 82px); height: clamp(62px, 6.4vw, 82px);
    display: flex; align-items: center; justify-content: center;
    padding: 0; border: 7px solid #fff; border-radius: 50%;
    background: var(--mm-orange); color: #fff; cursor: pointer;
    box-shadow: 0 0 0 7px rgba(255, 255, 255, .38), 0 16px 34px rgba(23, 20, 17, .26);
    transition: transform .3s cubic-bezier(.2, .7, .3, 1), box-shadow .3s ease;
}
/* the triangle points right in both locales, so its optical nudge is physical */
.crs-video-play svg { width: 40%; height: 40%; margin-left: 7%; }
.crs-has-video:hover .crs-video-play { transform: scale(1.08); box-shadow: 0 0 0 11px rgba(255, 255, 255, .46), 0 18px 38px rgba(23, 20, 17, .3); }
.crs-video-play:focus-visible { outline: 3px solid var(--mm-teal); outline-offset: 5px; }
.crs-media-frame.is-playing { cursor: auto; background: #000; }
.crs-video-el { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; }
@media (prefers-reduced-motion: reduce) {
    .crs-video-play { transition: none; }
    .crs-has-video:hover .crs-video-play { transform: none; }
}