/*
 * Course page first screen. Photo fills the section as a background (same
 * img + scrim construction as .feature-card--photo, 19-feature-card.css),
 * text runs white over it on the left, the lead form sits open in a white
 * card on the right - no modal click needed for the page's main action.
 *
 * Reused as-is by sections/certification-hero.php (same .course-hero__*
 * classes, no separate CSS file) - a change here changes both pages.
 */

.course-hero {
    position: relative;
    overflow: hidden;
    padding: 4vw 0;
}

.course-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.course-hero__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(15, 34, 66, 0.92) 0%, rgba(15, 34, 66, 0.82) 45%, rgba(15, 34, 66, 0.55) 100%);
}

.course-hero__grid {
    position: relative;
    z-index: 1;
    --bs-gutter-x: 3.33vw;
    --bs-gutter-y: 3.33vw;
}

.course-hero__type {
    display: inline-block;
    font-size: 0.73vw;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #fff;
    background: var(--color-accent);
    padding: 0.31vw 0.83vw;
    border-radius: 999px;
    margin: 0 0 1.25vw;
}

.course-hero__tagline {
    font-size: 1.56vw;
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
    margin: 0 0 1.04vw;
}

.course-hero__description {
    font-size: 1.04vw;
    color: rgba(255, 255, 255, 0.88);
    margin: 0 0 1.04vw;
}

.course-hero__bullets {
    list-style: none;
    margin: 0 0 1.25vw;
    padding: 0;
    display: grid;
    gap: 0.63vw;
}

.course-hero__bullet {
    display: flex;
    align-items: flex-start;
    gap: 0.63vw;
    font-size: 0.94vw;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.92);
}

.icon.course-hero__bullet-icon {
    flex: 0 0 auto;
    color: #fff;
    margin-top: 0.16vw;
}

.course-hero__format,
.course-hero__schedule {
    font-weight: 700;
    color: #fff;
    margin: 0 0 0.63vw;
}

.course-hero__facts {
    --bs-gutter-x: 1.67vw;
    --bs-gutter-y: 1.25vw;
    margin: 1.67vw 0 0;
}

.course-hero__fact {
    display: flex;
    align-items: flex-start;
    gap: 0.63vw;
}

/*
 * Two classes, not one: the shared `.icon` rule (43-icon.css) sets
 * `color: currentColor`, which is the same specificity as a lone
 * `.course-hero__fact-icon` selector and loads after it in the cascade, so
 * it silently won and the icon inherited the page's dark body text color
 * instead of staying white on the photo scrim. The compound selector
 * out-specifies `.icon` regardless of load order.
 */
.icon.course-hero__fact-icon {
    color: #fff;
    margin-top: 0.1vw;
}

.course-hero__fact dt {
    font-size: 0.73vw;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 0.21vw;
}

.course-hero__fact dd {
    margin: 0;
    font-weight: 700;
    color: #fff;
}

.course-hero__form {
    padding: 1.67vw;
    background: var(--color-surface);
    border-radius: var(--radius);
    box-shadow: 0 0.83vw 2.5vw rgba(15, 34, 66, 0.24);
}

.course-hero__form .lead-form {
    max-width: none;
}

/* The column split is roughly 2:1 (form column is a fixed 26vw of the
   viewport against the container's 82vw), which no 12-column step
   reproduces exactly (col-md-8/col-md-4 shifts the form by ~1.7%). The row,
   gutter and mobile stack stay Bootstrap; only the exact desktop ratio is
   restored here. */
@media only screen and (min-width: 768px) {
    .course-hero__grid > .course-hero__main {
        flex: 0 0 auto;
        width: 66.94%;
    }

    .course-hero__grid > .course-hero__form {
        flex: 0 0 auto;
        width: 33.06%;
    }
}

@media only screen and (max-width: 767.98px) {
    .course-hero {
        padding: 8vw 0;
    }

    .course-hero__scrim {
        background: linear-gradient(180deg, rgba(15, 34, 66, 0.9) 0%, rgba(15, 34, 66, 0.88) 100%);
    }

    .course-hero__grid {
        --bs-gutter-x: 6vw;
        --bs-gutter-y: 6vw;
    }

    .course-hero__type {
        font-size: 3.2vw;
        padding: 1.33vw 3.2vw;
    }

    .course-hero__tagline {
        font-size: 6.4vw;
    }

    .course-hero__description {
        font-size: 4.53vw;
    }

    .course-hero__bullets {
        margin: 0 0 5.33vw;
        gap: 2.67vw;
    }

    .course-hero__bullet {
        gap: 2.67vw;
        font-size: 4vw;
    }

    .icon.course-hero__bullet-icon {
        margin-top: 0.8vw;
    }

    .course-hero__facts {
        --bs-gutter-x: 4vw;
        --bs-gutter-y: 4vw;
        margin: 6vw 0 0;
    }

    /* The desktop 0.63vw gap and 0.73vw label are 12px/14px on the 1920px
       reference and collapse to 2px/3px on a phone - both are recalculated
       from the 375px reference here. */
    .course-hero__fact {
        gap: 2.67vw;
    }

    .icon.course-hero__fact-icon {
        margin-top: 0.53vw;
    }

    .course-hero__fact dt {
        font-size: 3.47vw;
        margin: 0 0 0.53vw;
    }

    .course-hero__form {
        padding: 5.33vw;
    }
}