/*
 * Vertical Cards block.
 *
 * Vertical list of sticky cards: each card has an image on top, title below
 * and an optional description. The whole card is a single link (when the
 * editor fills the link field). Sticky positioning makes the cards stack on
 * top of each other as the user scrolls — the last one wins the viewport.
 *
 * The --vcards-sticky-top offset is injected inline per-item from the
 * template, so this file only declares the position and the visual style.
 */

.vcards-track {
    display: flex;
    flex-direction: column;
}

.vcards-item {
    position: sticky;
}

.vcards-item + .vcards-item {
    margin-top: var(--vcards-gap, 0);
}

.vcards-card {
    color: inherit;
    display: block;
    position: relative;
    text-decoration: none;
}

.vcards-image-wrap {
    border-radius: 24px;
    overflow: hidden;
    transform-origin: center top;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    width: 100%;
}

.vcards-image {
    aspect-ratio: 16 / 10;
    display: block;
    height: auto;
    object-fit: cover;
    width: 100%;
}

.vcards-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 24px 0 0;
}

.vcards-number {
    color: var(--color-blue-80);
    font-family: var(--font-primary);
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 28px;
    margin: 0;
    transition: opacity 0.4s ease;
}

.vcards-title {
    color: var(--color-blue-80);
    font-family: var(--font-primary);
    font-size: 32px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 32px;
    margin: 0;
    transition: opacity 0.4s ease;
}

.vcards-description {
    color: var(--color-blue-80);
    font-family: var(--font-primary);
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 28px;
    margin: 0;
    transition: opacity 0.4s ease;
}

/*
 * Inside variant: image fills the card, overlay holds number/title (top-left)
 * and description (bottom-right). Each text block is capped at 65% width.
 */
.vcards-card--inside .vcards-image-wrap {
    aspect-ratio: 16 / 10;
}

.vcards-card--inside .vcards-image {
    aspect-ratio: auto;
    height: 100%;
}

.vcards-overlay {
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    left: 0;
    padding: 32px;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
}

.vcards-list .vcards-card--inside .vcards-overlay .vcards-number {
    color: var(--color-primary);
}

.vcards-list .vcards-card--inside .vcards-overlay .vcards-title,
.vcards-list .vcards-card--inside .vcards-overlay .vcards-description {
    color: var(--color-text);
}

.vcards-overlay-top,
.vcards-overlay-bottom {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 65%;
}

.vcards-overlay-bottom {
    align-self: flex-start;
}

/*
 * Time Machine scroll effect.
 * As a card becomes sticky-pinned and the next card slides over it, JS
 * marks it with .is-behind — we shrink its image and fade its text, so it
 * visually recedes into depth. The topmost visible card stays at full size.
 */
.vcards-item.is-behind .vcards-image-wrap {
    transform: scale(0.92);
}

.vcards-item.is-behind .vcards-number,
.vcards-item.is-behind .vcards-title,
.vcards-item.is-behind .vcards-description {
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    .vcards-item.is-behind .vcards-image-wrap {
        transform: none;
    }

    .vcards-item.is-behind .vcards-number,
    .vcards-item.is-behind .vcards-title,
    .vcards-item.is-behind .vcards-description {
        opacity: 1;
    }
}

@media (max-width: 768px) {

    .vcards-body {
        padding: 16px 0 0;
    }

    .vcards-overlay {
        padding: 20px;
    }

    .vcards-overlay-top {
        max-width: 80%;
    }

    

    /*
     * Mobile carousel: JS adds .swiper to .vcards-list when matchMedia matches,
     * Swiper rewrites .swiper-wrapper as a horizontal flex row. Sticky and
     * Time Machine effects are reset; cards stretch to the tallest one.
     */
    .vcards-list.swiper {
        overflow: hidden;
    }

    .vcards-list.swiper .swiper-wrapper {
        align-items: stretch;
        flex-direction: row;
        gap: 0;
    }

    .vcards-list.swiper .vcards-item {
        height: 60vh;
        position: static;
        top: auto;
    }

    .vcards-list.swiper .vcards-item + .vcards-item {
        margin-top: 0;
    }

    .vcards-list.swiper .vcards-card {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .vcards-list.swiper .vcards-image-wrap {
        flex: 1 1 auto;
        height: 100%;
    }

    .vcards-list.swiper .vcards-image {
        aspect-ratio: auto;
        height: 100%;
        width: 100%;
    }

    .vcards-list.swiper .vcards-item.is-behind .vcards-image-wrap {
        transform: none;
    }

    .vcards-list.swiper .vcards-item.is-behind .vcards-number,
    .vcards-list.swiper .vcards-item.is-behind .vcards-title,
    .vcards-list.swiper .vcards-item.is-behind .vcards-description {
        opacity: 1;
    }

    .vcards-list.swiper .vcards-item:first-child {
        padding-left: 24px
    }
    .vcards-list.swiper .vcards-item:last-child {
        padding-right: 24px
    }
}