/*
 * BMA Responsive Carousel
 * Consolidated styling
 *
 * Coordinate with carousel.js:
 * const transitionDuration = 1100;
 */


/* =========================================================
   ROOT AND SHARED SETTINGS
   ========================================================= */

.bma-hero {
    --bma-primary: #00778d;
    --bma-secondary: #009dcb;
    --bma-amber: #f8aa00;

    --bma-banner-height: 540px;
    --bma-banner-mobile-height: 320px;

    position: relative;
    max-width: 100%;
    margin-block: 0 2rem;

    overflow-x: clip;

    color: #fff;
    font-family: "Noto Sans", sans-serif;
}

.bma-hero,
.bma-hero * {
    box-sizing: border-box;
}


/* =========================================================
   SLIDE LAYOUT
   ========================================================= */

.bma-hero .bma-hero__slide {
    position: relative;
    min-width: 0;
    margin: 0 0 1rem;
    padding: 0;
    border: 0;
}

.bma-hero.is-ready .bma-hero__slides {
    display: grid;
    isolation: isolate;
}

.bma-hero.is-ready .bma-hero__slide {
    grid-area: 1 / 1;

    margin: 0;

    visibility: hidden;
    opacity: 0;
    pointer-events: none;

    transform: none;
    transition: none;

    z-index: 0;
}

/*
 * The active and outgoing slides must both remain visible
 * during a photograph crossfade.
 */
.bma-hero.is-ready
.bma-hero__slide.is-active,
.bma-hero.is-ready
.bma-hero__slide.is-outgoing {
    visibility: visible;
    opacity: 1;
}

.bma-hero.is-ready
.bma-hero__slide.is-active {
    pointer-events: auto;
    z-index: 2;
}

.bma-hero.is-ready
.bma-hero__slide.is-outgoing {
    pointer-events: none;
    z-index: 1;
}


/* =========================================================
   IMAGE FRAME
   ========================================================= */

.bma-hero .bma-hero__stage {
    position: relative;

    width: 100%;
    height: clamp(
        300px,
        35vw,
        var(--bma-banner-height)
    );
    max-height: var(--bma-banner-height);

    aspect-ratio: auto;
    overflow: hidden;

    background: var(--bma-bg, var(--bma-primary));
}

.bma-hero .bma-hero__stage--gradient {
    background:
        linear-gradient(
            var(--bma-angle, 135deg),
            var(--bma-bg, var(--bma-primary)),
            var(--bma-bg2, var(--bma-secondary))
        );
}


/* =========================================================
   FOREGROUND IMAGE
   ========================================================= */

.bma-hero .bma-hero__picture {
    position: absolute;
    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    /*
     * No breathing room unless explicitly saved
     * on the slide.
     */
    padding: var(--bma-pad, 0px);

    z-index: 2;
}

.bma-hero .bma-hero__image {
    display: block !important;

    width: 100% !important;
    height: 100% !important;
    max-width: none !important;

    margin: 0 !important;

    object-fit:
        var(--bma-fit, contain) !important;

    object-position:
        var(--bma-x, 50%)
        var(--bma-y, 50%) !important;

    border: 0;
    border-radius: 0;
}


/* =========================================================
   BLURRED BACKDROP
   ========================================================= */

.bma-hero .bma-hero__backdrop {
    position: absolute;
    inset: -3rem;

    z-index: 0;

    filter:
        blur(var(--bma-blur, 24px));

    pointer-events: none;
}

.bma-hero .bma-hero__back-picture {
    display: block;
    width: 100%;
    height: 100%;
}

.bma-hero .bma-hero__back-image {
    display: block;

    width: 100% !important;
    height: 100% !important;
    max-width: none !important;

    margin: 0 !important;

    object-fit: cover !important;

    object-position:
        var(--bma-x, 50%)
        var(--bma-y, 50%) !important;
}

