/*
 * Final public hero geometry.
 *
 * The public template has several intentionally different hero scenes, but
 * their frame must have one invariant: copy starts from the same top line,
 * and the visual is contained by that frame instead of inheriting the old
 * centered/translated layout. Keep this layer last and geometry-only so it
 * does not replace the current palette or typography.
 */

@media (min-width: 768px) {
    html body .copp-hero {
        overflow: hidden !important;
    }

    html body .copp-hero__inner {
        align-items: stretch !important;
        box-sizing: border-box !important;
        height: var(--copp-home-hero-height, 440px) !important;
        max-height: var(--copp-home-hero-height, 440px) !important;
        min-height: var(--copp-home-hero-height, 440px) !important;
        padding: 0 clamp(28px, 7vw, 108px) !important;
        justify-items: stretch !important;
    }

    html body .copp-hero__copy {
        align-self: flex-start !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        justify-content: flex-start !important;
        justify-self: start !important;
        margin-top: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        position: relative !important;
        top: 0 !important;
        transform: none !important;
    }

    html body .copp-hero__visual,
    html body .copp-hero__visual > .copp-visual {
        align-self: stretch !important;
        height: 100% !important;
        min-height: 0 !important;
        justify-self: stretch !important;
        transform: none !important;
    }

    html body .copp-hero__people {
        bottom: 0 !important;
        height: calc(100% + 16px) !important;
        margin-bottom: 0 !important;
        margin-top: 0 !important;
        right: 0 !important;
        top: auto !important;
        transform: none !important;
    }

    html body :is(.copp-news-hero, .copp-gallery-hero) {
        box-sizing: border-box !important;
        height: auto !important;
        max-height: none !important;
        min-height: var(--copp-hero-restored-page-height, 360px) !important;
        overflow: visible !important;
        padding: 0 !important;
    }

    html body :is(.copp-news-hero__inner, .copp-gallery-hero__inner) {
        align-items: stretch !important;
        box-sizing: border-box !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        padding: 0 clamp(28px, 7vw, 108px) !important;
        justify-items: stretch !important;
    }

    html body :is(.copp-news-hero__copy, .copp-gallery-hero__copy) {
        align-content: flex-start !important;
        align-self: flex-start !important;
        box-sizing: border-box !important;
        height: auto !important;
        justify-content: flex-start !important;
        justify-self: start !important;
        margin-top: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        position: relative !important;
        top: 0 !important;
        transform: none !important;
    }

    html body :is(
        .copp-news-hero__media,
        .copp-gallery-hero__media,
        .copp-school-hero__media,
        .copp-students-hero__media,
        .copp-events-hero__media,
        .copp-contacts-hero__media
    ) {
        align-self: stretch !important;
        box-sizing: border-box !important;
        height: auto !important;
        margin-top: 0 !important;
        min-height: var(--copp-hero-restored-page-height, 360px) !important;
        overflow: visible !important;
        position: relative !important;
        justify-self: stretch !important;
        top: 0 !important;
        transform: none !important;
    }

    html body :is(
        .copp-news-hero__media > img,
        .copp-gallery-hero__media > img,
        .copp-students-hero__scene,
        .copp-school-hero__scene,
        .copp-students-hero__people
    ) {
        box-sizing: border-box !important;
        margin: 0 !important;
        height: 100% !important;
        min-height: 0 !important;
        object-position: center bottom !important;
        transform: none !important;
    }

    html body :is(
        .copp-students-hero__people,
        .copp-opportunity-hero .copp-students-hero__people
    ) {
        bottom: 0 !important;
        margin-bottom: 0 !important;
        margin-top: 0 !important;
        right: 0 !important;
        top: auto !important;
        width: min(100%, 560px) !important;
    }

    /*
     * Some public hero templates do not use .copp-news-hero__inner. They
     * still need the same frame contract: the copy starts at the frame's
     * content line and the artwork occupies the neighboring column without
     * inheriting the old vertical centering/translation.
     */
    html body :is(
        .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
    ) {
        align-items: stretch !important;
    }

    html body :is(
        .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-self: flex-start !important;
        justify-self: start !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
        position: relative !important;
        top: 0 !important;
        transform: none !important;
    }

    html body :is(
        .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;
        justify-self: stretch !important;
        margin-top: 0 !important;
        position: relative !important;
        top: 0 !important;
        transform: none !important;
    }

    html body :is(
        .copp-knowledge-hero__scene,
        .copp-programs-archive__art,
        .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-top: 0 !important;
        object-position: center bottom !important;
        transform: none !important;
    }
}

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

    html body .copp-hero__inner {
        align-items: flex-start !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        padding: 20px 18px 24px !important;
    }

    html body :is(.copp-news-hero__inner, .copp-gallery-hero__inner) {
        align-items: flex-start !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        padding: 20px 18px 28px !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;
        height: auto !important;
        justify-content: flex-start !important;
        margin-top: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        position: relative !important;
        top: 0 !important;
        transform: none !important;
    }

    html body :is(
        .copp-hero__visual,
        .copp-news-hero__media,
        .copp-gallery-hero__media,
        .copp-school-hero__media,
        .copp-students-hero__media,
        .copp-events-hero__media,
        .copp-contacts-hero__media,
        .copp-students-hero__people,
        .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
    ) {
        transform: none !important;
    }

    html body :is(
        .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
    ) {
        align-items: flex-start !important;
    }

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