/* ═══════════════════════════════════════════════════════════════════════
 * COURSE PAGE HERO WITH A PHOTO BACKGROUND (.hero.hero-photo)
 * The copy stays on the left; the photo fills the right side of the hero
 * as a background and fades into the navy from left to right, so the text
 * always sits on a dark area. Up to 1024px the photo sits on top instead and
 * fades downward.
 * Markup: <section class="hero hero-photo"><div class="hero-photo-bg"><img></div>…
 * ═══════════════════════════════════════════════════════════════════════ */
/* ═══ HEADER OVER THE HERO ═════════════════════════════════════════════
     Same behavior as the home (css/hero.css), for pages with <body class="… course-hero-page">: the header has
     no background, white links and a white logo (swapped by includes/hero.js)
     until loadHeader.js sets .scrolled, or while a mobile panel is open. */
/* header height (top bar + menu); includes/hero.js measures the real value on :root */
:root { --pl-hero-top: 121px; }
@media (max-width: 1024px) { :root { --pl-hero-top: 61px; } }
@media (max-width: 768px) { :root { --pl-hero-top: 57px; } }

body.course-hero-page .top-bar-wrapper {
    background: rgba(255, 255, 255, 0.03) !important;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    backdrop-filter: blur(16px) saturate(160%);
}
body.course-hero-page .glass-nav {
    transition: background-color 0.4s ease, -webkit-backdrop-filter 0.4s ease, backdrop-filter 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
body.course-hero-page .nav-logo-box img {
    aspect-ratio: 585.63 / 120.25; /* the white logo swap never shifts the menu */
    object-fit: contain;
    object-position: left center;
}
body.course-hero-page .nav-glass-container:not(.scrolled):not(.mobile-menu-open):not(.login-island-open) .glass-nav {
    /* see-through glass: the hero shows through, blurred (the dot grid too) */
    background: rgba(255, 255, 255, 0.04) !important;
    border-bottom-color: rgba(255, 255, 255, .12) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    -webkit-backdrop-filter: blur(16px) saturate(160%) brightness(1) !important;
    backdrop-filter: blur(16px) saturate(160%) brightness(1) !important;
}
body.course-hero-page .nav-glass-container:not(.scrolled):not(.mobile-menu-open):not(.login-island-open) .glass-link-item > a,
body.course-hero-page .nav-glass-container:not(.scrolled):not(.mobile-menu-open):not(.login-island-open) .glass-mobile-toggle i {
    color: #fff !important;
}
body.course-hero-page .nav-glass-container:not(.scrolled):not(.mobile-menu-open):not(.login-island-open) .glass-link-item > a:hover {
    color: #64D2FF !important;
}
body.course-hero-page .nav-glass-container:not(.scrolled):not(.mobile-menu-open):not(.login-island-open) .glass-actions .btn-lang {
    background: rgba(255, 255, 255, .12) !important;
    border-color: rgba(255, 255, 255, .35) !important;
    color: #fff !important;
}
body.course-hero-page .nav-glass-container:not(.scrolled):not(.mobile-menu-open):not(.login-island-open) .glass-actions .btn-login {
    background: rgba(255, 255, 255, .12) !important;
    border: 1.5px solid rgba(255, 255, 255, .5) !important;
    box-shadow: none !important;
    color: #fff !important;
}
body.course-hero-page .nav-glass-container:not(.scrolled):not(.mobile-menu-open):not(.login-island-open) .glass-actions .btn-login:hover {
    background: #fff !important;
    color: #0071e3 !important;
}
body.course-hero-page .nav-glass-container:not(.scrolled):not(.mobile-menu-open):not(.login-island-open) .glass-actions .btn-apply {
    background: #fff !important;
    border-color: #fff !important;
    color: #0071e3 !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .25) !important;
}
body.course-hero-page .nav-glass-container:not(.scrolled):not(.mobile-menu-open):not(.login-island-open) .glass-actions .btn-apply:hover {
    background: #eaf4ff !important;
    color: #005bb5 !important;
}
body.course-hero-page .nav-glass-container:not(.scrolled):not(.mobile-menu-open):not(.login-island-open) .glass-mobile-toggle {
    background: rgba(255, 255, 255, .14) !important;
}
body.course-hero-page.has-login-island .nav-glass-container:not(.scrolled):not(.mobile-menu-open):not(.login-island-open) .login-island-btn {
    background: #fff !important;
    color: #0b1f33 !important;
}

/* Mobile menu (<= 1024px), as on the home: Portuguese on its own row, Login
     and Enroll Now side by side; the panel never runs past the screen. */
@media (max-width: 1024px) {
    body.course-hero-page .mobile-menu-panel {
      max-height: calc(100vh - var(--nav-h, 61px));
      max-height: calc(100svh - var(--nav-h, 61px));
      overscroll-behavior: contain;
    }
    body.course-hero-page .mobile-menu-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }
    body.course-hero-page .mobile-menu-actions .btn-glass-sm {
      min-width: 0;
      min-height: 46px;
      padding: 12px 14px !important;
    }
    body.course-hero-page .mobile-menu-actions .btn-lang {
      grid-column: 1 / -1;
      margin: 0 !important;
    }
}