.bma-hero .bma-hero__tint {
    position: absolute;
    inset: 0;

    z-index: 1;

    background:
        var(
            --bma-tint,
            rgba(0, 0, 0, .3)
        );

    pointer-events: none;
}


/* =========================================================
   PHOTOGRAPH CROSSFADE
   ========================================================= */

/*
 * The photograph uses a longer, gentle crossfade.
 * Caption movement is handled independently below.
 */
.bma-hero.is-ready
.bma-hero__slide
.bma-hero__stage {
    opacity: 0;

    transition:
        opacity 900ms ease-in-out;

    will-change: opacity;
}

/*
 * Normal active state.
 */
.bma-hero.is-ready
.bma-hero__slide.is-active
.bma-hero__stage {
    opacity: 1;
}

/*
 * Outgoing photograph remains visible at the start
 * of the transition.
 */
.bma-hero.is-ready
.bma-hero__slide.is-outgoing
.bma-hero__stage {
    opacity: 1;
}

/*
 * Incoming photograph begins transparent.
 */
.bma-hero.is-ready
.bma-hero__slide.is-entering-next
.bma-hero__stage,
.bma-hero.is-ready
.bma-hero__slide.is-entering-prev
.bma-hero__stage {
    opacity: 0;
}

/*
 * Incoming photograph fades up.
 */
.bma-hero.is-transitioning-active
.bma-hero__slide.is-entering-next
.bma-hero__stage,
.bma-hero.is-transitioning-active
.bma-hero__slide.is-entering-prev
.bma-hero__stage {
    opacity: 1;
}

/*
 * Outgoing photograph fades away.
 */
.bma-hero.is-transitioning-active
.bma-hero__slide.is-leaving-next
.bma-hero__stage,
.bma-hero.is-transitioning-active
.bma-hero__slide.is-leaving-prev
.bma-hero__stage {
    opacity: 0;
}


/* =========================================================
   CAPTION CARD
   ========================================================= */

.bma-hero .bma-hero__caption {
    position: relative;

    width: min(564px, 100%);

    margin-left:
        max(
            0px,
            calc((100% - 1230px) / 2)
        );

    padding:
        9px
        24px
        9px;

    min-width: 0;

    border-left: 0;

    background: #000;
    color: #fff;

    box-shadow:
        0 4px 12px
        rgba(0, 0, 0, .18);

    /*
     * The caption never fades.
     * Its sequential movement is defined below.
     */
    opacity: 1 !important;

    will-change: transform;
}


/* =========================================================
   SPLIT BMA ACCENT RULE
   ========================================================= */

.bma-hero .bma-hero__caption::before {
    content: "";

    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;

    width: 4px;

    background:
        linear-gradient(
            to bottom,
            var(--bma-secondary) 0,
            var(--bma-secondary) 50%,
            var(--bma-amber) 50%,
            var(--bma-amber) 100%
        );

    pointer-events: none;
}

.bma-hero .bma-hero__caption-inner {
    max-width: 78rem;

    margin-inline: auto;
    padding-left: 20px;
}


/* =========================================================
   CAPTION TITLE
   ========================================================= */

.bma-hero .bma-hero__title {
    margin:
        0
        0
        5px !important;

    color: #fff !important;

    font-family:
        Montserrat,
        sans-serif !important;

    font-size:
        clamp(
            1.1rem,
            1.5vw,
            1.5rem
        ) !important;

    font-weight: 700 !important;
    line-height: 1.3 !important;

    overflow-wrap: anywhere;
    text-transform: none;
}


/* =========================================================
   CAPTION FOOTER
   ========================================================= */

.bma-hero .bma-hero__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    width: 100%;
    min-width: 0;
    min-height: 36px;

    margin-top: 0;
}

.bma-hero .bma-hero__footer > * {
    margin-top: 0;
    margin-bottom: 0;
}


/* =========================================================
   LEARN MORE LINK
   ========================================================= */

