/* ==========================================================================
   Block: Hero
   ========================================================================== */

/* ── @property: typed CSS vars allow arithmetic in calc() ────────────────── *
 * Without @property, custom properties are untyped strings — calc() cannot  *
 * do math on them. Declaring syntax: '<length>' makes them true length       *
 * values so we can scale font sizes proportionally from ACF-set values.      *
 * ─────────────────────────────────────────────────────────────────────────── */
@property --hero-title-size {
    syntax: '<length>';
    inherits: true;
    initial-value: 2.5rem;
}

@property --hero-sub-size {
    syntax: '<length>';
    inherits: true;
    initial-value: 1.25rem;
}

@property --hero-desc-size {
    syntax: '<length>';
    inherits: true;
    initial-value: 1rem;
}

@property --hero-title-mob-size {
    syntax: '<length>';
    inherits: true;
    initial-value: 1.125rem;
}

@property --hero-sub-mob-size {
    syntax: '<length>';
    inherits: true;
    initial-value: 0.8125rem;
}

@property --hero-desc-mob-size {
    syntax: '<length>';
    inherits: true;
    initial-value: 0.8125rem;
}

/* ── Container modifier ───────────────────────────────────────────────────── *
 * Overrides the global [class*="__container"] rule.
 * Width scales from 1500px (at 1500px viewport) down to 465px (at 480px).
 * min-height scales from 400px (at 1500px viewport) down to 155px (at 480px).
 *   Formula: clamp(155px, 24.02vw + 39.71px, 400px)
 * Using min-height (not height) so when long text grows .hero__content,
 * the container grows with it — preventing text from being clipped at narrow
 * viewports. All absolute layers (media/overlay/skew, inset:0) follow.
 * ─────────────────────────────────────────────────────────────────────────── */
.site__container--hero {
    max-width: 1500px;
    padding-left: 0;
    padding-right: 0;
    position: relative;
    min-height: clamp(155px, calc(24.02vw + 39.71px), 400px);
    overflow: hidden;
}

/* ── Layer 1 — media (image / video) ─────────────────────────────────────── */
.hero__media {
    position: absolute;
    inset: 0;
    z-index: 1;
    margin-top: 1px;
    margin-bottom: 1px;
}

.hero__media picture,
.hero__media img,
.hero__media video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--hero-img-pos, center center);
}

/* ── Layer 2 — rgba colour overlay over media ────────────────────────────── */
.hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background-color: var(--hero-overlay, rgba(74, 84, 174, 0.4));
    pointer-events: none;
    margin-top: 1px;
    margin-bottom: 1px;
}

/* ── Layer 3 — skewed left panel ─────────────────────────────────────────── *
 * clip-path creates the diagonal right edge:
 *   top-left → top-right → (right edge shifted 40px left at bottom) → bottom-left
 * ─────────────────────────────────────────────────────────────────────────── */
.hero__skew {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--hero-skew-width, 55%);
    background-color: var(--hero-skew-color, #f5f2f9);
    clip-path: polygon(0 0, 100% 0, calc(100% - 22%) 100%, 0 100%);
    z-index: 3;
    pointer-events: none;
}

/* ── Layer 4 — content ───────────────────────────────────────────────────── *
 * Same width as the skew panel so text stays inside the light-coloured area.
 * Right padding compensates for the 40px diagonal clip.
 * position: relative + min-height matching the container's clamp lets long
 * text grow vertically and pull the container with it — short text stays
 * vertically centred via flex justify-content.
 * ─────────────────────────────────────────────────────────────────────────── */
.hero__content {
    position: relative;
    width: var(--hero-skew-width, 45%);
    min-height: clamp(155px, calc(24.02vw + 39.71px), 400px);
    z-index: 4;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1rem 2.5rem 1rem 2%;
}

/* ── Typography ──────────────────────────────────────────────────────────── *
 * Linear interpolation from mob-size (at 480px) to desk-size (at 1500px).
 * Both endpoints are ACF-controlled. Requires typed @property vars above.
 *   480px  = 30rem,  1500px = 93.75rem  →  range = 63.75rem
 *   preferred = mob + (desk - mob) × ((100vw - 30rem) / 63.75rem)
 * Below 480px the preferred goes negative → clamp returns mob-size (min).
 * ─────────────────────────────────────────────────────────────────────────── */