/* The blue of the home hero (css/site.css, .page-index .hero). */
body .hero.hero-photo {
    background:
        radial-gradient(80% 70% at 60% 30%, rgba(0, 82, 155, 0.9) 0%, rgba(0, 60, 120, 0.7) 25%, rgba(0, 40, 90, 0.4) 50%, transparent 75%),
        radial-gradient(100% 100% at 55% 45%, rgba(0, 100, 180, 0.5) 0%, rgba(0, 70, 140, 0.3) 30%, transparent 60%),
        linear-gradient(135deg, #000 0%, #001525 30%, #002a4a 50%, #001a35 70%, #000 100%);
    background-color: #000305;
}
body .hero.hero-photo::before {
    display: none;
}

/* Up to 1024px: the photo opens the hero and fades down into the navy, the
   copy follows right under it. */
@media (max-width: 1024px) {
    body .hero.hero-photo {
        display: block;
        min-height: 0;
        margin-top: calc(-1 * var(--pl-hero-top));
        padding-top: 0;
    }
    body .hero.hero-photo .hero-container {
        display: block;
    }
    body .hero.hero-photo > .hero-container {
        position: relative;
        z-index: 2;
        margin-top: -56px;
        padding: 0 20px;
    }
    body .hero.hero-photo .hero-photo-bg {
        position: relative;
        z-index: 0;
        box-sizing: content-box;
        height: min(92vw, 520px);
        /* the picture starts most of the way down the header, so no head hides behind it */
        padding-top: calc(var(--pl-hero-top) * 0.75);
        -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 calc(var(--pl-hero-top) * 1.1), #000 58%, rgba(0, 0, 0, 0.35) 84%, transparent 100%);
        mask-image: linear-gradient(180deg, transparent 0, #000 calc(var(--pl-hero-top) * 1.1), #000 58%, rgba(0, 0, 0, 0.35) 84%, transparent 100%);
    }
    body .hero.hero-photo .hero-photo-bg img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: var(--hero-photo-pos-mobile, 50% 10%);
    }
    body .hero.hero-photo > .container {
        position: relative;
        z-index: 2;
        margin-top: -56px;
    }
    body .hero.hero-photo .hero-image-mobile {
        display: none !important;
    }
}

@media (min-width: 1025px) {
    body .hero.hero-photo {
        display: flex;
        align-items: center;
        /* fills the whole first screen and slides under the see-through header */
        min-height: 100vh;
        min-height: 100svh;
        margin-top: calc(-1 * var(--pl-hero-top));
        padding: calc(var(--pl-hero-top) + 36px) 0 44px;
    }
    body .hero.hero-photo .hero-photo-bg {
        display: block;
        position: absolute;
        /* starts part-way down the header, so no head ends up hidden behind it */
        top: var(--hero-photo-top, calc(var(--pl-hero-top) * 0.55));
        right: 0;
        bottom: 0;
        width: min(56%, 900px);
        z-index: 0;
        pointer-events: none;
        /* the photo dissolves into the hero color toward the text: a short fade of
           fixed width, so it never reaches the person on any screen size */
        -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.45) 80px, rgba(0, 0, 0, 0.9) 160px, #000 220px), linear-gradient(180deg, transparent 0, rgba(0, 0, 0, 0.6) 40px, #000 90px);
        mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.45) 80px, rgba(0, 0, 0, 0.9) 160px, #000 220px), linear-gradient(180deg, transparent 0, rgba(0, 0, 0, 0.6) 40px, #000 90px);
        -webkit-mask-composite: source-in;
        mask-composite: intersect;
    }
    body .hero.hero-photo .hero-photo-bg img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: var(--hero-photo-pos, 50% 12%);
    }
    /* shade over the photo: darker on the text side and along the bottom edge */
    body .hero.hero-photo .hero-photo-bg::after {
        content: "";
        position: absolute;
        inset: 0;
        background:
            linear-gradient(90deg, rgba(0, 16, 32, 0.5) 0, rgba(0, 16, 32, 0.18) 140px, rgba(0, 16, 32, 0) 260px),
            linear-gradient(180deg, rgba(0, 16, 32, 0.3) 0%, rgba(0, 16, 32, 0) 22%, rgba(0, 16, 32, 0) 72%, rgba(0, 16, 32, 0.55) 100%);
    }
    /* the page's soft white glow sat in the middle of the photo */
    body .hero.hero-photo::before {
        display: none;
    }
    body .hero.hero-photo .hero-container {
        /* the copy stops before the photo gets clear */
        grid-template-columns: minmax(0, min(600px, 44vw));
        justify-content: start;
    }
    body .hero.hero-photo .hero-text h1 {
        text-shadow: 0 4px 24px rgba(0, 12, 28, 0.45);
    }
    body .hero.hero-photo .hero-text .lead {
        color: rgba(255, 255, 255, 0.88);
    }
}