.bma-hero
.bma-hero__footer
.bma-hero__link {
    display: inline-flex;
    align-items: center;

    flex: 0 1 auto;

    gap: 7px;

    min-width: 0;

    margin: 0;
    padding: 0;

    border: 0;

    color: #fff !important;

    font-family:
        "Noto Sans",
        sans-serif;

    font-size: .8rem;
    font-weight: 700;
    line-height: 1.3;

    text-decoration: none !important;
    text-underline-offset: 0;
}

/*
 * Hide the arrow character supplied by PHP.
 * CSS supplies the BMA amber triangle instead.
 */
.bma-hero
.bma-hero__footer
.bma-hero__link
> span[aria-hidden="true"] {
    display: none;
}

.bma-hero
.bma-hero__footer
.bma-hero__link::after {
    content: "";

    display: inline-block;

    width: 0;
    height: 0;

    margin-left: 1px;

    border-top:
        5px solid transparent;

    border-bottom:
        5px solid transparent;

    border-left:
        8px solid var(--bma-amber);
}

.bma-hero
.bma-hero__footer
.bma-hero__link:hover {
    color: #fff !important;
    text-decoration: none !important;
}

.bma-hero
.bma-hero__footer
.bma-hero__link:hover::after {
    border-left-color: #fff;
}


/* =========================================================
   SHARED CONTROLS
   ========================================================= */

.bma-hero
.bma-hero__footer
.bma-hero__controls {
    position: static;

    display: inline-flex;
    align-items: center;
    justify-content: flex-end;

    flex: 0 0 auto;
    flex-wrap: nowrap;

    gap: 0;

    width: auto;
    min-width: 0;
    max-width: none;

    margin:
        0
        0
        0
        auto;

    padding: 0;

    background: transparent;
    color: #fff;

    box-shadow: none;
}

.bma-hero
.bma-hero__controls[hidden] {
    display: none !important;
}


/* =========================================================
   CONTROL BUTTONS
   ========================================================= */

.bma-hero
.bma-hero__footer
.bma-hero__button {
    appearance: none;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 0;

    background: transparent;
    color: var(--bma-amber);

    box-shadow: none;

    font: inherit;
    font-size: 0;
    line-height: 1;

    cursor: pointer;
}

.bma-hero
.bma-hero__footer
.bma-hero__button:hover {
    background: transparent;
    color: #fff;
}

.bma-hero
.bma-hero__footer
.bma-hero__button:focus-visible,
.bma-hero
.bma-hero__footer
.bma-hero__link:focus-visible {
    outline:
        2px solid
        var(--bma-amber);

    outline-offset: -3px;
}


/* =========================================================
   PREVIOUS AND NEXT CHEVRONS
   ========================================================= */

.bma-hero
.bma-hero__footer
[data-bma-prev],
.bma-hero
.bma-hero__footer
[data-bma-next] {
    flex:
        0
        0
        36px;

    width: 36px;
    min-width: 36px;

    height: 36px;
    min-height: 36px;
}

.bma-hero
.bma-hero__footer
[data-bma-prev]::before,
.bma-hero
.bma-hero__footer
[data-bma-next]::before {
    content: "";

    display: block;

    width: 13px;
    height: 13px;

    border-top:
        2px solid currentColor;

    border-right:
        2px solid currentColor;
}

.bma-hero
.bma-hero__footer
[data-bma-prev]::before {
    transform:
        rotate(-135deg);
}

.bma-hero
.bma-hero__footer
[data-bma-next]::before {
    transform:
        rotate(45deg);
}


/* =========================================================
   PLAY / PAUSE CONTROL
   ========================================================= */

.bma-hero
.bma-hero__footer
[data-bma-play] {
    flex:
        0
        0
        30px;

    width: 30px;
    min-width: 30px;

    height: 36px;
    min-height: 36px;
}

.bma-hero .bma-hero__play-icon {
    display: block;

    width: 9px;
    height: 12px;
}

