/*
 * Canonical geometry lock for public inner-page heroes.
 *
 * The parent heroes are intentionally compact. Keep their inner grid and
 * media in the same box; the copy starts on the common content line instead
 * of being centered by its own text height and appearing to drift downward.
 */

@media (min-width: 768px) {
    html body :is(
        .copp-news-hero__inner,
        .copp-gallery-hero__inner
    ) {
        align-items: stretch !important;
        box-sizing: border-box !important;
        height: var(--copp-hero-restored-page-height, 360px) !important;
        max-height: var(--copp-hero-restored-page-height, 360px) !important;
        min-height: var(--copp-hero-restored-page-height, 360px) !important;
        padding: 20px clamp(28px, 7vw, 108px) 0 !important;
    }

    html body :is(
        .copp-news-hero__copy,
        .copp-gallery-hero__copy
    ) {
        align-self: flex-start !important;
        box-sizing: border-box !important;
        height: auto !important;
        justify-content: flex-start !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    html body :is(
        .copp-news-hero__media,
        .copp-gallery-hero__media
    ) {
        align-self: stretch !important;
        box-sizing: border-box !important;
        height: 100% !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    html body :is(
        .copp-news-hero__media > img,
        .copp-gallery-hero__media > img,
        .copp-gallery-hero__frame
    ) {
        box-sizing: border-box !important;
        height: 100% !important;
        min-height: 0 !important;
    }
}

@media (max-width: 767.98px) {
    html body :is(
        .copp-news-hero,
        .copp-gallery-hero
    ) {
        padding-top: 0 !important;
    }

    html body :is(.copp-news-hero, .copp-gallery-hero) > :is(
        .copp-news-hero__inner,
        .copp-gallery-hero__inner
    ) {
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        padding: 20px 24px 48px !important;
    }

    html body :is(
        .copp-news-hero__copy,
        .copp-gallery-hero__copy
    ) {
        align-self: flex-start !important;
        justify-content: flex-start !important;
        min-height: 0 !important;
    }
}