/*
 * Hero (view.php).
 */

.blk--hero {
    /* Every hero that isn't full screen is this tall (at least), so pages match whatever
       the length of their text: as tall as the Contact page's. */
    --hero-standard: 536px;
    position: relative;
    display: flex;
    align-items: center;
    padding-block: var(--space-lg);
    background: var(--hero-bg, var(--black));
}

@media (max-width: 1024px) {
    .blk--hero {
        --hero-standard: 496px;
    }
}

@media (max-width: 600px) {
    .blk--hero {
        --hero-standard: 484px;
    }
}

.hero__inner {
    position: relative;
    z-index: 1;
    margin-top: var(--header-clearance, 0px);
}

.hero__bg {
    position: absolute;
    inset: 0;
    container-type: size;
    background: var(--bg-image) center / cover no-repeat;
}

.hero__bg video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero__overlay {
    position: absolute;
    inset: 0;
    background: var(--overlay);
    pointer-events: none;
}

@media (max-width: 860px) {
    .hero__bg {
        background-image: var(--bg-image-tablet, var(--bg-image));
    }
}

@media (max-width: 600px) {
    .hero__bg {
        background-image: var(--bg-image-mobile, var(--bg-image-tablet, var(--bg-image)));
    }
}

@media (min-width: 1025px) {
    .hero--full {
        height: calc(100vh - var(--header-height));
        max-height: 1080px;
    }
}

/* ---------- Text ---------- */

.hero__text {
    display: flex;
    flex-direction: column;
}

.hero__text .text-group__heading {
    max-width: var(--heading-width, 580px);
}

.hero__text .text-group__heading.is-h2 {
    max-width: var(--heading-width, 520px);
}

/* The hero's text reads as one paragraph block (lines, not spaced paragraphs) */
.hero__text .text-group__body {
    gap: 0;
    max-width: var(--body-width, 560px);
    margin-top: var(--step-5);
}

@media (min-width: 601px) {
    .hero__text.text-group--center-desktop {
        align-items: center;
    }

    .hero__text.text-group--center-desktop .text-group__body {
        max-width: var(--body-width, 660px);
    }
}

@media (max-width: 1024px) {
    .hero__text .text-group__heading {
        max-width: 495px;
    }

    .hero__text .text-group__body {
        max-width: 500px;
    }
}

/* Tablet: narrower title and body (over the width settings too) */
@media (min-width: 601px) and (max-width: 1024px) {
    .hero--page .hero__text :is(.text-group__heading, .text-group__body) {
        max-width: 380px !important;
    }

    .hero--page .hero__text .text-group__subheading {
        max-width: 500px;
    }
}

@media (max-width: 860px) {
    .hero--page:not(.hero--full) {
        min-height: 0;
    }

    .hero__text .text-group__heading {
        text-wrap: balance;
    }
}

@media (max-width: 600px) {
    .hero--page {
        min-height: 580px;
        padding-block: 84px 80px;
    }

    .hero--page:not(:has(.text-group--center-mobile)) {
        align-items: flex-start;
    }

    .hero__text .text-group__heading {
        max-width: 400px !important;
    }

    .hero__text .text-group__buttons {
        width: 100%;
    }

    .hero__text.text-group--center-mobile {
        align-items: center;
    }
}

/* ---------- Background in the right half (tablet and desktop) ---------- */

.hero--bg-right {
    --hero-side: #000;
    background: var(--hero-side);
}

@media (min-width: 601px) {
    .hero--bg-right:not(.hero--below-tablet) .hero__bg {
        left: 50%;
        width: 50%;
    }

    .hero--bg-right:not(.hero--below-tablet) .hero__bg::after {
        content: '';
        position: absolute;
        inset: 0 auto 0 0;
        width: 35%;
        background: linear-gradient(90deg, var(--hero-side), rgba(0, 0, 0, 0));
        pointer-events: none;
    }

    .hero--bg-right:not(.hero--below-tablet) .hero__text > * {
        max-width: min(100%, calc(50vw - (100vw - min(100vw, var(--page-width))) / 2 - var(--gutter) - 48px));
    }
}