/* Playing: two small pause bars. */
.bma-hero
[data-bma-play][data-playing="1"]
.bma-hero__play-icon {
    border-left:
        3px solid currentColor;

    border-right:
        3px solid currentColor;
}

/* Paused: small play triangle. */
.bma-hero
[data-bma-play][data-playing="0"]
.bma-hero__play-icon {
    width: 0;
    height: 0;

    border-top:
        6px solid transparent;

    border-bottom:
        6px solid transparent;

    border-left:
        9px solid currentColor;
}


/* =========================================================
   SCREEN-READER-ONLY STATUS
   ========================================================= */

.bma-hero .bma-hero__status {
    position: absolute !important;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;

    clip:
        rect(0, 0, 0, 0);

    clip-path:
        inset(50%);

    white-space: nowrap;

    border: 0;
}

.bma-hero .bma-hero__sr {
    position: absolute !important;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;

    clip:
        rect(0, 0, 0, 0);

    clip-path:
        inset(50%);

    white-space: nowrap;

    border: 0;
}


/* =========================================================
   OVERLAY CAPTION OPTION
   ========================================================= */

.bma-hero
.bma-hero__slide--overlay
.bma-hero__caption {
    position: absolute;

    left:
        max(
            16px,
            calc((100% - 1230px) / 2)
        );

    bottom: 24px;

    width:
        min(
            564px,
            calc(100% - 32px)
        );

    max-width:
        min(
            564px,
            calc(100% - 32px)
        );

    margin-left: 0;

    z-index: 3;
}


/* =========================================================
   MISSING IMAGE FALLBACK
   ========================================================= */

.bma-hero .bma-hero__missing {
    position: absolute;
    inset: 0;

    display: grid;
    place-content: center;

    margin: 0;
    padding: 1rem;

    color: #fff;
    background:
        var(--bma-primary);
}


/* =========================================================
   SEQUENTIAL CAPTION TRANSITION
   ========================================================= */

/*
 * Phase 1:
 * outgoing card leaves in 500ms.
 *
 * Phase 2:
 * incoming card waits 520ms,
 * then enters over 500ms.
 *
 * The photograph crossfade continues independently.
 */

.bma-hero.is-ready
.bma-hero__caption {
    opacity: 1 !important;
    animation: none;

    /*
     * Avoid an older transform transition competing
     * with the keyframe animations.
     */
    transition: none;

    will-change: transform;
}


/* ---------------------------------------------------------
   PREPARE INCOMING CAPTIONS
   --------------------------------------------------------- */

/*
 * Next or automatic:
 * incoming card is beyond the right edge.
 */
.bma-hero.is-ready
.bma-hero__slide.is-entering-next
.bma-hero__caption {
    transform:
        translateX(110vw);
}

/*
 * Previous:
 * incoming card is beyond the left edge.
 */
.bma-hero.is-ready
.bma-hero__slide.is-entering-prev
.bma-hero__caption {
    transform:
        translateX(-110vw);
}


/* ---------------------------------------------------------
   OUTGOING CAPTION
   --------------------------------------------------------- */

/*
 * Next or automatic:
 * current card exits completely left.
 */
.bma-hero.is-transitioning-active
.bma-hero__slide.is-leaving-next
.bma-hero__caption {
    animation:
        bma-caption-exit-left
        250ms
        cubic-bezier(.55, .06, .35, .96)
        forwards;
}

/*
 * Previous:
 * current card exits completely right.
 */
.bma-hero.is-transitioning-active
.bma-hero__slide.is-leaving-prev
.bma-hero__caption {
    animation:
        bma-caption-exit-right
        250ms
        cubic-bezier(.55, .06, .35, .96)
        forwards;
}


/* ---------------------------------------------------------
   INCOMING CAPTION
   --------------------------------------------------------- */

/*
 * The 520ms delay ensures that the incoming card does
 * not become visible until the outgoing card has left.
 */
