/*
 * Final public hero top-edge contract.
 *
 * Older page-specific rules use different padding and centering values. They
 * make the same hero composition jump vertically between routes. This layer
 * keeps the existing typography, palette and artwork, but makes every hero
 * start its copy and media from the top edge of its own frame.
 */

@media (min-width: 768px) {
    html body .copp-hero__inner {
        padding-block-start: 0 !important;
    }

    html body .copp-hero__copy {
        padding-block-start: 0 !important;
    }

    html body :is(
        .copp-news-hero,
        .copp-gallery-hero
    ) > :is(
        .copp-news-hero__inner,
        .copp-gallery-hero__inner
    ) {
        padding-block-start: 0 !important;
    }

    html body :is(
        .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
    ) {
        margin-block-start: 0 !important;
        padding-block-start: 0 !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
    ) {
        margin-block-start: 0 !important;
        top: 0 !important;
        transform: none !important;
    }

    html body :is(
        .copp-news-hero,
        .copp-gallery-hero,
        .copp-programs-archive__hero,
        .copp-program-article__hero,
        .copp-news-article__hero,
        .copp-knowledge-hero,
        .copp-knowledge-item__hero,
        .copp-resources-archive__hero,
        .copp-resource-article__hero
    ) {
        padding-block-start: 0 !important;
    }

    html body :is(
        .copp-project-article__copy,
        .copp-equipment-article__copy,
        .copp-contest-article__copy
    ) {
        padding-block-start: 0 !important;
    }
}

/* The legacy responsive layer switches public heroes to one column below
 * 992px. Undo the desktop grid-column contract in the tablet range before
 * the mobile rules take over. */
@media (min-width: 768px) and (max-width: 991.98px) {
    html body :is(
        .copp-news-hero,
        .copp-gallery-hero
    ) > :is(
        .copp-news-hero__inner,
        .copp-gallery-hero__inner
    ) {
        grid-template-columns: minmax(0, 1fr) !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        padding-block: 12px 32px !important;
    }

    html body :is(
        .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
    ) {
        grid-column: 1 !important;
        grid-row: auto !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: 1 !important;
        grid-row: auto !important;
        height: clamp(280px, 34vw, 340px) !important;
        min-height: 0 !important;
    }

    html body :is(
        .copp-news-hero__media > img,
        .copp-gallery-hero__media > img,
        .copp-knowledge-hero__scene,
        .copp-programs-archive__art 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
    ) {
        height: 100% !important;
        min-height: 0 !important;
    }

    html body :is(
        .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-hero,
        .copp-knowledge-item__hero,
        .copp-resources-archive__hero,
        .copp-resource-article__hero
    ) {
        grid-template-columns: minmax(0, 1fr) !important;
        min-height: 0 !important;
        padding-block-start: 0 !important;
    }
}

@media (max-width: 767.98px) {
    html body .copp-hero__inner {
        padding-block-start: 12px !important;
    }

    html body :is(
        .copp-news-hero,
        .copp-gallery-hero
    ) > :is(
        .copp-news-hero__inner,
        .copp-gallery-hero__inner
    ) {
        grid-template-columns: minmax(0, 1fr) !important;
        padding-block-start: 12px !important;
    }

    html body :is(
        .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-hero,
        .copp-knowledge-item__hero,
        .copp-resources-archive__hero,
        .copp-resource-article__hero
    ) {
        grid-template-columns: minmax(0, 1fr) !important;
        padding-block-start: 0 !important;
    }

    html body :is(
        .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
    ) {
        margin-block-start: 0 !important;
        padding-block-start: 0 !important;
    }
}