/* Shared decorative header for the catalogue and course details. */
.courses-hero,
.course-header {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: radial-gradient(ellipse at 85% 25%, #c4efda 0%, transparent 55%),
        linear-gradient(115deg, #f1fbf5 0%, #e0f7eb 55%, #b4e8ce 100%);
    color: #153e2f;
    border-bottom: 1px solid #c9e8d8;
}
.courses-hero { padding: 38px 0 74px; }
.course-header { padding: 26px 0 46px; }
.courses-hero::before {
    content: '';
    display: block;
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    border-radius: 0;
    transform: none;
    animation: none;
    background: url('../images/learning-header.svg?v=2') right max(2%, calc((100vw - 1320px) / 2)) center / auto 100% no-repeat;
    pointer-events: none;
    z-index: 0;
}
.courses-hero::after,
.course-header::after,
.course-header::before { display: none; }
.courses-hero > .container,
.course-header > .container { position: relative; z-index: 1; }
.courses-hero-title { max-width: 65%; line-height: 1.4; margin-bottom: 10px; }
.courses-hero-sub { max-width: 60%; color: #496b5b; }
.course-header-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 13px;
    color: #547463;
    margin-bottom: 28px;
}
.course-header-nav a { color: #176b4b; text-decoration: none; }
.course-header-nav a:hover { text-decoration: underline; }
.course-header-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
    align-items: center;
    gap: 48px;
}
.course-header-copy .badge.bg-light {
    padding: 8px 13px;
    border: 1px solid #c5e5d4;
    border-radius: 8px;
    font-size: 12px;
    margin-bottom: 16px !important;
}
.course-header h1 {
    color: #073e2b;
    font-size: clamp(1.65rem, 2.8vw, 2.6rem);
    font-weight: 500;
    line-height: 1.5;
    overflow-wrap: anywhere;
    text-wrap: pretty;
    margin-bottom: 20px !important;
}
.course-header .course-header-instructor {
    color: #496b5b;
    font-size: 15px;
    margin: 0 0 22px;
}
.course-header-instructor > i { margin-right: 6px; }
.course-header-facts { display: flex; flex-wrap: wrap; gap: 10px; }
.course-header-fact {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 9px 14px;
    border: 1px solid #c8e5d5;
    border-radius: 12px;
    background: #ffffffb8;
    color: #176144;
    font-size: 14px;
}
.course-header-visual {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 265px;
    border: 1px solid #ffffffc9;
    border-radius: 32px;
    background: linear-gradient(145deg, #ffffff80, #e2f7ed40);
    box-shadow: 0 16px 40px #17614408;
    overflow: hidden;
}
.course-header-visual img {
    display: block;
    width: 125%;
    max-width: none;
    height: auto;
    margin-left: -24%;
}
.course-header-visual-label {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #176144;
    font-size: 13px;
    font-weight: 700;
    padding: 0 16px 20px;
}
.course-header-visual-label > span { font-weight: 400; color: #547463; }
@media (max-width: 991px) {
    .course-header-layout { gap: 24px; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
    .course-header-visual { min-height: 220px; }
    .course-header-visual-label { flex-direction: column; gap: 4px; }
    .courses-hero::before,
    .course-header::before { opacity: .4; background-position: right -120px center; }
}
@media (max-width: 767px) {
    .courses-hero { padding: 28px 0 60px; }
    .course-header { padding: 32px 0; }
    .courses-hero::before,
    .course-header::before { opacity: .13; background-position: right -160px center; }
    .courses-hero-title,
    .courses-hero-sub { max-width: 100%; }
    .course-header-layout { grid-template-columns: minmax(0, 1fr); }
    .course-header-visual { display: none; }
    .course-header-nav { margin-bottom: 22px; font-size: 12px; }
}
body.high-contrast .courses-hero { background: #000; color: #fff; }
body.high-contrast .courses-hero::before { display: none; }
body.high-contrast .courses-hero-title,
body.high-contrast .courses-hero-sub { color: #fff; }

/* Layered CSS 3D scene: no video or rendering library required. */
.course-header-visual.learning-hologram {
    display: flex;
    background: radial-gradient(ellipse at 50% 45%, #155b4b, #062f2c 60%, #04221f);
    border: 1px solid #72d9b8;
    border-radius: 28px;
    box-shadow: 0 22px 50px #064b3626, inset 0 1px 0 #dcfff54d;
    padding: 22px 20px 18px;
    min-height: 330px;
    width: 100%;
}
.holo-topline { width: 100%; display: flex; justify-content: space-between; align-items: center; color: #8bc7b6; font: 9px/1.4 monospace; letter-spacing: 2px; }
.holo-status { width: 6px; height: 6px; border-radius: 50%; background: #8effd5; box-shadow: 0 0 12px #67ffbd; }
.holo-stage { width: 100%; height: 240px; perspective: 750px; position: relative; }
.holo-world { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); transition: transform .25s ease-out; }
.holo-floor { position: absolute; width: 76%; height: 150px; left: 12%; top: 125px; border-radius: 50%; background: radial-gradient(ellipse, #67ffc748, transparent 65%), repeating-linear-gradient(0deg, transparent 0 19px, #78e8ca20 20px 21px), repeating-linear-gradient(90deg, transparent 0 19px, #78e8ca20 20px 21px); transform: rotateX(72deg); border: 1px solid #74f8d14d; box-shadow: 0 0 30px #24f8ba15; }
.holo-orbit { position: absolute; width: 86%; height: 170px; left: 7%; top: 44px; border: 1px solid #70edc86b; border-radius: 50%; transform-style: preserve-3d; }
.holo-orbit::after { content: ''; position: absolute; top: 20%; left: 10%; width: 7px; height: 7px; border-radius: 50%; background: #a7ffdf; box-shadow: 0 0 15px #6affc9; }
.holo-orbit-one { animation: holo-orbit 18s linear infinite; }
.holo-orbit-two { width: 74%; left: 13%; border-style: dashed; border-color: #6fc8db60; animation: holo-orbit 24s linear infinite reverse; }
.holo-book { position: absolute; width: 150px; height: 112px; left: calc(50% - 75px); top: 65px; transform-style: preserve-3d; animation: holo-float 6s ease-in-out infinite; }
.holo-page { position: absolute; top: 0; width: 76px; height: 108px; padding: 22px 12px; background: linear-gradient(120deg, #fff, #def8ec); border: 1px solid #b0e6d2; box-shadow: 0 3px 0 #a3d5be, 0 6px 0 #effff7, 0 10px 0 #12825d, 0 20px 22px #001c2380; }
.holo-page-left { left: 0; border-radius: 9px 0 0 7px; transform-origin: right center; transform: rotateY(-22deg); }
.holo-page-right { right: 0; border-radius: 0 9px 7px 0; transform-origin: left center; transform: rotateY(22deg); background: linear-gradient(100deg, #c2e8d7, #f5fff9 35%); }
.holo-page span { display: block; height: 4px; border-radius: 3px; margin: 9px 0; background: #63b997; }
.holo-page span:last-child { width: 65%; }
.holo-page b { position: absolute; right: 13px; top: 0; width: 13px; height: 25px; background: #118b61; clip-path: polygon(0 0,100% 0,100% 100%,50% 75%,0 100%); }
.holo-chip { position: absolute; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; font-size: 22px; transform-style: preserve-3d; animation: holo-chip 7s ease-in-out infinite; }
.holo-chip-check { top: 32px; left: 12%; color: #08764d; background: linear-gradient(135deg,#fff,#b7efd8); box-shadow: 3px 5px 0 #6ab295, 6px 12px 18px #001e2660; }
.holo-chip-play { right: 9%; top: 162px; color: #ecfff6; background: linear-gradient(135deg,#5fe5aa,#078553 65%,#035436); border: 1px solid #65d9a6; box-shadow: 3px 5px 0 #024b35, 6px 12px 18px #001e2660; animation-delay: -3s; font-size: 19px; }
.holo-spark { position: absolute; right: 15%; top: 23px; color: #ffe69a; font-size: 28px; text-shadow: 0 0 20px #ffd76870; animation: holo-chip 8s ease-in-out infinite reverse; }
.holo-caption { position: relative; display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 8px; border-top: 1px solid #8ceac322; padding-top: 14px; }
.learning-hologram .course-header-visual-label { color: #d7ffec; padding: 0; font-size: 12px; gap: 8px; }
.learning-hologram .course-header-visual-label > span { color: #9ec9ba; font-size: 11px; }
.holo-motion { display: inline-grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px; padding: 0; border: 1px solid #96e9c94d; border-radius: 50%; color: #d7ffec; background: #ffffff0d; font-size: 13px; cursor: pointer; }
.holo-motion:hover { background: #ffffff20; }
.holo-motion:focus-visible { outline: 2px solid #a0ffda; outline-offset: 3px; }
.learning-hologram:is(.is-paused, .is-offscreen, .is-background) * { animation-play-state: paused !important; }
@keyframes holo-float { 0%,100% { transform: translateY(0) rotateX(18deg) rotateZ(-10deg); } 50% { transform: translateY(-12px) rotateX(25deg) rotateZ(-5deg); } }
@keyframes holo-chip { 0%,100% { transform: translateY(0) rotate(-10deg); } 50% { transform: translateY(-10px) rotate(8deg); } }
@keyframes holo-orbit { from { transform: rotateZ(-25deg) rotateX(60deg) rotateZ(0); } to { transform: rotateZ(-25deg) rotateX(60deg) rotateZ(360deg); } }
@media (max-width: 991px) and (min-width: 768px) {
    .course-header-layout { grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr); }
}
@media (max-width: 767px) {
    .course-header-visual.learning-hologram { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .learning-hologram * { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition: none !important; }
}