@media (min-width: 1025px) {
    .hero--bg-right.hero--below-tablet .hero__bg {
        left: 50%;
        width: 50%;
    }
}

/* ---------- Image below the text (phones, or tablets too) ----------
   The whole image sits under the text at full width (shown a little larger, cropped),
   just below the buttons. */

.blk--hero {
    --hero-below-gap: -24px;   /* positive: the buttons overlap the image's top edge */
    --hero-below-scale: 1.5;
}

@media (min-width: 861px) and (max-width: 1024px) {
    .hero--below-tablet { --hero-ratio: var(--hero-ratio-desktop); }
}

@media (min-width: 601px) and (max-width: 860px) {
    .hero--below-tablet { --hero-ratio: var(--hero-ratio-tablet, var(--hero-ratio-desktop)); }
}

@media (max-width: 600px) {
    .hero--below-mobile { --hero-ratio: var(--hero-ratio-mobile); }
}

@media (max-width: 1024px) {
    .blk--hero.hero--below-tablet {
        min-height: 0;
        height: auto;
        align-items: flex-start;
        padding-bottom: calc(100vw * var(--hero-below-scale) * var(--hero-ratio) - var(--hero-below-gap));
    }

    .hero--below-tablet .hero__bg {
        background-color: var(--black);
        background-size: calc(100% * var(--hero-below-scale)) auto;
        background-position: center bottom;
    }

    .hero--below-tablet .hero__glint-frame {
        top: auto;
        bottom: 0;
        width: calc(100cqw * var(--hero-below-scale));
        translate: -50% 0;
    }

    /* A fade from black over the image's top edge, joining it to the hero above (as the
       side image fades in from the left on larger screens) */
    .hero--below-tablet .hero__bg::after {
        content: '';
        position: absolute;
        inset: auto 0 0;
        height: calc(100cqw * var(--hero-below-scale) * var(--hero-ratio));
        background: linear-gradient(180deg, var(--hero-side, var(--black)) 0%, rgba(0, 0, 0, 0) 35%);
        pointer-events: none;
    }
}

@media (max-width: 600px) {
    .blk--hero.hero--below-mobile {
        min-height: 0;
        height: auto;
        align-items: flex-start;
        padding-bottom: calc(100vw * var(--hero-below-scale) * var(--hero-ratio) - var(--hero-below-gap));
    }

    .hero--below-mobile .hero__bg {
        background-color: var(--black);
        background-size: calc(100% * var(--hero-below-scale)) auto;
        background-position: center bottom;
    }

    .hero--below-mobile .hero__glint-frame {
        top: auto;
        bottom: 0;
        width: calc(100cqw * var(--hero-below-scale));
        translate: -50% 0;
    }

    /* A fade from black over the image's top edge, joining it to the hero above (as the
       side image fades in from the left on larger screens) */
    .hero--below-mobile .hero__bg::after {
        content: '';
        position: absolute;
        inset: auto 0 0;
        height: calc(100cqw * var(--hero-below-scale) * var(--hero-ratio));
        background: linear-gradient(180deg, var(--hero-side, var(--black)) 0%, rgba(0, 0, 0, 0) 35%);
        pointer-events: none;
    }
}

/* ---------- Light glint ----------
   A slow glow and twinkling rays over a bright point of the image. The frame is a box the
   image's shape, sized and placed as the image is (cover, centred), so --glint-x / -y
   (percent of the image) land on the same spot at every screen size. */

.hero__glint-frame {
    position: absolute;
    left: 50%;
    top: 50%;
    width: max(100cqw, 100cqh * var(--glint-ratio));
    aspect-ratio: var(--glint-ratio);
    translate: -50% -50%;
    pointer-events: none;
}

