/*---*\
Half Text / Half Media
Text column beside one image, a two-image collage, or a video thumbnail.

KEY FEATURES:
- Text stacks above the media below 1200px; columns sit side by side from 1200px
- Media left or right is a row direction change at 1200px. Source order stays text, then media
- Collage overlap is CSS. The angled back photo is an inline SVG path filled by the uploaded image
- Read More reveals a second body. Play opens the video in a popup
- Primary and secondary buttons are links styled in the editor. A chevron is added when the link has no icon
- Optional logo or flag behind the media on any background. Inline SVG uses charcoal on Light Grey and off-white on Charcoal or Red
- Slanted bottom uses .section-slanted in global.css

IMPLEMENTATION NOTES:
- Subheading color is set here for each background
- Sideways collage overflow is clipped on the collage, not the section
- Collage columns stay at the Figma widths and the media hangs past the container. Image and video stay inside it
- Collage graphic stays in the media column. Image and video graphics sit on the section, outside the container
\*---*/

.half-image-text {
    position: relative;
    overflow: hidden;
}

/* overflow: hidden would clip the .section-slanted wedge that hangs below the section. */
.half-image-text.section-slanted {
    overflow-x: clip;
    overflow-y: visible;
}

.half-image-text > .container {
    position: relative;
    z-index: 10;
}

.half-image-text__layout {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.half-image-text__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    min-width: 0;
    z-index: 10;
}

.half-image-text__copy {
    width: 100%;
}

.half-image-text__copy > :last-child,
.half-image-text__more-panel > :last-child {
    margin-bottom: 0;
}

.half-image-text__more {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-secondary);
    font-family: var(--font-button);
    font-size: var(--button-font-size);
    font-weight: var(--font-weight-button);
    letter-spacing: var(--letter-spacing-button);
    line-height: 1;
    text-transform: uppercase;
    cursor: pointer;
}

.half-image-text__more:focus-visible {
    outline: 2px solid var(--color-secondary);
    outline-offset: 4px;
}

.half-image-text__more-icon {
    display: inline-block;
    font-size: 16px;
    line-height: 1;
    transform: rotate(90deg);
    transition: transform 0.3s ease;
}

.half-image-text__more[aria-expanded="true"] .half-image-text__more-icon {
    transform: rotate(-90deg);
}

.half-image-text__more-panel {
    width: 100%;
    transition: height 0.3s ease;
}

.half-image-text__copy a.btn,
.half-image-text__more-panel a.btn {
    margin: 0 var(--space-paragraph) var(--space-paragraph) 0;
    text-decoration: none;
}

.half-image-text__copy a.btn:last-child {
    margin-bottom: 0;
}

.half-image-text__copy a.btn:not(:has(.icon)):not(:has(svg))::after,
.half-image-text__more-panel a.btn:not(:has(.icon)):not(:has(svg))::after {
    content: "\e904";
    font-family: "icon-font";
    font-size: var(--button-arrow-size);
    line-height: 1;
}

.half-image-text__media {
    position: relative;
    width: 100%;
    min-width: 0;
}

.half-image-text__graphic-wrap {
    position: absolute;
    z-index: 0;
    top: 8%;
    right: 0;
    width: 88%;
    pointer-events: none;
}

.half-image-text__graphic-wrap--outside {
    top: auto;
    right: auto;
    bottom: -182px;
    left: -138px;
    width: 1098px;
    z-index: 0;
}

.half-image-text.section-slanted .half-image-text__graphic-wrap--outside {
    z-index: 3;
    clip-path: inset(0 0 182px 0);
}

.half-image-text--collage .half-image-text__graphic-wrap {
    width: 100vw;
    height: 590px;
    object-fit: cover;
    top: 0;
    right: -45px;
}

.home .half-image-text--collage .half-image-text__graphic-wrap {
    width: 577px;
    height: 437px;
    top: auto;
    bottom: -17px;
    right: -55px;
}


.half-image-text__graphic {
    display: block;
    width: 100%;
    height: auto;
    color: var(--color-tertiary);
    opacity: 0.07;
}

.bg-primary .half-image-text__graphic,
.bg-charcoal .half-image-text__graphic {
    color: var(--color-link-hover);    
    opacity: 1;
}

.bg-primary .half-image-text__graphic g {
    opacity: 0.11;
}

.bg-primary .half-image-text__graphic path {
    fill: var(--color-primary-contrast);
}

.half-image-text.bg-charcoal .half-image-text__graphic {
    color: var(--color-secondary-contrast);
}

.half-image-text__frame {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    aspect-ratio: 800/900;
    overflow: hidden;
    border-radius: 10px;
}

