/*
 * Cache-busted public hero alignment contract.
 *
 * All public hero variants must use their own frame as the containing block:
 * copy stays in the first grid row and media stays in the neighbouring
 * column, anchored to the frame bottom. This is the final geometry layer;
 * typography, palette and artwork remain owned by the existing styles.
 */

@media (min-width: 768px) {
    html body :is(
        .copp-hero,
        .copp-news-hero,
        .copp-gallery-hero,
        .copp-contests-hero,
        .copp-knowledge-hero,
        .copp-programs-archive__hero,
        .copp-program-article__hero,
        .copp-news-article__hero,
        .copp-project-article__hero,
        .copp-equipment-article__hero,
        .copp-contest-article__hero,
        .copp-knowledge-item__hero,
        .copp-resources-archive__hero,
        .copp-resource-article__hero
    ) {
        box-sizing: border-box !important;
        position: relative !important;
    }

    html body :is(
        .copp-hero__inner,
        .copp-news-hero__inner,
        .copp-gallery-hero__inner
    ) {
        align-items: stretch !important;
        box-sizing: border-box !important;
        position: relative !important;
    }

    html body :is(
        .copp-hero__copy,
        .copp-news-hero__copy,
        .copp-gallery-hero__copy,
        .copp-knowledge-hero__copy,
        .copp-programs-archive__copy,
        .copp-program-article__copy,
        .copp-news-article__hero-copy,
        .copp-project-article__copy,
        .copp-equipment-article__copy,
        .copp-contest-article__copy,
        .copp-knowledge-item__copy,
        .copp-resources-archive__copy,
        .copp-resource-article__copy
    ) {
        align-content: flex-start !important;
        align-self: flex-start !important;
        box-sizing: border-box !important;
        grid-column: 1 !important;
        grid-row: 1 !important;
        justify-content: flex-start !important;
        justify-self: start !important;
        margin-block-start: 0 !important;
        min-height: 0 !important;
        position: relative !important;
        top: 0 !important;
        transform: none !important;
    }

    html body :is(
        .copp-news-hero__media,
        .copp-gallery-hero__media,
        .copp-knowledge-hero__media,
        .copp-programs-archive__art,
        .copp-program-article__media,
        .copp-news-article__hero-media,
        .copp-news-article__hero-fallback,
        .copp-project-article__media,
        .copp-equipment-article__media,
        .copp-contest-article__media,
        .copp-resources-archive__art,
        .copp-resource-article__media
    ) {
        align-self: stretch !important;
        box-sizing: border-box !important;
        grid-column: 2 !important;
        grid-row: 1 !important;
        height: 100% !important;
        margin-block-start: 0 !important;
        min-height: 0 !important;
        position: relative !important;
        top: 0 !important;
        transform: none !important;
    }

    html body :is(
        .copp-hero__people,
        .copp-students-hero__people,
        .copp-opportunity-hero .copp-students-hero__people
    ) {
        bottom: 0 !important;
        margin-block-end: 0 !important;
        margin-block-start: 0 !important;
        right: 0 !important;
        top: auto !important;
        transform: none !important;
    }

    html body :is(
        .copp-hero__people img,
        .copp-students-hero__people img,
        .copp-news-hero__media > img,
        .copp-gallery-hero__media > img,
        .copp-program-article__media img,
        .copp-news-article__hero-media img,
        .copp-news-article__hero-fallback img,
        .copp-project-article__media img,
        .copp-equipment-article__media img,
        .copp-contest-article__media img,
        .copp-resources-archive__art img,
        .copp-resource-article__media img
    ) {
        margin-block-start: 0 !important;
        object-position: center bottom !important;
        transform: none !important;
    }

    /* Standalone article heroes need a real media frame even when the parent
     * has no content-sized min-height of its own. */
    html body :is(
        .copp-programs-archive__art,
        .copp-program-article__media,
        .copp-news-article__hero-media,
        .copp-news-article__hero-fallback,
        .copp-project-article__media,
        .copp-equipment-article__media,
        .copp-contest-article__media
    ) {
        min-height: 350px !important;
    }

    /* The homepage keeps its intentionally larger top rhythm. */
    html body .copp-hero__copy {
        padding-block-start: clamp(20px, 2vw, 28px) !important;
    }
}

@media (max-width: 767.98px) {
    html body :is(
        .copp-hero__copy,
        .copp-news-hero__copy,
        .copp-gallery-hero__copy,
        .copp-knowledge-hero__copy,
        .copp-programs-archive__copy,
        .copp-program-article__copy,
        .copp-news-article__hero-copy,
        .copp-project-article__copy,
        .copp-equipment-article__copy,
        .copp-contest-article__copy,
        .copp-knowledge-item__copy,
        .copp-resources-archive__copy,
        .copp-resource-article__copy
    ) {
        align-content: flex-start !important;
        align-self: flex-start !important;
        grid-column: auto !important;
        grid-row: auto !important;
        justify-content: flex-start !important;
        justify-self: stretch !important;
        margin-block-start: 0 !important;
        min-height: 0 !important;
        padding-block-start: 0 !important;
        top: 0 !important;
        transform: none !important;
    }

    html body :is(
        .copp-news-hero__media,
        .copp-gallery-hero__media,
        .copp-knowledge-hero__media,
        .copp-programs-archive__art,
        .copp-program-article__media,
        .copp-news-article__hero-media,
        .copp-news-article__hero-fallback,
        .copp-project-article__media,
        .copp-equipment-article__media,
        .copp-contest-article__media,
        .copp-resources-archive__art,
        .copp-resource-article__media
    ) {
        grid-column: auto !important;
        grid-row: auto !important;
        height: auto !important;
        margin-block-start: 0 !important;
        min-height: 0 !important;
        top: 0 !important;
        transform: none !important;
    }
}