.hero__glint {
    --glint-light: 255, 226, 178;
    --glint-lead: -2s; /* the first flare comes ~1.5s after the page loads */
    position: absolute;
    left: var(--glint-x);
    top: var(--glint-y);
    width: var(--glint-size);
    aspect-ratio: 1;
    translate: -50% -50%;
    mix-blend-mode: screen;
}

.hero__glint-rays {
    position: absolute;
    inset: 0;
}

.hero__glint-glow {
    position: absolute;
    inset: 25%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(var(--glint-light), .9), rgba(var(--glint-light), .35) 35%, rgba(var(--glint-light), 0));
    opacity: .5;
    animation: hero-glint-glow 5s ease-in-out infinite;
}

.hero__glint-rays::before,
.hero__glint-rays::after,
.hero__glint::before,
.hero__glint::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    height: 2px;
    margin: -1px 0 0 -50%;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(var(--glint-light), 0), rgba(var(--glint-light), .95) 50%, rgba(var(--glint-light), 0));
    filter: blur(.4px);
    opacity: .35;
    scale: .7 1;
    animation: hero-glint-ray 7s cubic-bezier(.4, 0, .2, 1) var(--glint-lead) infinite;
}

.hero__glint-rays::after {
    rotate: 90deg;
    animation-delay: calc(var(--glint-lead) + .12s);
}

.hero__glint::before,
.hero__glint::after {
    width: 55%;
    margin-left: -27.5%;
    opacity: 0;
    rotate: 45deg;
    animation-name: hero-glint-glimmer;
}

.hero__glint::after {
    rotate: -45deg;
}

@keyframes hero-glint-glow {
    0%, 100% { opacity: .45; scale: .9; }
    50% { opacity: .85; scale: 1.08; }
}

@keyframes hero-glint-ray {
    0%, 40%, 100% { opacity: .35; scale: .7 1; }
    50% { opacity: 1; scale: 1.15 1; }
    62% { opacity: .45; scale: .78 1; }
}

@keyframes hero-glint-glimmer {
    0%, 42%, 100% { opacity: 0; scale: .3 1; }
    51% { opacity: .55; scale: 1 1; }
    60% { opacity: 0; scale: .6 1; }
}

@media (prefers-reduced-motion: reduce) {
    .hero__glint-glow,
    .hero__glint-rays::before,
    .hero__glint-rays::after,
    .hero__glint::before,
    .hero__glint::after {
        animation: none !important;
    }
}

/* ---------- Blog style ---------- */

.hero--blog {
    min-height: 0;
}

.hero--blog .hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    align-items: center;
    gap: var(--space-md);
}

.hero--blog .text-group__subheading {
    margin-bottom: var(--subheading-gap);
}

.hero--blog .hero__text .text-group__body {
    gap: var(--step-6);
    max-width: 520px;
    margin-top: var(--step-6);
}

.hero--centred .hero__inner {
    grid-template-columns: minmax(0, 760px);
    justify-content: center;
    text-align: center;
}

.hero--centred .hero__text {
    align-items: center;
}

.hero--centred .hero__text .text-group__body {
    max-width: 620px;
    margin-inline: auto;
}

/* The spotlight article: its photo fills the card and darkens toward the foot, where the
   label, title, summary and date sit; the title's link covers the whole card. */
.hero__card {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: flex-end;
    aspect-ratio: 3 / 2;            /* landscape; it grows if a long title needs the room (so no
                                       overflow: hidden here: the photo and fade are clipped instead) */
    border: 1px solid color-mix(in srgb, var(--neutral-200) 10%, transparent);
    border-radius: var(--radius-lg);
    background: var(--neutral-900);
    box-shadow: 0 30px 80px color-mix(in srgb, var(--black) 45%, transparent);
}

.hero__card-media {
    position: absolute;
    z-index: -2;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
}

.hero__card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s cubic-bezier(.2, .7, .2, 1);
}

.hero__card:hover .hero__card-image {
    transform: scale(1.04);
}

