/*---*\
    Half and half (shared image / map / media / form + text)

    Base styles for Half Text / Half Map, Media, Images, and Form CTA.
    Blocks mix BEM on the section (e.g. .half-text-half-map) and load
    this sheet via fx_half_image_text.

    KEY FEATURES
    - Layout modifiers: .half-and-half--media-right (default) and
      --media-left.

    LIMITATIONS
    - No fixed aspect on the media column; each block owns inner media sizing.
    - Trailing .sub-heading globe hides at desktop only inside
      .half-and-half__col--text here; other contexts keep both ornaments.

\*---*/

.half-and-half__row {
    --half-and-half-row-gap: 1.5rem;
}

/* Below lg: stack with gap; skip centered text on form block for predictable GF layout. */
@media (max-width: 1199.98px) {

    .half-and-half__col--media {
        margin-bottom: var(--half-and-half-row-gap);
    }

    .half-and-half:not(.half-text-half-form):not(.half-text-half-images) .half-and-half__col--text {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    .half-and-half:not(.half-text-half-form):not(.half-text-half-images) .half-and-half__col--text .sub-heading {
        justify-content: center;
    }

    .half-and-half:not(.half-text-half-form):not(.half-text-half-images) .half-and-half__col--text .sub-heading::after {
        display: block;
    }
}

@media (min-width: 1200px) {

    .half-and-half__row {
        align-items: center;
    }

    .half-and-half:not(.half-text-half-form) .half-and-half__col--text {
        text-align: left;
        margin-left: 0;
        margin-right: 0;
    }
}

/* Half Text / Half Media */

.half-text-half-media__media {
    position: relative;
    width: 100%;
    border-radius: var(--border-radius-card);
    overflow: hidden;
    isolation: isolate;
}

.half-text-half-media__img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 12.5rem;
    object-fit: cover;
}

.half-text-half-media--video .half-text-half-media__media::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    background-color: rgba(34, 34, 34, 0.35);
    pointer-events: none;
}

.half-text-half-media__play {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

.half-text-half-media__play:focus:not(:focus-visible) {
    outline: none;
}

.half-text-half-media__play-shape {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.125rem;
    height: 3.125rem;
    border-radius: 50%;
    background-color: var(--color-primary);
    box-shadow: var(--shadow-md);
    transition: transform var(--transition-fast), background-color var(--transition-fast);
}

.half-text-half-media__play:hover .half-text-half-media__play-shape,
.half-text-half-media__play:focus-visible .half-text-half-media__play-shape {
    transform: scale(1.05);
    background-color: var(--color-primary-hover);
}

.half-text-half-media__play-icon {
    display: block;
    width: 28%;
    height: auto;
    margin-left: 8%;
    fill: var(--color-primary-text);
}

@media (min-width: 768px) {

    .half-text-half-media__img {
        min-height: 15rem;
    }

    .half-text-half-media__play-shape {
        width: 100px;
        height: 100px;
    }
}

/* Desktop: 880x602 media frame (design spec). */

@media (min-width: 1200px) {

    .half-text-half-media__play-shape {
        width: 6.25rem;
        height: 6.25rem;
    }

    .half-text-half-media__media {
        aspect-ratio: 880 / 602;
        height: 100%;
    }

    .half-text-half-media--short .half-text-half-media__media {
        aspect-ratio: 880 / 450;
    }

    .half-text-half-media__img {
        position: absolute;
        inset: 0;
        min-height: 0;
    }

    .half-and-half__col:not(.half-and-half__col--media) {
        align-self: center;
    }

    .half-and-half--media-left .half-and-half__row {
        flex-direction: row;
    }

}

/* Half Text / Half 3 Images: two-stack + tall column (880x602 at desktop). */

.half-text-half-images--multiple .half-text-half-images__cluster {
    display: flex;
    align-items: stretch;
    gap: var(--content-gap);
    width: 100%;
    min-height: 12.5rem;
}

.half-text-half-images--multiple .half-text-half-images__stack {
    display: flex;
    flex-direction: column;
    gap: var(--content-gap);
    flex: 0 0 clamp(9rem, 39vw, 10rem);
    min-width: 0;
}

.half-text-half-images--multiple .half-text-half-images__cell {
    position: relative;
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
    border-radius: var(--border-radius-card);
}

.half-text-half-images--multiple .half-text-half-images__cell--tall {
    flex: 1 1 0;
    min-width: 0;
}

.half-text-half-images--multiple .half-text-half-images__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (min-width: 768px) {

    .half-text-half-images--multiple .half-text-half-images__cluster {
        min-height: 25rem;
    }

    .half-text-half-images--multiple .half-text-half-images__cluster {
        align-items: stretch;
        aspect-ratio: 880 / 602;
        max-width: 100%;
        min-height: 0;
        height: 100%;
    }

    .half-text-half-images--multiple .half-text-half-images__stack {
        max-width: none;
        flex: 1 1 0;
    }

    .half-text-half-images--multiple .half-text-half-images__cell--tall {
        flex: 1 1 0;
    }
}

@media ( min-width: 1200px ) {
    .half-text-half-images--multiple .half-and-half__row {
        align-items: unset;
    }
}

@media ( min-width: 1366px ) {
    .half-text-half-images--multiple .half-and-half__col--text-inner, 
    .half-text-half-media .half-and-half__col--text-inner {
        max-width: 715px;
        width: 100%;
        margin-left: auto;
        padding-right: 43px;
    }

    .half-text-half-images--multiple.half-and-half--media-left .half-and-half__col--text-inner, 
    .half-text-half-media.half-and-half--media-left .half-and-half__col--text-inner {
        max-width: 720px;
        margin-left: unset;
        padding-right: 0;
        padding-left: 43px;
    }
}