.hero__title {
    font-family: var(--font-quicksand, 'Quicksand', sans-serif);
    font-weight: 700;
    font-size: clamp(
        var(--hero-title-mob-size),
        calc(var(--hero-title-mob-size) + (var(--hero-title-size) - var(--hero-title-mob-size)) * ((100vw - 30rem) / 63.75rem)),
        var(--hero-title-size)
    );
    line-height: 1.2;
    color: var(--hero-title-color, #4A54AE);
    margin: 0 0 0.35em;
}

/* Teal accent divider — matches "Blue-line.png" on cbtm.ca */
.hero__divider {
    width: 85%;
    min-height: 4px;
    background-color: var(--color-accent, #6DC0D5);
    border: none;
    margin: 0 0 0.5em;
    border-radius: 2px;
}

.hero__subtitle {
    font-family: var(--font-quicksand, 'Quicksand', sans-serif);
    font-weight: 600;
    font-size: clamp(
        var(--hero-sub-mob-size),
        calc(var(--hero-sub-mob-size) + (var(--hero-sub-size) - var(--hero-sub-mob-size)) * ((100vw - 30rem) / 63.75rem)),
        var(--hero-sub-size)
    );
    line-height: 1.3;
    color: var(--hero-sub-color, #4A54AE);
    margin: 0 0 0.4em;
}

.hero__description {
    font-family: var(--font-opensans, 'Open Sans', sans-serif);
    font-size: clamp(
        var(--hero-desc-mob-size),
        calc(var(--hero-desc-mob-size) + (var(--hero-desc-size) - var(--hero-desc-mob-size)) * ((100vw - 30rem) / 63.75rem)),
        var(--hero-desc-size)
    );
    line-height: 1.5;
    color: var(--hero-desc-color, #4A54AE);
    max-width: clamp(13.75rem, 4.6324rem + 30.3922vw, 33.125rem);
    margin: 0 0 0.75rem;
}

.hero__description p {
    color: inherit;
    font-size: inherit;
    line-height: inherit;
}

.hero__description p:last-child {
    margin-bottom: 0;
}

.hero__cta {
    display: inline-block;
    align-self: flex-start;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.4rem 1.25rem;
    border-radius: var(--radius-full, 9999px);
    color: var(--color-white, #fff);
    text-decoration: none;
    background-color: var(--color-accent, #6DC0D5);
    border: 2px solid var(--color-accent, #6DC0D5);
    transition: background-color var(--transition-base, 250ms ease),
                border-color var(--transition-base, 250ms ease);
}

@media (any-hover: hover) {
    .hero__cta:hover {
        background-color: var(--color-accent-hover, #8864B9);
        border-color: var(--color-accent-hover, #8864B9);
    }
}

/* ── < 480px — media, skew overlay and divider hidden ────────────────────── *
 * --hero-mobile-bg falls back to --hero-skew-color when not set in ACF.
 * ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 479.98px) {
    .site__container--hero {
        min-height: 0;
        background-color: var(--hero-mobile-bg, var(--hero-skew-color, #f5f2f9));
    }

    .hero__skew {
        display: none;
    }

    /* Media stays visible by default on mobile so the colored overlay can sit
       on top of it (matches cbtm.ca prod behaviour). When the mobile overlay
       is fully opaque we hide the image to save bandwidth. */
    .hero--mobile-solid .hero__media {
        display: none;
    }

    .hero__overlay {
        background-color: var(--hero-mobile-overlay, var(--hero-mobile-bg, var(--hero-overlay)));
    }

    .hero__media picture,
    .hero__media img,
    .hero__media video {
        object-position: var(--hero-img-pos-mobile, var(--hero-img-pos, center center));
    }

    .hero__content {
        width: 100%;
        min-height: 0;
        padding: 1.25rem var(--container-padding, 1.25rem);
    }

    .hero__divider {
        display: none;
    }

    /* font-size handled by clamp() — returns mob-size when vw < 480px */
    .hero__title {
        color: var(--hero-title-mob-color, var(--hero-title-color, #4A54AE));
    }

    .hero__subtitle {
        color: var(--hero-sub-mob-color, var(--hero-sub-color, #4A54AE));
    }

    .hero__description {
        color: var(--hero-desc-mob-color, var(--hero-desc-color, #4A54AE));
        max-width: 100%;
    }
}