/*
 * Vertical tabs (view.php, script.js).
 *
 * Desktop: the tab list and the image column side by side (up to 600px each). Each tab
 * has a rail on its left: a grey track, filled on the open tab; with the script a single
 * bar (.vertical-tabs__worm) stands in for the fill and travels between tabs. Tablets and
 * phones: one column; only the open tab's text shows, and its image sits under it (or
 * the image column moves above / below the list).
 */

.blk--vertical-tabs {
    --vt-gap: 80px;
    --vt-rail: 2px;
    --vt-rail-inset: 6px;               /* half the gap between two tabs' rails */
    --vt-track: color-mix(in srgb, var(--neutral-500) 35%, transparent);
    --vt-fill: var(--theme-600);        /* the colour theme (lighter on dark backgrounds, below) */
    --vt-radius: 0px;
    --vt-dim: .651;
}

.blk--vertical-tabs.vertical-tabs--rounded {
    --vt-radius: var(--radius);
}

.vertical-tabs__heading {
    margin-bottom: var(--step-10);
}

/* ---------- Columns ---------- */

.vertical-tabs__row {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: var(--vt-gap);
}

.vertical-tabs__list,
.vertical-tabs__media {
    width: 50%;
    max-width: 600px;
}

.vertical-tabs__list {
    position: relative;
}

.vertical-tabs--media-left .vertical-tabs__media {
    order: -1;
}

/* ---------- A tab ---------- */

.vertical-tabs__item {
    position: relative;
    width: 100%;
    padding: 28px 16px 28px 40px;
    cursor: pointer;
}

.vertical-tabs__item::before,
.vertical-tabs__item::after {
    content: '';
    position: absolute;
    top: var(--vt-rail-inset);
    bottom: var(--vt-rail-inset);
    left: 0;
    width: var(--vt-rail);
    border-radius: var(--vt-rail);
}

.vertical-tabs__item::before {
    background: var(--vt-track);
}

.vertical-tabs__item::after {
    background: var(--vt-fill);
    transform: scaleY(0);
    transform-origin: top;
}

.vertical-tabs__item.is-active::after {
    transform: scaleY(1);
}

.vertical-tabs__title {
    margin-bottom: var(--step-4);
}

.vertical-tabs__trigger {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    letter-spacing: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.vertical-tabs__trigger:focus-visible {
    outline: 2px solid var(--tertiary-600);
    outline-offset: 4px;
    border-radius: 2px;
}

.vertical-tabs__title,
.vertical-tabs__body p {
    opacity: var(--vt-dim);
    transition: opacity .3s ease;
}

.vertical-tabs__item:hover :is(.vertical-tabs__title, .vertical-tabs__body p),
.vertical-tabs__item.is-active :is(.vertical-tabs__title, .vertical-tabs__body p) {
    opacity: 1;
}

.vertical-tabs__body {
    color: var(--text);
}

.vertical-tabs__body p {
    margin: 0;
}

.vertical-tabs__body ul,
.vertical-tabs__body ol {
    padding-inline-start: var(--step-6);
    font-size: 17px;
    font-weight: 300;
    letter-spacing: -.03em;
}

.vertical-tabs--titles .vertical-tabs__body li {
    font-weight: 200;
}

.vertical-tabs--titles .vertical-tabs__body li:not(:last-child) {
    margin-bottom: var(--step-4);
}

.vertical-tabs__button {
    margin-top: var(--step-6);
}

.vertical-tabs__button[hidden] {
    display: none;
}

.vertical-tabs__btn-arrow {
    flex-shrink: 0;
}

/* ---------- The travelling indicator (script.js) and autoplay ---------- */

.vertical-tabs__worm {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--vt-rail);
    border-radius: var(--vt-rail);
    background: var(--vt-fill);
    pointer-events: none;
    will-change: transform, height;
}

.vertical-tabs--worm:not(.is-autoplaying) .vertical-tabs__item::after,
.blk--vertical-tabs.is-autoplaying .vertical-tabs__worm {
    display: none;
}

/* Autoplay: the open tab's rail fills up as its timer */
.blk--vertical-tabs.is-autoplaying .vertical-tabs__item.is-active::after {
    animation: vertical-tabs-timer var(--vt-autoplay, 6s) linear forwards;
}

.blk--vertical-tabs.is-autoplaying.is-paused .vertical-tabs__item.is-active::after {
    animation-play-state: paused;
}

@keyframes vertical-tabs-timer {
    from { transform: scaleY(0); }
    to { transform: scaleY(1); }
}