.half-image-text__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.half-image-text__play {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--color-white);
    transform: translate(-50%, -50%);
    transition: transform 0.35s ease, color 0.35s ease, background-color 0.35s ease;
    cursor: pointer;
}

.half-image-text__play:hover,
.half-image-text__play:focus-visible {
    background-color: var(--color-white);
    color: var(--color-tertiary);
    transform: translate(-50%, -50%) scale(1.06);
}

.half-image-text__play:focus-visible {
    outline: 2px solid var(--color-white);
    outline-offset: 4px;
}

.half-image-text__play-icon {
    display: block;
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.half-image-text__collage {
    position: relative;
    z-index: 1;
    width: 100%;
    aspect-ratio: 872/660;
    overflow-x: clip;
    overflow-y: visible;
}

.half-image-text__collage-back,
.half-image-text__collage-front {
    position: absolute;
}

.half-image-text__collage-back {
    top: 6.36%;
    left: 0;
    display: block;
    width: 100%;
    height: 87.27%;
}

.half-image-text__collage-front {
    top: 6.36%;
    left: 21.44%;
    z-index: 1;
    width: 52.18%;
    height: 87.27%;
}

.half-image-text__collage--front-left .half-image-text__collage-front {
    left: 0;
}

.half-image-text__collage--front-right .half-image-text__collage-front {
    left: 47.82%;
}

.half-image-text__collage-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home .half-image-text__collage-image {
    width: auto;
    height: auto;
    object-fit: contain;
    position: absolute;
    bottom: 0;    
}

@media (min-width: 768px) {
    .half-image-text__frame {
        width: 664px;
        max-width: 100%;
        height: 609px;
        aspect-ratio: auto;
        margin-right: auto;
        margin-left: auto;
    }

    .half-image-text__play {
        width: 120px;
        height: 120px;
    }

    .half-image-text__graphic-wrap--outside {
        bottom: -154px;
    }

    .half-image-text.section-slanted .half-image-text__graphic-wrap--outside {
        clip-path: inset(0 0 154px 0);
    }
   
    .home .half-image-text--collage .half-image-text__graphic-wrap {
        width: 100vw;
        height: 590px;
        object-fit: cover;
        top: 54;
        right: -45px;
    }

    .half-image-text__copy a.btn,
    .half-image-text__more-panel a.btn {
        margin-bottom: 0;
    }

    .half-image-text__layout {
        gap: 32px;
    }    
}

@media (min-width: 1200px) {
    .half-image-text__layout {
        flex-direction: row;
        align-items: stretch;
    }

    .home .half-image-text__copy h2 {
        font-size: 70px;
        font-weight: 900;
    }

    .half-image-text--collage  .half-image-text__graphic-wrap {
        width: 460px;        
        top: 14%;
        left: 60px;
    }

    .home .half-image-text--collage  .half-image-text__graphic-wrap {
        left: auto;
        right: -230px;
        top: auto;
        bottom: -340px;
        width: 805px;
    }

    .half-image-text__graphic-wrap--outside {
        left: auto;
        right: -168px;
        bottom: -220px;
        width: 805px;
    }

    .half-image-text.section-slanted .half-image-text__graphic-wrap--outside {
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 220px + 2.95vw), 0 calc(100% - 220px + 2.95vw - (0.62 * 2.95vw * 637px / 100vw)));
    }    

    .half-image-text--media-left .half-image-text__layout {
        flex-direction: row-reverse;
    }

    .half-image-text__content {
        flex: 1 1 0;
        align-self: center;
    }

    .half-image-text--collage .container,
    .half-image-text--collage .half-image-text__layout {
        overflow: visible;
    }

    .half-image-text--collage .half-image-text__content {
        flex: 0 0 608px;
        width: 608px;
        max-width: none;
    }

    .half-image-text--media-right .half-image-text__content {
        padding-right: 52px;
    }

    .half-image-text--media-left .half-image-text__content {
        padding-left: 52px;
    }

    .half-image-text--image .half-image-text__media,
    .half-image-text--video .half-image-text__media {
        flex: 0 0 616px;
        width: 616px;
        min-height: 520px;
    }

    .half-image-text--collage .half-image-text__media {
        flex: 0 0 872px;
        width: 872px;
        max-width: none;
        align-self: center;
    }

    .half-image-text__frame {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        margin: 0;
    }

    .half-image-text__play {
        width: 140px;
        height: 140px;
    }

    .half-image-text__copy a.btn,
    .half-image-text__more-panel a.btn {
        margin-bottom: 0;
    }    
}