/* Dot grid behind the title that leans toward the mouse, as in the home hero
   (same rules as css/hero.css; includes/hero.js sets the variables and
   .is-grid-on). It sits under the photo, so it only shows on the navy side.
   Desktop pointers only. */
@property --hg-open {
    syntax: '<number>';
    inherits: false;
    initial-value: 0;
}
body .hero.hero-photo .hero-grid {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(255, 255, 255, 0.46) 1.3px, transparent 2px);
    background-size: 26px 26px;
    --hg-open: 0;
    -webkit-mask-image: radial-gradient(max(1px, calc((var(--hg-tw, 360px) + var(--hg-sx, 0px)) * var(--hg-open))) max(1px, calc((var(--hg-th, 110px) + var(--hg-sy, 0px)) * var(--hg-open))) at var(--hg-lx, 50%) var(--hg-ly, 45%), #000 20%, rgba(0, 0, 0, 0.55) 60%, transparent 100%);
    mask-image: radial-gradient(max(1px, calc((var(--hg-tw, 360px) + var(--hg-sx, 0px)) * var(--hg-open))) max(1px, calc((var(--hg-th, 110px) + var(--hg-sy, 0px)) * var(--hg-open))) at var(--hg-lx, 50%) var(--hg-ly, 45%), #000 20%, rgba(0, 0, 0, 0.55) 60%, transparent 100%);
    opacity: 0;
    transition: opacity 0.5s ease, --hg-open 1s cubic-bezier(0.22, 1, 0.36, 1);
}
body .hero.hero-photo.is-grid-on .hero-grid {
    opacity: 1;
    --hg-open: 1;
}
@media (max-width: 1024px) {
    body .hero.hero-photo .hero-grid {
        display: none;
    }
}

/* Program facts under the "ASIC Accredited" button (they replaced the scrolling
   banner below the hero): one quiet line of short items. */
body .hero.hero-photo .hero-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    max-width: 560px;
    margin: 26px 0 0;
    padding: 20px 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    list-style: none;
}
body .hero.hero-photo .hero-facts li {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    padding: 0;
    font: 500 14px/1.5 Inter, -apple-system, BlinkMacSystemFont, sans-serif;
    color: rgba(255, 255, 255, 0.84);
}
body .hero.hero-photo .hero-facts li::before {
    content: "";
    flex: none;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #64d2ff;
}
@media (max-width: 768px) {
    body .hero.hero-photo .hero-facts {
        gap: 6px 18px;
        margin-top: 22px;
        padding-top: 16px;
    }
    body .hero.hero-photo .hero-facts li {
        font-size: 13.5px;
    }
}

