/*
 * Expanding panels: photo panels side by side; the open one grows (flex-grow) and shows its
 * details over a dark wash, the closed ones show a marker and their label sideways.
 * Up to 900px wide: rows that open downwards (script.js animates their height).
 */

.blk--expanding-panels {
    --panels-height: min(78vh, 760px);
    --panels-min-height: 560px;
    --panels-gap: 8px;
    --panels-radius: 18px;
    --panels-grow: 7;
    --panels-row: 76px;
    --panels-gold: var(--tertiary-200);
    --panels-ease: cubic-bezier(.2, .7, .2, 1);
}

.blk--expanding-panels.expanding-panels--compact {
    --panels-height: min(64vh, 620px);
    --panels-min-height: 480px;
}

.blk--expanding-panels.expanding-panels--tall {
    --panels-height: min(88vh, 880px);
    --panels-min-height: 620px;
}

.expanding-panels__heading {
    margin-bottom: var(--step-9);
}

.expanding-panels__buttons {
    margin-top: var(--step-9);
}

/* ---------- The row ---------- */

.expanding-panels__row {
    display: flex;
    gap: var(--panels-gap);
    height: var(--panels-height);
    min-height: var(--panels-min-height);
}

.expanding-panels__panel {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    border-radius: var(--panels-radius);
    background: var(--neutral-900);
    color: var(--white);
    transition: flex-grow .7s var(--panels-ease);
}

.expanding-panels__panel.is-open {
    flex-grow: var(--panels-grow);
}

.expanding-panels__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--panel-open, 50% 50%);
    transform: scale(1.05);
    transition: filter .7s ease, transform 1.2s var(--panels-ease), object-position .7s var(--panels-ease);
}

.expanding-panels__panel:not(.is-open) .expanding-panels__photo {
    object-position: var(--panel-closed, 80% 50%);
}

.expanding-panels__panel.is-open .expanding-panels__photo {
    transform: none;
}

.expanding-panels--muted .expanding-panels__panel:not(.is-open) .expanding-panels__photo {
    filter: grayscale(.6) brightness(.45);
}

.expanding-panels--dim .expanding-panels__panel:not(.is-open) .expanding-panels__photo {
    filter: brightness(.5);
}

/* Opens on click: a closed panel lights up under the pointer, so it reads as clickable */
@media (hover: hover) {
    .blk--expanding-panels[data-opens-on="click"] .expanding-panels__panel:not(.is-open):hover .expanding-panels__photo {
        transition: filter .35s ease, transform 1.2s var(--panels-ease), object-position .7s var(--panels-ease);
    }

    .expanding-panels--muted[data-opens-on="click"] .expanding-panels__panel:not(.is-open):hover .expanding-panels__photo {
        filter: grayscale(.3) brightness(.7);
    }

    .expanding-panels--dim[data-opens-on="click"] .expanding-panels__panel:not(.is-open):hover .expanding-panels__photo {
        filter: brightness(.75);
    }
}

@media (hover: hover) and (min-width: 901px) {
    .blk--expanding-panels[data-opens-on="click"] .expanding-panels__panel:not(.is-open):hover .expanding-panels__photo {
        transform: scale(1.08);
    }
}

/* Darker towards the bottom, where the text sits */
.expanding-panels__panel::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, .92) 0%, rgba(0, 0, 0, .6) 45%, rgba(0, 0, 0, .1) 78%);
    pointer-events: none;
}

/* The open panel: a dark wash from the left behind its text */
.expanding-panels__panel::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, .45) 35%, rgba(0, 0, 0, .12) 65%, rgba(0, 0, 0, 0) 85%);
    opacity: 0;
    pointer-events: none;
    transition: opacity .5s ease;
}

.expanding-panels__panel.is-open::before {
    opacity: 1;
    transition-delay: .2s;
}

/* ---------- The opener: the whole closed panel ---------- */