/* Hover: a soft diagonal shine sweeps across the photo (clipped to the card's corners) */
.hero__card-media::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 60%;
    background: linear-gradient(105deg, transparent 20%, color-mix(in srgb, var(--white) 35%, transparent) 50%, transparent 80%);
    transform: translateX(-120%) skewX(-12deg);
    pointer-events: none;
}

.hero__card:hover .hero__card-media::after {
    transform: translateX(260%) skewX(-12deg);
    transition: transform 1.1s cubic-bezier(.4, 0, .2, 1);
}

/* The fade that keeps the text readable on any photo */
.hero__card::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--black) 20%, transparent) 0%,
        color-mix(in srgb, var(--black) 68%, transparent) 38%,
        color-mix(in srgb, var(--black) 92%, transparent) 100%);
}

.hero__card-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    max-width: 600px;
    padding: 40px;
}

.hero__card-body p {
    margin: 0;
}

.hero__card .hero__card-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--tertiary-200);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.hero__card .hero__card-label::before {
    content: '';
    width: 24px;
    height: 1px;
    background: currentColor;
}

.hero__card-title {
    margin: 0;
    color: var(--white);
    font-size: 34px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: 0;
    text-wrap: balance;
}

.hero__card-title a {
    color: inherit;
    text-decoration: none;
}

/* The whole card is the link */
.hero__card-title a::after {
    content: '';
    position: absolute;
    inset: 0;
}

.hero__card:has(.hero__card-title a:focus-visible) {
    outline: 2px solid var(--tertiary-200);
    outline-offset: 4px;
}

.hero__card-title a:focus-visible {
    outline: none;
}

.hero__card .hero__card-excerpt {
    display: -webkit-box;
    overflow: hidden;
    color: color-mix(in srgb, var(--white) 85%, transparent);
    font-size: 16px;
    line-height: 1.55;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.hero__card .hero__card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    color: color-mix(in srgb, var(--white) 70%, transparent);
    font-size: 13px;
}

.hero__card-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    color: var(--tertiary-200);
    font-size: 15px;
    font-weight: 500;
}

.hero__card-more svg {
    transition: transform .25s ease;
}

.hero__card:hover .hero__card-more svg {
    transform: translateX(4px);
}

.hero__empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
    padding: var(--step-8);
    border: 1px dashed color-mix(in srgb, currentColor 35%, transparent);
    border-radius: 14px;
    font-size: 17px;
    line-height: 1.6;
}

.hero__empty p {
    margin: 0;
}

.hero__empty .hero__empty-title {
    font-size: 22px;
    font-weight: 500;
}

.hero__empty .btn {
    margin-top: 8px;
}

@media (max-width: 1024px) {
    .hero--blog .hero__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--step-8);
    }
}

@media (max-width: 600px) {
    /* Phones: taller than 3:2 (which would be too short for the text over the photo) */
    .hero__card {
        aspect-ratio: auto;
        min-height: 420px;
    }

    .hero__card-body {
        padding: 24px;
    }

    .hero__card-title {
        font-size: 26px;
    }

    .hero__card .hero__card-excerpt {
        -webkit-line-clamp: 3;
    }
}

/* ---------- Entrance (script.js) ----------
   The background fades in while settling from slightly zoomed in (scaled from its left
   edge, so no gap shows); the text comes in from the left (up when centred). */

.blk--hero.rv {
    overflow: hidden;
}

.blk--hero.rv :is(.hero__bg, .hero__inner) {
    opacity: 0;
}

.blk--hero.rv .hero__bg {
    transform: scale(var(--reveal-zoom));
    transform-origin: 0% 50%;
}

.blk--hero.rv.rv-from-left .hero__inner {
    transform: translateX(calc(var(--reveal-shift) * -1));
}

.blk--hero.rv.rv-from-below .hero__inner {
    transform: translateY(var(--reveal-rise));
}