/* "ASIC Accredited" above the title (the glass pill of the home hero; links to
   the accreditation page) and the main button under the lead. */
body .hero.hero-photo .hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    padding: 8px 18px;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: #fff;
    font: 700 13px/1.6 Inter, -apple-system, BlinkMacSystemFont, sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color 0.25s ease, border-color 0.25s ease;
}
body .hero.hero-photo .hero-eyebrow i {
    color: #64d2ff;
}
body .hero.hero-photo .hero-eyebrow:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.45);
    color: #fff;
}
body .hero.hero-photo .hero-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 8px;
    padding: 14px 28px;
    border-radius: 100px;
    border: 1px solid transparent;
    background: linear-gradient(135deg, #0071e3 0%, #1a8fff 50%, #005bb5 100%);
    box-shadow: 0 6px 22px rgba(0, 113, 227, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    color: #fff;
    font: 700 15px/1.6 Inter, -apple-system, BlinkMacSystemFont, sans-serif;
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
body .hero.hero-photo .hero-cta i {
    font-size: 13px;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
body .hero.hero-photo .hero-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0, 113, 227, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    color: #fff;
}
body .hero.hero-photo .hero-cta:hover i {
    transform: translateX(4px);
}
body .hero.hero-photo .hero-cta:focus-visible,
body .hero.hero-photo .hero-eyebrow:focus-visible {
    outline: 3px solid #64d2ff;
    outline-offset: 3px;
}
@media (max-width: 768px) {
    body .hero.hero-photo .hero-eyebrow {
        font-size: 11.5px;
        padding: 7px 14px;
        margin-bottom: 12px;
    }
    body .hero.hero-photo .hero-cta {
        width: 100%;
    }
}

/* See-through header as ONE sheet of glass: the top bar and the menu used to
   blur the hero separately, which left a visible seam between them. Here a
   single blurred layer (the menu's ::before, stretched up over the top bar,
   whose height loadHeader.js keeps in --topbar-h) covers both, and neither
   has a divider line. The normal header returns on scroll. */
body.course-hero-page .top-bar-wrapper {
    border-bottom-color: transparent;
}
body.course-hero-page:has(.nav-glass-container:not(.scrolled):not(.mobile-menu-open):not(.login-island-open)) .top-bar-wrapper {
    background: transparent !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
body.course-hero-page .nav-glass-container:not(.scrolled):not(.mobile-menu-open):not(.login-island-open) .glass-nav {
    position: relative;
    background: transparent !important;
    border-bottom-color: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
body.course-hero-page .nav-glass-container:not(.scrolled):not(.mobile-menu-open):not(.login-island-open) .glass-nav::before {
    content: "";
    position: absolute;
    top: calc(-1 * var(--topbar-h, 0px));
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.04);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    backdrop-filter: blur(16px) saturate(160%);
}
/* the pill sits right above the title */
body .hero.hero-photo .hero-eyebrow + h1 {
    margin-top: 0;
}

/* ═══ OVERVIEW CARD (.overview-glass-panel) ══════════════════════════════
 * Two columns instead of three: the photo on the left at full height, and on
 * the right the title, the text and — right under it — the six program facts
 * as a 3×2 grid of glass tiles (they used to be a third column of white
 * cards, taller than the text beside it). Home hero blue and the site's dot
 * grid. Same markup as before.
 * ═══════════════════════════════════════════════════════════════════════ */
body.course-hero-page .overview-glass-panel {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(80% 70% at 60% 30%, rgba(0, 82, 155, 0.9) 0%, rgba(0, 60, 120, 0.7) 25%, rgba(0, 40, 90, 0.4) 50%, transparent 75%),
        radial-gradient(100% 100% at 55% 45%, rgba(0, 100, 180, 0.5) 0%, rgba(0, 70, 140, 0.3) 30%, transparent 60%),
        linear-gradient(135deg, #000 0%, #001525 30%, #002a4a 50%, #001a35 70%, #000 100%);
    background-color: #000305;
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 24px 60px rgba(0, 16, 40, 0.35);
}
body.course-hero-page .overview-glass-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1.5px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(85% 80% at 60% 45%, #000 30%, transparent 100%);
    mask-image: radial-gradient(85% 80% at 60% 45%, #000 30%, transparent 100%);
}
body.course-hero-page .overview-glass-panel > * {
    position: relative;
    z-index: 1;
}
body.course-hero-page .overview-glass-panel .overview-content .display-3 {
    margin-bottom: 14px;
    font-size: clamp(28px, 2.9vw, 40px);
    line-height: 1.12;
    letter-spacing: -0.025em;
    text-align: left !important;
}
body.course-hero-page .overview-glass-panel .overview-desc {
    margin-bottom: 0;
    color: rgba(255, 255, 255, 0.82);
    text-align: left !important;
}
/* facts: glass tiles */
body.course-hero-page .overview-glass-panel .overview-stats-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    align-content: start;
}
body.course-hero-page .overview-glass-panel .stat-compact {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 16px 15px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: none;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
body.course-hero-page .overview-glass-panel .stat-compact:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.11);
    border-color: rgba(100, 210, 255, 0.45);
    box-shadow: none;
}
body.course-hero-page .overview-glass-panel .stat-compact .icon-box {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: rgba(100, 210, 255, 0.14);
}
body.course-hero-page .overview-glass-panel .stat-compact .icon-box i {
    color: #64d2ff;
    font-size: 16px;
}
body.course-hero-page .overview-glass-panel .stat-compact .stat-info {
    gap: 2px;
}
body.course-hero-page .overview-glass-panel .stat-compact .stat-label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 10.5px;
}
body.course-hero-page .overview-glass-panel .stat-compact .stat-value {
    color: #fff;
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.3;
}

@media (min-width: 1025px) {
    body.course-hero-page .overview-glass-panel {
        grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
        grid-template-rows: auto auto;
        grid-template-areas:
            "photo copy"
            "photo facts";
        gap: 30px 56px;
        align-items: stretch;
        padding: 44px;
    }
    body.course-hero-page .overview-glass-panel > .overview-image-col {
        grid-area: photo;
        width: 100%;
        max-width: none;
        min-height: 440px;
    }
    body.course-hero-page .overview-glass-panel > .overview-image-col img {
        display: block;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        max-width: none !important;
        object-fit: cover;
        object-position: var(--overview-photo-pos, 50% 30%);
        border-radius: 22px !important;
        box-shadow: 0 20px 44px rgba(0, 0, 0, 0.35) !important;
    }
    body.course-hero-page .overview-glass-panel .overview-content {
        grid-area: copy;
        align-self: end;
        padding-top: 8px;
    }
    body.course-hero-page .overview-glass-panel > .overview-stats-grid {
        grid-area: facts;
        align-self: start;
        padding-bottom: 8px;
    }
    /* pages whose facts live inside the copy column */
    body.course-hero-page .overview-glass-panel > .overview-content:has(.overview-stats-grid) {
        grid-row: 1 / -1;
        align-self: center;
        padding: 8px 0;
    }
    body.course-hero-page .overview-glass-panel .overview-content .overview-stats-grid {
        margin-top: 28px;
    }
}
@media (max-width: 1024px) {
    body.course-hero-page .overview-glass-panel .overview-stats-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    /* stacked: a landscape crop, so the photo does not push the text off screen */
    body.course-hero-page .overview-glass-panel .overview-image-col img {
        display: block;
        aspect-ratio: 16 / 10;
        object-fit: cover;
        object-position: var(--overview-photo-pos, 50% 30%);
        margin: 0 !important;
    }
}
@media (max-width: 768px) {
    body.course-hero-page .overview-section {
        padding: 48px 0;
    }
    body.course-hero-page .overview-glass-panel {
        gap: 22px;
        padding: 26px 20px;
    }
    body.course-hero-page .overview-glass-panel .overview-content .display-3 {
        font-size: 27px !important;
        line-height: 1.15 !important;
    }
    body.course-hero-page .overview-glass-panel .overview-image-col.overview-image-mobile {
        margin: 0 0 18px;
    }
    body.course-hero-page .overview-glass-panel .overview-image-col img {
        aspect-ratio: 4 / 3;
    }
    body.course-hero-page .overview-glass-panel .overview-desc {
        font-size: 15px;
        line-height: 1.6;
    }
    body.course-hero-page .overview-glass-panel .overview-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
    body.course-hero-page .overview-glass-panel .stat-compact {
        padding: 14px;
        gap: 10px;
    }
}

/* ═══ PHONES: SHORT COPY ════════════════════════════════════════════════
 * Up to 768px the hero shows a one-sentence lead (.hero-lead-short, the
 * page's meta description) instead of the full paragraph (.hero-lead-long),
 * and the overview card keeps its title, photo and facts without the
 * paragraph, which repeats the hero.
 * ═══════════════════════════════════════════════════════════════════════ */
body .hero.hero-photo .hero-lead-short {
    display: none;
}
@media (max-width: 768px) {
    body .hero.hero-photo .hero-lead-short {
        display: block;
        max-width: none;
        margin: 0 0 22px;
        font-size: 16px;
        font-weight: 500;
        line-height: 1.55;
        color: rgba(255, 255, 255, 0.88);
        text-align: left;
    }
    body .hero.hero-photo .hero-lead-long {
        display: none;
    }
    body.course-hero-page .overview-glass-panel .overview-desc {
        display: none;
    }
}

/* ═══ PER-PAGE FIT ══════════════════════════════════════════════════════ */
/* Hebrew: its hero has no .container around .hero-container */
body .hero.hero-photo > .hero-container {
    box-sizing: border-box;
    width: 100%;
}
/* long titles written with <br>: let them wrap on their own in the narrower column */
body.page-bachelor-theology-ministry .hero.hero-photo .hero-text h1:not([style]) br {
    display: none;
}
body.page-bachelor-theology-ministry .hero.hero-photo .hero-text h1:not([style]),
body .hero.hero-photo .hero-text h1.hero-title {
    font-size: clamp(34px, 3.7vw, 54px);
}
/* landscape photos: the head sits at the very top of the picture */
@media (min-width: 1025px) {
    body .hero.hero-photo .hero-photo-bg:has(img[src*="course-cards/"]) {
        --hero-photo-top: var(--pl-hero-top);
        --hero-photo-pos: 50% 0%;
    }
}
/* tiles read the same on every page: left-aligned, icon on top */
body.course-hero-page .overview-glass-panel .stat-compact,
body.course-hero-page .overview-glass-panel .stat-compact .stat-info {
    align-items: flex-start !important;
    text-align: left !important;
}