/* Indicator moves by fading: each tab's own fill fades out, the new one fades in */
.vertical-tabs--indicator-fade .vertical-tabs__item::after {
    opacity: 0;
    transition: opacity .2s ease-in;
}

.vertical-tabs--indicator-fade:not(.is-autoplaying) .vertical-tabs__item::after {
    transform: scaleY(1);
}

.vertical-tabs--indicator-fade .vertical-tabs__item.is-active::after {
    opacity: 1;
    transition: opacity .3s ease-out .15s;
}

/* ---------- Images ----------
   Stacked in the column: the open tab's in the flow, the rest behind it, invisible. A new
   image fades in over the old one, which only hides once it's covered. */

.vertical-tabs__media {
    position: relative;
    display: flex;
    align-items: center;
}

.vertical-tabs__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--img-pos, 50% 50%); /* the tab's Image position */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0s linear .45s, visibility 0s linear .45s;
}

.vertical-tabs__image.is-active {
    position: relative;
    z-index: 1;
    opacity: 1;
    visibility: visible;
    transition: opacity .45s ease, visibility 0s;
}

.vertical-tabs__inline-media {
    display: none;
}

.vertical-tabs__inline-media img {
    display: block;
    width: 100%;
    max-width: 520px;
}

/* Masked zoom (the entrance and tab changes): --mz drives the scale and the clip together */
.vertical-tabs__image,
.vertical-tabs__inline-media img {
    border-radius: var(--vt-radius);
    scale: var(--mz);
    clip-path: inset(calc((1 - 1 / var(--mz)) * 50%) round calc(var(--vt-radius) / var(--mz)));
}

/* ---------- Buttons below ---------- */

.vertical-tabs__after {
    margin-top: var(--step-10);
}

.vertical-tabs--center .vertical-tabs__after {
    justify-content: center;
}

/* ---------- Screen sizes ---------- */

@media (min-width: 1025px) {
    /* Titles only: closed tabs show just their title */
    .vertical-tabs--titles .vertical-tabs__item:not(.is-active, .is-closing) .vertical-tabs__content {
        display: none;
    }
}

@media (max-width: 1024px) {
    .blk--vertical-tabs {
        --vt-gap: var(--step-8);
    }

    /* Stacked: one centred column, like Split */
    .vertical-tabs__row {
        flex-direction: column;
        max-width: 520px;
        margin-inline: auto;
    }

    .vertical-tabs__list,
    .vertical-tabs__media {
        width: 100%;
        max-width: none;
    }

    .vertical-tabs__media {
        display: none;
    }

    .vertical-tabs__item {
        padding: 16px 0 16px 40px;
    }

    .vertical-tabs__item.is-active {
        padding-block: 12px;
    }

    .vertical-tabs__title {
        margin-bottom: 0;
    }

    .vertical-tabs__item:is(.is-active, .is-closing) .vertical-tabs__title {
        margin-bottom: var(--step-4);
    }

    .vertical-tabs__item .vertical-tabs__content {
        display: none;
    }

    .vertical-tabs__item:is(.is-active, .is-closing) .vertical-tabs__content {
        display: block;
    }

    .vertical-tabs__body p {
        font-size: 16px;
        line-height: 24px;
    }

    .vertical-tabs__inline-media {
        display: block;
        padding: 20px 0 16px 40px;
    }

    .vertical-tabs__inline-media[hidden] {
        display: none;
    }

    /* The image column above or below the list instead */
    :is(.vertical-tabs--mobile-above, .vertical-tabs--mobile-below) .vertical-tabs__media {
        display: block;
    }

    :is(.vertical-tabs--mobile-above, .vertical-tabs--mobile-below) .vertical-tabs__image {
        height: auto;
    }

    .vertical-tabs--mobile-above .vertical-tabs__media {
        order: -1;
    }

    .vertical-tabs--mobile-below .vertical-tabs__media {
        order: 1;
    }
}

@media (max-width: 767px) {
    .blk--vertical-tabs {
        --vt-gap: var(--step-7);
    }
}

