/* ============================================================
   VERTICAL ACCORDION — style.css
   ============================================================ */

@property --flex-basis {
    syntax: '<length-percentage>';
    initial-value: 30%;
    inherits: false;
}

/* ── Tokens ─────────────────────────────────────────────── */

.va-block {
    /* --va-ease: cubic-bezier(0.22, 1, 0.36, 1); */
    --va-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
    --va-duration: 1s;
    --va-open-delay: .2s;
    --va-fade: .5s;
}

/* ── CLS prevention ─────────────────────────────────────── */


.va-block:not(.is-initialized) *,
.va-block:not(.is-initialized) *::before,
.va-block:not(.is-initialized) *::after {
    transition-duration: 0s !important;
}

/* ── Block container ────────────────────────────────────── */

.va-block {
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

/* ── Card base ──────────────────────────────────────────── */

.va-card {
    position: relative;
    overflow: hidden;
    background-color: var(--card-bg, #1A1825);
    box-sizing: border-box;
    outline: none;
}

.va-card:focus-visible {
    box-shadow: inset 0 0 0 3px rgba(0, 120, 255, 0.6);
    z-index: 5;
}

/* ── Background layers ──────────────────────────────────── */

.va-card__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.va-card__img {
    display: block;
    width: 100%;
    height: 100%;
    object-position: center center;
}

.va-card__bg--closed .va-card__img {
    object-fit: var(--closed-fit, cover);
}

.va-card__bg--open .va-card__img {
    object-fit: var(--open-fit, cover);
}

.va-card__bg--open-mobile .va-card__img {
    object-fit: var(--mobile-open-fit, cover);
}

/* Hide mobile image on desktop by default */
.va-card__bg--open-mobile {
    display: none;
}

/* ── Content base ───────────────────────────────────────── */

.va-card__content {
    position: relative;
    z-index: 2;
    box-sizing: border-box;
}

.va-card__title {
    margin: 0;
    padding: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.va-card__numbers {
    font-weight: 300;
    font-size: clamp(clamp(clamp(50px, 0.17vw + 49.37px, 50.51px), 2.48vw + 33.71px, 57.98px), 17.23vw + -110.5px, 110px);
    line-height: 90%;
}

.va-card__subtitle {
    margin-top: 12px;

    opacity: 0.85;
}

.va-card__subtitle p:first-child {
    margin-top: 0;
}

.va-card__subtitle p:last-child {
    margin-bottom: 0;
}


/* ============================================================
   DESKTOP  ≥ 768 px
   ============================================================ */

@media (min-width: 768px) {

    /* ── Flex row ────────────────────────────────────────── */

    .va-block {
        display: flex;
        flex-direction: row;
        gap: var(--va-columns-gap, 1%);
        height: var(--va-container-height, 600px);

        container-name: va-block;
        container-type: inline-size;

        box-sizing: border-box;
    }

    /* ── Card sizing ────────────────────────────────────── */

    .va-card {
        flex: 1 1 0%;
        flex-basis: var(--flex-basis, 15%);

        height: 100%;
        min-width: 0;               /* allow flex shrink below content size */
        cursor: pointer;
        transition:
            --flex-basis var(--va-duration) var(--va-ease),
            /* flex-grow   var(--va-duration) var(--va-ease),
            flex-shrink var(--va-duration) var(--va-ease),
            flex-basis  var(--va-duration) var(--va-ease), */
            margin-top  var(--va-duration) var(--va-ease),
            height      var(--va-duration) var(--va-ease);

        border-radius: 20px;
        position: relative;
    }
    
    .va-card.is-active {
        /* flex: 1 1 0%; */
        --flex-basis: 100%;

        cursor: default;

        box-shadow: 0px 24px 26px 0px #0A0B5A14;

        position: relative;
        margin-top: -10px;
        height: calc(100% + 20px);
    }

    .va-card.is-active::after{
        opacity: 0;
    }

    .va-card.is-active::before {
        content: '';
        position: absolute;
        z-index: 1;
        inset: 0px;
       
        border-radius: inherit;
        /* this is the border width */
        padding: 2px;


        background: linear-gradient(222.79deg, #FFFFFF 1.1%, rgba(255, 255, 255, 0) 75.97%);
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
      }

    /* ── Accordion header — hidden on desktop ───────────── */

    .va-card__header {
        display: none !important;
    }

    /* ── Card body fills parent ──────────────────────────── */

    .va-card__body {
        position: relative;
        width: 100%;
        height: 100%;
    }

    /* ── Background cross-fade ──────────────────────────── */

    .va-card__bg {
        transition: opacity var(--va-fade) var(--va-ease);
    }

    .va-card__bg--closed {
        opacity: 1;
    }
    .va-card.is-active .va-card__bg--closed {
        opacity: 0;
    }

    .va-card__bg--open {

        opacity: 0;
    }
    .va-card.is-active .va-card__bg--open {
        transition-delay: var(--va-open-delay);
        opacity: 1;
    }

    /* ── Closed content — title at top ───────────────────── */

    .va-card__content--closed {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        padding: 50px 24px;
        color: var(--closed-color, #ffffff);
        opacity: 1;
        overflow: hidden;
        transition: opacity var(--va-fade) var(--va-ease);

        width: var(--closed-size-cqw);
    }

    .va-card.is-active .va-card__content--closed {
        opacity: 0;
        pointer-events: none;
    }

    .va-card__content--closed .va-card__title {
        margin-top: 0;

        font-weight: 500;
        font-size: 22px;
        line-height: 90%;
        letter-spacing: -2%;
    }

    /* ── Open content — title + subtitle at bottom ──────── */

    .va-card__content--open {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 50px;
        color: var(--open-color, #ffffff);
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--va-fade) var(--va-ease) 180ms;
        display: flex;
        flex-direction: column;
        justify-content: end;
        align-items: start;
        text-align: left;

        width: var(--va-remaining-col-size);
    }

    .va-card.is-active .va-card__content--open {
        opacity: 1;
        pointer-events: auto;
    }

    .va-card__content--open .va-card__title {
        /* font-weight: 500; */
        font-size: 40px;
        line-height: 90%;
        /* letter-spacing: -2%; */

        margin-bottom: auto;
    }

    .va-card__content--open .va-card__subtitle {
        font-size: 16px;
        line-height: 150%;
    }
}


/* ============================================================
   MOBILE  ≤ 767 px
   ============================================================ */

@media (max-width: 767px) {

    /* ── Column layout ──────────────────────────────────── */

    .va-block {
        display: flex;
        flex-direction: column;
        gap: var(--va-accordion-gap, 8px);
    }

    /* ── Card ────────────────────────────────────────────── */

    .va-card {
        border-radius: 10px;
    }

    /* Remove card-level tabindex behaviour on mobile;
       interaction goes through <button>.
       JS may also strip the attribute at runtime. */
    .va-card:focus-visible {
        box-shadow: none;
    }

    /* ── Accordion header ───────────────────────────────── */

    .va-card__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        margin: 0;
        padding: 12px 25px;
        border: none;
        cursor: pointer;
        font-family: inherit;
        font-size: 16px;
        font-weight: 600;
        line-height: 1.3;
        text-align: left;
        box-sizing: border-box;
        -webkit-appearance: none;
        appearance: none;
        transition: all var(--va-fade) var(--va-ease);

        height: auto;
    }

    .va-card__header:focus-visible {
        outline: 2px solid rgba(0, 120, 255, 0.6);
        outline-offset: -2px;
    }

    /* ── Header style variants ──────────────────────────── */

    .va-card__header--dark {
        background-color: #191919;
        color: #ffffff;
    }

    .va-card__header--light {
        background-color: #ffffff;
        border-radius: 0;
        border-bottom: 1px solid #19191933
    }

    /* Header fades out but remains in flow */
    .va-card.is-active .va-card__header {
        height: 0;  
        padding: 0;
        overflow: hidden;
        pointer-events: none;
    }

    /* ── Header title ───────────────────────────────────── */

    .va-card__header-title {
        min-width: 0;
        word-wrap: break-word;
        overflow-wrap: break-word;

        font-family: "degular-variable", sans-serif;
        /* font-weight: 500; */
        font-size: 16px;
        line-height: 120%;
    }

    /* ── Accordion icon ─────────────────────────────────── */

    .va-card__header-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 24px;
        height: 24px;
        margin-left: 16px;
    }

    .va-card__icon-svg {
        display: block;
        width: 24px;
        height: 24px;
        transition: transform var(--va-duration) var(--va-ease);
    }

    /* Plus icon → rotate 45° to form × */
    [data-accordion-icon="plus"] .va-card.is-active .va-card__icon-svg {
        transform: rotate(45deg);
    }

    /* Arrow icon → rotate 180° */
    [data-accordion-icon="arrow"] .va-card.is-active .va-card__icon-svg {
        transform: rotate(180deg);
    }

    /* ── Collapsible body ───────────────────────────────── */

    .va-card__body {
        position: relative;
        max-height: 0;
        overflow: hidden;
        transition: max-height var(--va-duration) var(--va-ease);
    }

    /* Generous fallback (2000px) so card-0 is visible
       before JS sets the real --panel-height value.
       CLS-prevention rule above ensures no visible jump. */
    .va-card.is-active .va-card__body {
        max-height: var(--panel-height, 2000px);
    }

    /* ── Backgrounds (mobile) ───────────────────────────── */

    /* Closed image: never shown on mobile */
    .va-card__bg--closed {
        display: none;
    }

    /* Open image: covers the body area when expanded */
    .va-card__bg--open {
        position: absolute;
        inset: 0;
        z-index: 0;
    }

    /* ── Content (mobile) ───────────────────────────────── */

    /* Closed content: not used on mobile */
    .va-card__content--closed {
        display: none;
    }

    /* Open content: positioned over background image */
    .va-card__content--open {
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        min-height: 300px;
        padding: 24px 20px;
        color: var(--open-color, #ffffff);
        box-sizing: border-box;
    }

    .va-card__content--open .va-card__title {
        font-weight: 500;
        font-size: 24px;
        line-height: 120%;
        color: #191919;
    }

    .va-card__content--open .va-card__subtitle {
        font-weight: 400;
        font-size: 12px;
        line-height: 150%;

        color: #1A1A1A;

        margin-top: 0;
    }

    /* If a mobile image exists, hide the default desktop 'open' image and show mobile version */
    .va-card:has(.va-card__bg--open-mobile) .va-card__bg--open {
        display: none;
    }

    .va-card.is-active .va-card__bg--open-mobile {
        display: block;
        position: absolute;
        inset: 0;
        z-index: 0;
    }
}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    .va-block.is-initialized *,
    .va-block.is-initialized *::before,
    .va-block.is-initialized *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}