.blk--hero.rv-armed .hero__bg {
    transition: opacity calc(var(--reveal-media) * .7) ease, transform var(--reveal-media) var(--reveal-ease);
}

.blk--hero.rv-armed .hero__inner {
    transition: opacity var(--reveal-text) ease .15s, transform var(--reveal-text) var(--reveal-ease) .15s;
}

.blk--hero.rv.rv-in :is(.hero__bg, .hero__inner) {
    opacity: 1;
    transform: none;
}

/* Blog heroes: the text comes in on its own (from the left), and the featured article's
   card rises slowly after it, rather than both moving as one */
.blk--hero.hero--blog.rv .hero__inner {
    opacity: 1;
    transform: none;
}

.blk--hero.hero--blog.rv .hero__text {
    opacity: 0;
    transform: translateX(calc(var(--reveal-shift) * -1));
}

.blk--hero.hero--blog.rv.rv-from-below .hero__text {
    transform: translateY(var(--reveal-rise));
}

.blk--hero.hero--blog.rv :is(.hero__card, .hero__empty) {
    opacity: .01;   /* not 0: browsers measure page speed (LCP) from the first paint of what's visible */
    transform: translateY(calc(var(--reveal-rise) * 1.5));
}

.blk--hero.hero--blog.rv-armed .hero__text {
    transition: opacity var(--reveal-text) ease .15s, transform var(--reveal-text) var(--reveal-ease) .15s;
}

.blk--hero.hero--blog.rv-armed :is(.hero__card, .hero__empty) {
    transition: opacity 1.4s ease .45s, transform 1.8s var(--reveal-ease) .45s;
}

.blk--hero.hero--blog.rv.rv-in :is(.hero__text, .hero__card, .hero__empty) {
    opacity: 1;
    transform: none;
}

/* ---------- Down arrow (full-height heroes, desktop) ----------
   A circle at the bottom centre that comes in three seconds after the page loads, bobs
   gently (still while hovered), and scrolls past the hero (script.js). */

.hero__next {
    display: none;
}

@media (min-width: 1025px) {
    .hero__next {
        position: absolute;
        bottom: 32px;
        left: 50%;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        margin-left: -24px;
        padding: 0;
        /* An outlined white circle: just the ring and the arrow */
        border: 1px solid var(--white);
        border-radius: 50%;
        background: transparent;
        color: var(--white);
        cursor: pointer;
        transition: background .2s ease, color .2s ease;
        /* Comes in after 2s, then bobs gently (a different property, so the two don't clash) */
        animation:
            hero-next-in 1.4s var(--reveal-ease) 2s backwards,
            hero-next-bob 2.6s ease-in-out 3.4s infinite;
    }

    .hero__next:hover,
    .hero__next:focus-visible {
        animation-play-state: running, paused;
    }

    .hero__next:hover {
        background: color-mix(in srgb, var(--white) 16%, transparent);
    }

    .hero__next:focus-visible {
        outline: 2px solid var(--tertiary-200);
        outline-offset: 3px;
    }

    .hero__next svg {
        width: 20px;
        height: 20px;
    }

    /* On a light hero */
    .blk--hero:not(.is-dark) .hero__next {
        border-color: var(--neutral-800);
        color: var(--neutral-800);
    }

    .blk--hero:not(.is-dark) .hero__next:focus-visible {
        outline-color: var(--tertiary-600);
    }
}

@keyframes hero-next-in {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
}

@keyframes hero-next-bob {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 4px; }
}

@media (prefers-reduced-motion: reduce) {
    .hero__next {
        animation: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero__card:hover .hero__card-image,
    .hero__card:hover .hero__card-more svg {
        transform: none;
    }
}

/* The standard height for heroes that aren't full screen (see --hero-standard above);
   after the rules that let them shrink to their content. */
.blk--hero:not(.hero--full) {
    min-height: var(--hero-standard);
}

@media (prefers-reduced-motion: reduce) {
    .hero__card-media::after {
        display: none;
    }
}