@media (max-width: 600px) {
    .vertical-tabs__heading {
        margin-bottom: var(--step-8);
    }

    .vertical-tabs__after {
        margin-top: var(--step-8);
    }

    .vertical-tabs__after .btn {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .blk--vertical-tabs.is-autoplaying .vertical-tabs__item.is-active::after {
        animation: none;
    }

    .vertical-tabs__image,
    .vertical-tabs--indicator-fade .vertical-tabs__item::after {
        transition: none;
    }
}

/* ---------- Entrance (script.js) ----------
   One entrance, started by the heading: the heading comes in (up when centred, otherwise
   from the left), and with it the tabs, one after another from the list's side, the
   indicator fading in with the first; the image fades in, settling from slightly zoomed
   in; then any buttons below rise in. */

.blk--vertical-tabs {
    --vt-lag: .3s;          /* the tabs and image after the heading starts */
    --vt-stagger: calc(var(--reveal-stagger) * .7);
}

.blk--vertical-tabs.rv .vertical-tabs__heading,
.blk--vertical-tabs.rv .vertical-tabs__list > :not(.vertical-tabs__worm),
.blk--vertical-tabs.rv .vertical-tabs__worm,
.blk--vertical-tabs.rv .vertical-tabs__media,
.blk--vertical-tabs.rv .vertical-tabs__after {
    opacity: 0;
}

.blk--vertical-tabs.rv.rv-from-below .vertical-tabs__heading {
    transform: translateY(var(--reveal-rise));
}

.blk--vertical-tabs.rv.rv-from-left .vertical-tabs__heading,
.blk--vertical-tabs.rv.vertical-tabs--from-left .vertical-tabs__list > :not(.vertical-tabs__worm) {
    transform: translateX(calc(var(--reveal-shift) * -1));
}

.blk--vertical-tabs.rv.vertical-tabs--from-right .vertical-tabs__list > :not(.vertical-tabs__worm) {
    transform: translateX(var(--reveal-shift));
}

.blk--vertical-tabs.rv .vertical-tabs__after {
    transform: translateY(calc(var(--reveal-rise) * .6));
}

.blk--vertical-tabs.rv :is(.vertical-tabs__image, .vertical-tabs__inline-media img) {
    --mz: var(--reveal-zoom);
}

.blk--vertical-tabs.rv-armed .vertical-tabs__heading {
    transition: opacity var(--reveal-text) ease, transform var(--reveal-text) var(--reveal-ease);
}

.blk--vertical-tabs.rv-armed .vertical-tabs__list > :not(.vertical-tabs__worm) {
    --vt-delay: calc(var(--vt-lag) + var(--rv-i, 0) * var(--vt-stagger));
    transition:
        opacity var(--reveal-text) ease var(--vt-delay),
        transform calc(var(--reveal-text) + .1s) var(--reveal-ease) var(--vt-delay);
}

.blk--vertical-tabs.rv-armed .vertical-tabs__worm {
    transition: opacity .6s ease calc(var(--vt-lag) + .2s);
}

.blk--vertical-tabs.rv-armed .vertical-tabs__media {
    transition: opacity calc(var(--reveal-media) * .7) ease var(--vt-lag);
}

.blk--vertical-tabs.rv-armed .vertical-tabs__image {
    transition: opacity 0s linear .45s, visibility 0s linear .45s, --mz var(--reveal-media) var(--reveal-ease) var(--vt-lag);
}

.blk--vertical-tabs.rv-armed .vertical-tabs__image.is-active {
    transition: opacity .45s ease, visibility 0s, --mz var(--reveal-media) var(--reveal-ease) var(--vt-lag);
}

.blk--vertical-tabs.rv-armed .vertical-tabs__inline-media img {
    transition: --mz var(--reveal-media) var(--reveal-ease) calc(var(--vt-lag) + var(--vt-stagger));
}

.blk--vertical-tabs.rv-armed .vertical-tabs__after {
    transition:
        opacity var(--reveal-text) ease calc(var(--vt-lag) + var(--vt-count, 3) * var(--vt-stagger) + .2s),
        transform var(--reveal-text) var(--reveal-ease) calc(var(--vt-lag) + var(--vt-count, 3) * var(--vt-stagger) + .2s);
}

/* Revealed (after the start state, and as specific, so these win) */
.blk--vertical-tabs.rv.rv-in .vertical-tabs__heading,
.blk--vertical-tabs.rv.rv-in .vertical-tabs__list > :not(.vertical-tabs__worm),
.blk--vertical-tabs.rv.rv-in .vertical-tabs__worm,
.blk--vertical-tabs.rv.rv-in .vertical-tabs__media,
.blk--vertical-tabs.rv.rv-in .vertical-tabs__after {
    opacity: 1;
    transform: none;
}

.blk--vertical-tabs.rv.rv-in :is(.vertical-tabs__image, .vertical-tabs__inline-media img) {
    --mz: 1;
}

/* On dark backgrounds the indicator takes a lighter shade of the colour theme */
.is-dark .blk--vertical-tabs,
.blk--vertical-tabs.is-dark {
    --vt-fill: var(--theme-400);
}