.expanding-panels__opener {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 22px 0;
    border: 0;
    background: none;
    color: var(--white);
    font: inherit;
    cursor: pointer;
}

.expanding-panels__panel.is-open .expanding-panels__opener {
    inset: 0 auto auto 0;
    padding: 22px 26px;
    pointer-events: none;
}

.expanding-panels__opener:focus-visible {
    outline: 2px solid var(--panels-gold);
    outline-offset: -6px;
    border-radius: var(--panels-radius);
}

.expanding-panels__number {
    font-size: 22px;
    font-weight: 200;
    line-height: 1;
}

.expanding-panels__icon {
    display: block;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    background-color: var(--white);
    -webkit-mask: var(--panel-icon) center / contain no-repeat;
    mask: var(--panel-icon) center / contain no-repeat;
}

.expanding-panels__label {
    margin-top: auto;
    font-size: 15px;
    letter-spacing: .08em;
    line-height: 1.56;
    text-transform: uppercase;
    white-space: nowrap;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

/* (the open panel's label stays for screen readers: it names the button) */
.expanding-panels__panel.is-open .expanding-panels__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ---------- The open panel's details ---------- */

.expanding-panels__body {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;
    width: 100%;
    min-width: 440px;
    max-width: 640px;
    max-height: 100%;
    padding: 70px 32px 30px;
    overflow-y: auto;
    opacity: 0;
    transform: translateY(20px);
    visibility: hidden;
    scrollbar-width: thin;
    transition: opacity .4s ease, transform .4s ease, visibility 0s linear .4s;
}

.expanding-panels__panel.is-open .expanding-panels__body {
    opacity: 1;
    transform: none;
    visibility: visible;
    transition-delay: .3s, .3s, 0s;
}

.expanding-panels__body :is(p, li) {
    margin: 0;
}

.expanding-panels__kicker {
    margin-bottom: var(--step-4) !important;
    color: var(--panels-gold);
    font-size: 13px;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.expanding-panels__of {
    opacity: .6;
}

.expanding-panels__title {
    margin: 0;
    color: var(--white);
    font-size: clamp(28px, 2.8vw, 44px);
    line-height: 1.08;
}

.expanding-panels__text {
    margin-top: 14px;
    color: rgba(255, 255, 255, .78);
    font-size: 16px;
    line-height: 1.6;
}

.expanding-panels__text > * + * {
    margin-top: .8em !important;
}

/* The title and text run to two thirds of the details on desktop, half on tablets and phones */
.expanding-panels__title,
.expanding-panels__text {
    max-width: 66.666%;
}

@media (max-width: 1024px) {
    .expanding-panels__title,
    .expanding-panels__text {
        max-width: 50%;
    }
}

.expanding-panels__small-heading {
    color: var(--white);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .08em;
    line-height: 1.56;
    text-transform: uppercase;
}

.expanding-panels__body > .expanding-panels__small-heading {
    margin-top: 18px;
}

.expanding-panels__list {
    display: grid;
    gap: 6px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}

.expanding-panels__list li {
    position: relative;
    padding-left: 24px;
    color: rgba(255, 255, 255, .78);
    font-size: 15px;
    line-height: 1.5;
}

.expanding-panels__list li::before {
    content: '';
    position: absolute;
    top: .65em;
    left: 2px;
    width: 10px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(135deg, var(--gradient-logo));
}

.expanding-panels__note {
    margin-top: 18px;
    padding-left: 14px;
    border-left: 2px solid var(--panels-gold);
}

.expanding-panels__note p {
    color: rgba(255, 255, 255, .78);
    font-size: 14px;
    line-height: 1.55;
}

.expanding-panels__note .expanding-panels__small-heading {
    margin-bottom: 4px;
    color: var(--white);
    font-size: 13px;
    line-height: 1.56;
}

.expanding-panels__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 18px;
    color: var(--white);
    font-size: 15px;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.expanding-panels__link:hover {
    color: var(--panels-gold);
}

/* ---------- Tablets and phones: rows that open downwards ---------- */

@media (max-width: 900px) {
    .expanding-panels__row {
        flex-direction: column;
        height: auto;
        min-height: 0;
    }

    .expanding-panels__panel {
        flex: none;
        height: var(--panels-row);
        transition: height .6s var(--panels-ease);
    }

    .expanding-panels__panel.is-open {
        height: auto;
        min-height: 520px;
    }

    /* The photo simply shows its open position (no glide, zoom or fade) */
    .expanding-panels__photo {
        object-position: var(--panel-open-narrow, 50% 50%);
        transform: none;
        transition: none;
    }

    .expanding-panels__panel:not(.is-open) .expanding-panels__photo {
        object-position: var(--panel-closed-narrow, 80% 50%);
    }

    .expanding-panels__opener {
        flex-direction: row;
        justify-content: flex-start;
        gap: 16px;
        padding: 0 20px;
    }

    .expanding-panels__label {
        margin-top: 0;
        white-space: normal;
        writing-mode: horizontal-tb;
        transform: none;
    }

    .expanding-panels__panel.is-open .expanding-panels__opener {
        padding: 20px;
    }

    /* The open row's details are in the flow, so the row grows to fit them */
    .expanding-panels__panel.is-open .expanding-panels__body {
        position: relative;
        min-width: 0;
        max-width: none;
        max-height: none;
        padding: 140px 20px 24px; /* a band of the photo above the details */
        overflow: visible;
    }
}

@media (prefers-reduced-motion: reduce) {
    .blk--expanding-panels :is(.expanding-panels__panel, .expanding-panels__photo, .expanding-panels__body) {
        transition: none;
    }
}

/* ---------- Entrance (script.js) ----------
   The heading (from the left, or up when centred), then the panels one after another (up
   on desktop, from the left as rows), then the buttons. */

.blk--expanding-panels {
    --panels-enter: calc(var(--reveal-text) + .3s);
}

.blk--expanding-panels.rv :is(.expanding-panels__heading, .expanding-panels__panel, .expanding-panels__buttons) {
    opacity: 0;
}

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

.blk--expanding-panels.rv.rv-from-below .expanding-panels__heading {
    transform: translateY(var(--reveal-rise));
}

.blk--expanding-panels.rv .expanding-panels__panel {
    transform: translateY(calc(var(--reveal-rise) * 1.5));
}

.blk--expanding-panels.rv.is-rows .expanding-panels__panel {
    transform: translateX(calc(var(--reveal-shift) * -1));
}

.blk--expanding-panels.rv .expanding-panels__buttons {
    transform: translateY(calc(var(--reveal-rise) * .6));
}

.blk--expanding-panels.rv-armed .expanding-panels__heading {
    transition: opacity var(--reveal-text) ease, transform var(--reveal-text) var(--panels-ease);
}

/* (keeping the panels' own open / close transitions) */
.blk--expanding-panels.rv-armed .expanding-panels__panel {
    transition:
        flex-grow .7s var(--panels-ease),
        height .6s var(--panels-ease),
        opacity var(--panels-enter) ease calc(var(--rv-start, 0s) + var(--panel-i, 0) * var(--reveal-stagger)),
        transform calc(var(--panels-enter) + .15s) var(--panels-ease) calc(var(--rv-start, 0s) + var(--panel-i, 0) * var(--reveal-stagger));
}

.blk--expanding-panels.rv-armed .expanding-panels__buttons {
    transition: opacity var(--reveal-text) ease, transform var(--reveal-text) var(--panels-ease);
    transition-delay: calc(var(--rv-start, 0s) + var(--panel-count, 6) * var(--reveal-stagger) + .2s);
}

.blk--expanding-panels.rv.rv-heading-in .expanding-panels__heading,
.blk--expanding-panels.rv.rv-panels-in :is(.expanding-panels__panel, .expanding-panels__buttons) {
    opacity: 1;
    transform: none;
}