/*
 * Front page hero slider, a faithful rebuild of the former Slider Revolution module "frontpage".
 * Layout grid 1000 x 420 px, centred, full-width background. Below 1000 px everything scales down with the
 * slider width (one unit --u = 1/1000 of it), as before. Below 768 px the text box moves under the image so it
 * stays readable on phones.
 */
.pb-hero {
    container-type: inline-size;
    position: relative;
    width: 100%;
}

/* Browsers without container query units (e.g. iOS before 16) scale with the viewport instead. */
@supports not (width: 1cqw) {
    .pb-hero__inner {
        --u: min(1px, 0.1vw) !important;
        --pb-hero-grid-left: max(0px, calc((100vw - 1000px) / 2)) !important;
    }
}

.pb-hero__inner {
    --u: min(1px, 0.1cqw);
    --pb-hero-height: calc(420 * var(--u));
    --pb-hero-grid-left: max(0px, calc((100cqw - 1000px) / 2));
    position: relative;
    overflow: hidden;
    background: #fff;
}

.pb-hero__slides {
    position: relative;
    height: var(--pb-hero-height);
}

.pb-hero__slide {
    position: absolute;
    inset: 0;
    visibility: hidden;
}

.pb-hero__slide.is-active,
.pb-hero__slide.is-leaving {
    visibility: visible;
}

.pb-hero__slide.is-active {
    z-index: 2;
}

.pb-hero__slide.is-leaving {
    z-index: 1;
}