.bma-hero.is-transitioning-active
.bma-hero__slide.is-entering-next
.bma-hero__caption {
    animation:
        bma-caption-enter-from-right
        250ms
        250ms
        cubic-bezier(.22, .61, .36, 1)
        both;
}

.bma-hero.is-transitioning-active
.bma-hero__slide.is-entering-prev
.bma-hero__caption {
    animation:
        bma-caption-enter-from-left
        250ms
        250ms
        cubic-bezier(.22, .61, .36, 1)
        both;
}


/* =========================================================
   CAPTION KEYFRAMES
   ========================================================= */

@keyframes bma-caption-exit-left {
    from {
        transform: translateX(0);
        opacity: 1;
    }

    to {
        transform: translateX(-110vw);
        opacity: 1;
    }
}

@keyframes bma-caption-exit-right {
    from {
        transform: translateX(0);
        opacity: 1;
    }

    to {
        transform: translateX(110vw);
        opacity: 1;
    }
}

@keyframes bma-caption-enter-from-right {
    from {
        transform: translateX(110vw);
        opacity: 1;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes bma-caption-enter-from-left {
    from {
        transform: translateX(-110vw);
        opacity: 1;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {
    .bma-hero .bma-hero__stage {
        height:
            clamp(
                220px,
                60vw,
                var(--bma-banner-mobile-height)
            );

        max-height:
            var(--bma-banner-mobile-height);

        aspect-ratio: auto;
    }

    .bma-hero .bma-hero__picture {
        padding:
            var(
                --bma-mpad,
                var(--bma-pad, 0px)
            );
    }

    .bma-hero .bma-hero__image {
        object-fit:
            var(
                --bma-mfit,
                var(--bma-fit, contain)
            ) !important;

        object-position:
            var(
                --bma-mx,
                var(--bma-x, 50%)
            )
            var(
                --bma-my,
                var(--bma-y, 50%)
            ) !important;
    }

    .bma-hero .bma-hero__back-image {
        object-position:
            var(
                --bma-mx,
                var(--bma-x, 50%)
            )
            var(
                --bma-my,
                var(--bma-y, 50%)
            ) !important;
    }

    /*
     * Captions always appear below the image on mobile.
     */
    .bma-hero .bma-hero__caption,
    .bma-hero
    .bma-hero__slide--overlay
    .bma-hero__caption {
        position: relative;
        inset: auto;

        width: 100%;
        max-width: none;

        margin-left: 0;

        padding:
            9px
            20px
            9px;
    }

    .bma-hero
    .bma-hero__caption-inner {
        padding-left: 16px;
    }

    .bma-hero
    .bma-hero__footer {
        gap: 8px;
    }

    .bma-hero
    .bma-hero__footer
    .bma-hero__link {
        font-size: .75rem;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    .bma-hero.is-ready
    .bma-hero__slide
    .bma-hero__stage {
        transition: none !important;
        opacity: 1 !important;
    }

    .bma-hero.is-ready
    .bma-hero__caption,
    .bma-hero.is-transitioning-active
    .bma-hero__slide
    .bma-hero__caption {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}


/* =========================================================
   PRINT
   ========================================================= */

@media print {
    .bma-hero {
        overflow: visible;
    }

    .bma-hero .bma-hero__controls {
        display: none !important;
    }

    .bma-hero.is-ready
    .bma-hero__slides {
        display: block;
    }

    .bma-hero.is-ready
    .bma-hero__slide {
        display: none;
    }

    .bma-hero.is-ready
    .bma-hero__slide.is-active {
        display: block;

        visibility: visible;
        opacity: 1;
    }

    .bma-hero.is-ready
    .bma-hero__slide.is-active
    .bma-hero__stage {
        opacity: 1;
    }

    .bma-hero
    .bma-hero__caption {
        transform: none !important;
        animation: none !important;
    }
}