/*
|--------------------------------------------------------------------------
| Highlight Information — responsive clip-paths
|--------------------------------------------------------------------------
| Same slope direction at every breakpoint (left higher, right lower)
| media-right → cut at bottom; media-left → cut at top
*/

.js-highlight-info-copy {
    overflow: visible;
}

.js-highlight-info-copy.is-collapsed {
    overflow: hidden;
}

.js-highlight-info-copy > :first-child {
    margin-top: 0;
}

.js-highlight-info-copy :where(p, a, strong, b, em, span) {
    display: inline;
    line-height: inherit;
}

.hi-wrapped-cut {
    aspect-ratio: 1440 / 87;
    width: 100%;
}

.block-highlightInformation .btn-text-button {
    padding-inline-start: 0;
}

.js-highlight-info-copy p:not(:last-child)::after {
    content: " ";
}

.js-highlight-info-inline,
.js-highlight-info-inline :where(p, a, strong, b, em, span) {
    display: inline;
    line-height: inherit;
}

.js-highlight-info-inline p:not(:last-child)::after {
    content: " ";
}

.js-highlight-info-inline .js-inline-toggle {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    cursor: pointer;
    text-decoration: none;
    vertical-align: baseline;
}

.js-highlight-info-inline .js-inline-toggle-label {
    text-decoration: underline;
    text-decoration-skip-ink: none;
}

.js-highlight-info-inline .js-inline-toggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    font-size: 20px;
    line-height: 20px;
    text-decoration: none;
}

.js-read-more-toggle.hidden {
    display: none;
}

.js-highlight-info-copy .js-read-more-toggle {
    display: inline;
    margin-left: 0.25em;
    vertical-align: baseline;
}

.js-highlight-info-copy .js-read-more-toggle.hidden {
    display: none;
}

@media (min-width: 768px) {
    .hi-highlight-image-row:is([data-readmore-state="static"], [data-readmore-state="collapsed"]) {
        align-items: stretch;
    }

    .hi-highlight-image-row:is([data-readmore-state="static"], [data-readmore-state="collapsed"]) .hi-highlight-image-media {
        display: flex;
        height: auto;
        align-self: stretch;
    }

    .hi-highlight-image-row:is([data-readmore-state="static"], [data-readmore-state="collapsed"]) .hi-highlight-image-frame {
        flex: 1 1 auto;
        height: 100%;
    }

    .hi-highlight-image-row:is([data-readmore-state="static"], [data-readmore-state="collapsed"]) .hi-highlight-image-frame > img {
        height: 100%;
        object-fit: cover;
    }

    .hi-highlight-image-row[data-readmore-state="expanded"] {
        align-items: flex-start;
    }

    .hi-highlight-image-row[data-readmore-state="expanded"] .hi-highlight-image-media {
        display: flex;
        height: var(--highlight-image-collapsed-height, auto);
        align-self: flex-start;
    }

    .hi-highlight-image-row[data-readmore-state="expanded"] .hi-highlight-image-frame {
        flex: 1 1 auto;
        height: 100%;
    }
}

/* Image type: media on right (!mediaLeft) — mobile: cut at bottom of image */
.hi-media-right {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20.3px), 0 100%);
}

/* Image type: media on left (mediaLeft) — mobile: cut at top of image */
.hi-media-left {
    clip-path: polygon(0 20.3px, 100% 0, 100% 100%, 0 100%);
}

@media (min-width: 768px) {
    .hi-media-right {
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20.9px), 0 100%);
    }

    .hi-media-left {
        clip-path: polygon(0 20.9px, 100% 0, 100% 100%, 0 100%);
    }

    .hi-image-content-top-shape,
    .hi-image-content-bottom-shape {
        height: 20.9px;
    }

    .hi-image-content-top-shape {
        clip-path: polygon(0 100%, 100% 0, 100% 100%, 0 100%);
    }

    .hi-image-content-bottom-shape {
        clip-path: polygon(0 0, 100% 0, 0 100%, 0 100%);
    }
}

@media (min-width: 1280px) {
    .hi-media-right {
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 36.25px), 0 100%);
    }

    .hi-media-left {
        clip-path: polygon(0 36.25px, 100% 0, 100% 100%, 0 100%);
    }

    .hi-image-content-top-shape,
    .hi-image-content-bottom-shape {
        height: 36.25px;
    }

}

/*
|--------------------------------------------------------------------------
| Badge type: fixed box height per breakpoint
|--------------------------------------------------------------------------
*/
@media (min-width: 768px) {
    .hi-highlight-badge-box {
        height: 268px;
    }

    .hi-highlight-badge-copy {
        margin-block: auto;
    }
}

@media (min-width: 1280px) {
    .hi-highlight-badge-box {
        height: 236px;
    }
}

.hi-highlight-partner-badge-box {
    width: min(346px, 100%);
    min-height: 196px;
    gap: 16px;
    padding: 24px 16px;
}

@media (min-width: 768px) {
    .hi-highlight-partner-badge-box {
        width: 346px;
        min-height: 316px;
        gap: 24px;
        padding: 32px;
    }
}

@media (min-width: 1280px) {
    .hi-highlight-partner-badge-box {
        width: 496px;
        min-height: 316px;
        gap: 24px;
        padding: 32px;
    }
}

@media (min-width: 768px) and (max-width: 1279px) {
    .hi-highlight-logo-row {
        flex-direction: column;
    }

    .hi-highlight-logo-media {
        width: 100%;
        flex: none;
    }

    .hi-highlight-logo-media-inner {
        width: 100%;
        height: auto;
        min-height: auto;
        justify-content: center;
        padding-right: 0;
        padding-left: 0;
    }

    .hi-highlight-logo-image {
        width: 100%;
        height: auto;
        max-width: 100%;
        max-height: none;
    }
}

@media (max-width: 767px) {
    .hi-highlight-logo-media-inner {
        padding-right: 0;
    }

    .hi-highlight-logo-image {
        max-width: 100%;
    }
}

@media (min-width: 1280px) {
    .hi-highlight-logo-media-inner {
        width: 496px;
        height: auto;
        min-height: auto;
        justify-content: center;
        padding-right: 0;
        padding-left: 0;
    }

    .hi-highlight-logo-image {
        width: 496px;
        height: auto;
        max-width: none;
        max-height: none;
    }
}

/*
|--------------------------------------------------------------------------
| Other type: parallelogram clip-path on image — responsive
|--------------------------------------------------------------------------
| Mobile:  wider image → 15% skew offset
| Tablet:  narrower/taller in row layout → 10% skew offset
| Desktop: restored to 15% for the larger card
*/
.hi-other-clip {
    clip-path: polygon(100% 0, 100% 85%, 0 100%, 0 15%);
}

@media (min-width: 768px) {
    .hi-other-clip {
        clip-path: polygon(100% 0, 100% 90%, 0 100%, 0 10%);
    }
}

@media (min-width: 1280px) {
    .hi-other-clip {
        clip-path: polygon(100% 0, 100% 85%, 0 100%, 0 15%);
    }
}

@media (min-width: 1280px) {
    [data-highlight-other-card][data-readmore-state="expanded"] .hi-other-media-inner {
        padding: 20px;
    }

    [data-highlight-other-card][data-readmore-state="expanded"] .hi-other-image-shape {
        width: 100%;
        max-width: 272px;
        height: auto;
        aspect-ratio: 180 / 212;
    }
}