.pb-hero__media {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.pb-hero__bg {
    position: absolute;
    inset: 0;
    background-color: #e7e7e7;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Stop watch on the Express-Net slide: 370 x 455 at x 1, y 137 of the grid, cut off by the slider's bottom edge. */
.pb-hero__deco {
    position: absolute;
    left: calc(var(--pb-hero-grid-left) + 1 * var(--u));
    top: calc(137 * var(--u));
    width: calc(370 * var(--u));
    max-width: none;
    height: auto;
}

.pb-hero__box {
    position: absolute;
    top: calc(65 * var(--u));
    right: var(--pb-hero-grid-left);
    width: calc(400 * var(--u));
    height: calc(180 * var(--u));
    background: rgba(0, 161, 166, 0.85);
    color: #fff;
    font-family: "PT Sans", sans-serif;
}

.pb-hero__title,
.pb-hero__text,
.pb-hero__link {
    position: absolute;
    box-sizing: border-box;
    padding: calc(20 * var(--u));
    color: #fff;
}

.pb-hero__title {
    top: 0;
    right: 0;
    font-size: calc(22 * var(--u));
    line-height: calc(24 * var(--u));
    font-weight: 700;
    font-style: italic;
    white-space: nowrap;
}

.pb-hero__text {
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
    font-size: calc(16 * var(--u));
    line-height: calc(24 * var(--u));
    font-weight: 300;
    text-align: justify;
}

.pb-hero__link,
.pb-hero__link:hover,
.pb-hero__link:focus {
    right: 0;
    bottom: 0;
    font-size: calc(18 * var(--u));
    line-height: calc(20 * var(--u));
    font-weight: 700;
    font-style: italic;
    text-transform: uppercase;
    white-space: nowrap;
    text-decoration: none;
    color: #fff;
}

/* Timeline per slide: background cross-fades in 600 ms, the box is there at once, the texts fade in at 500 ms,
   the stop watch rises 50 px from 800 ms. A leaving slide fades its layers out in 300 ms. */
.pb-hero.is-ready .pb-hero__bg,
.pb-hero.is-ready .pb-hero__box,
.pb-hero.is-ready .pb-hero__title,
.pb-hero.is-ready .pb-hero__text,
.pb-hero.is-ready .pb-hero__link,
.pb-hero.is-ready .pb-hero__deco {
    opacity: 0;
}

.pb-hero.is-ready .pb-hero__deco {
    transform: translateY(calc(50 * var(--u)));
}

.pb-hero.is-ready .is-active.is-shown .pb-hero__bg {
    opacity: 1;
    transition: opacity 600ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.pb-hero.is-ready .is-active.is-shown .pb-hero__box {
    opacity: 1;
}

.pb-hero.is-ready .is-active.is-shown .pb-hero__title,
.pb-hero.is-ready .is-active.is-shown .pb-hero__text,
.pb-hero.is-ready .is-active.is-shown .pb-hero__link {
    opacity: 1;
    transition: opacity 300ms cubic-bezier(0.645, 0.045, 0.355, 1) 500ms;
}

.pb-hero.is-ready .is-active.is-shown .pb-hero__deco {
    opacity: 1;
    transform: none;
    transition: opacity 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 800ms,
                transform 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 800ms;
}

.pb-hero.is-ready .is-leaving .pb-hero__bg {
    opacity: 1;
}

.pb-hero.is-ready .is-leaving .pb-hero__box,
.pb-hero.is-ready .is-leaving .pb-hero__title,
.pb-hero.is-ready .is-leaving .pb-hero__text,
.pb-hero.is-ready .is-leaving .pb-hero__link,
.pb-hero.is-ready .is-leaving .pb-hero__deco {
    transition: opacity 300ms linear;
}

/* First reveal after page load, as the old module did it: shorter background fade, navigation fades in. */
.pb-hero.is-intro .is-active.is-shown .pb-hero__bg {
    transition-duration: 350ms;
}

.pb-hero.is-intro .pb-hero__arrow,
.pb-hero.is-intro .pb-hero__bullets {
    animation: pb-hero-fade-in 300ms ease-out both;
}

@keyframes pb-hero-fade-in {
    from {
        opacity: 0;
    }
}

/* Navigation: 40 px arrows 20 px from the edges, 12 px square bullets 20 px above the bottom, 5 px progress bar. */
.pb-hero__arrow {
    all: unset;
    position: absolute;
    z-index: 5;
    top: calc(var(--pb-hero-height) / 2 - 20px);
    display: block;
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    cursor: pointer;
}

.pb-hero__arrow[hidden],
.pb-hero__bullets[hidden] {
    display: none;
}

/* Foundation styles button:focus (teal); the slider keeps its own colours in every state. */
.pb-hero .pb-hero__arrow,
.pb-hero .pb-hero__arrow:focus {
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
}

.pb-hero .pb-hero__arrow:hover {
    background: #000;
}

.pb-hero__arrow svg {
    display: block;
    width: 15px;
    height: 15px;
    margin: 12.5px auto;
}

.pb-hero__arrow--prev {
    left: 20px;
}

.pb-hero__arrow--next {
    right: 20px;
}

/* Four bullets are 71 px wide; whole-pixel position keeps their 1 px borders sharp, as before. */
.pb-hero__bullets {
    position: absolute;
    z-index: 5;
    top: calc(var(--pb-hero-height) - 34px);
    left: calc(50% - 35px);
    left: round(nearest, 50% - 35.5px, 1px);
    display: flex;
    gap: 5px;
}

.pb-hero__bullet {
    all: unset;
    display: block;
    box-sizing: content-box;
    width: 12px;
    height: 12px;
    border: 1px solid #e5e5e5;
    background: #aaa;
    cursor: pointer;
}

.pb-hero .pb-hero__bullet:focus {
    background: #aaa;
}

.pb-hero .pb-hero__bullet:hover,
.pb-hero .pb-hero__bullet.is-active {
    background: #000;
}

.pb-hero__arrow:focus-visible,
.pb-hero__bullet:focus-visible,
.pb-hero__link:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.pb-hero__progress {
    position: absolute;
    z-index: 4;
    top: calc(var(--pb-hero-height) - 5px);
    left: 0;
    width: 100%;
    height: 5px;
    pointer-events: none;
}

.pb-hero__progress-bar {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.15);
    transform: scaleX(0);
    transform-origin: 0 50%;
}

/* Phones: the image keeps its proportions, the text box follows below it in normal type sizes. */
@media (max-width: 767px) {
    .pb-hero__slides {
        display: grid;
        height: auto;
    }

    .pb-hero__slide {
        position: relative;
        inset: auto;
        grid-area: 1 / 1;
        display: flex;
        flex-direction: column;
    }

    .pb-hero__media {
        position: relative;
        inset: auto;
        height: var(--pb-hero-height);
    }

    .pb-hero__box {
        position: static;
        flex: 1 1 auto;
        width: auto;
        height: auto;
        box-sizing: border-box;
        padding: 20px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .pb-hero__title,
    .pb-hero__text,
    .pb-hero__link,
    .pb-hero__link:hover,
    .pb-hero__link:focus {
        position: static;
        padding: 0;
        transform: none;
        width: auto;
    }

    .pb-hero__title {
        align-self: flex-end;
        font-size: 22px;
        line-height: 24px;
        white-space: normal;
        text-align: right;
    }

    .pb-hero__text {
        font-size: 16px;
        line-height: 24px;
    }

    .pb-hero__link,
    .pb-hero__link:hover,
    .pb-hero__link:focus {
        align-self: flex-end;
        margin-top: auto;
        font-size: 18px;
        line-height: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pb-hero.is-ready .pb-hero__slide * {
        transition-duration: 0s !important;
        transition-delay: 0s !important;
    }
}