/*
 * Shared hero composition for the interior portfolio pages.
 * Keeps the copy block and supporting card on one visual centre line while
 * allowing each photograph to retain a natural, centred focal point.
 */

.about-page .about-hero-v2,
.portfolio-page .portfolio-hero-v2,
.contact-page .contact-hero-v2 {
    min-height: clamp(620px, calc(100svh - 110px), 760px) !important;
}

.about-page .about-hero-v2 .page-hero-background,
.portfolio-page .portfolio-hero-v2 .page-hero-background,
.contact-page .contact-hero-v2 .page-hero-background {
    background-position: 50% 50% !important;
    transform-origin: center center !important;
}

.about-page .about-hero-layout,
.portfolio-page .portfolio-hero-layout,
.contact-page .contact-hero-layout {
    min-height: inherit;
    align-items: center !important;
    align-content: center !important;
    padding-top: clamp(48px, 6vh, 72px) !important;
    padding-bottom: clamp(48px, 6vh, 72px) !important;
}

.about-page .about-hero-v2 .page-hero-content,
.portfolio-page .portfolio-hero-v2 .page-hero-content,
.contact-page .contact-hero-v2 .page-hero-content,
.about-page .about-hero-manifesto,
.portfolio-page .portfolio-hero-stats,
.contact-page .contact-hero-note {
    align-self: center !important;
}

.about-page .about-hero-manifesto,
.portfolio-page .portfolio-hero-stats,
.contact-page .contact-hero-note {
    width: 100%;
}

@media (max-width: 980px) {
    .about-page .about-hero-v2,
    .portfolio-page .portfolio-hero-v2,
    .contact-page .contact-hero-v2 {
        min-height: 0 !important;
    }

    .about-page .about-hero-layout,
    .portfolio-page .portfolio-hero-layout,
    .contact-page .contact-hero-layout {
        min-height: clamp(620px, calc(100svh - 70px), 760px) !important;
        align-content: center !important;
        padding-top: clamp(46px, 7vh, 68px) !important;
        padding-bottom: clamp(46px, 7vh, 68px) !important;
    }

    .about-page .about-hero-manifesto,
    .portfolio-page .portfolio-hero-stats,
    .contact-page .contact-hero-note {
        max-width: 560px;
    }
}

@media (max-width: 768px) {
    .about-page .about-hero-v2 .page-hero-background,
    .portfolio-page .portfolio-hero-v2 .page-hero-background,
    .contact-page .contact-hero-v2 .page-hero-background {
        background-position: center center !important;
    }

    .about-page .about-hero-layout,
    .portfolio-page .portfolio-hero-layout,
    .contact-page .contact-hero-layout {
        min-height: clamp(610px, calc(100svh - 70px), 720px) !important;
        gap: 24px !important;
        padding-top: 42px !important;
        padding-bottom: 42px !important;
    }

    .about-page .about-hero-manifesto,
    .portfolio-page .portfolio-hero-stats,
    .contact-page .contact-hero-note {
        max-width: 100%;
    }
}

@media (max-width: 560px) {
    .about-page .about-hero-layout,
    .portfolio-page .portfolio-hero-layout,
    .contact-page .contact-hero-layout {
        min-height: 0 !important;
        padding-top: 38px !important;
        padding-bottom: 38px !important;
    }
}