/**
 * Smoco Essentials V2 — Stacking cards widget (CodyHouse pattern).
 *
 * Sticky cards that scale down while scrolling to create a stack effect.
 */

.cmp-stacking-cards {
    background: var(--cmp-section-bg);
    color: var(--cmp-body);
}

.cmp-stacking-cards__inner {
    max-width: 960px;
    margin: 0 auto;
}

.cmp-stacking-cards__list {
    --stack-cards-gap: 24px;
    --stack-cards-top: 32px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.cmp-stacking-cards__list--gap-small {
    --stack-cards-gap: 16px;
}

.cmp-stacking-cards__list--gap-medium {
    --stack-cards-gap: 24px;
}

.cmp-stacking-cards__list--gap-large {
    --stack-cards-gap: 32px;
}

.cmp-stacking-cards__list--offset-small {
    --stack-cards-top: 16px;
}

.cmp-stacking-cards__list--offset-medium {
    --stack-cards-top: 32px;
}

.cmp-stacking-cards__list--offset-large {
    --stack-cards-top: 48px;
}

.cmp-stacking-cards__item {
    position: -webkit-sticky;
    position: sticky;
    top: var(--stack-cards-top);
    height: 0;
    padding-bottom: var(--stack-cards-ratio, 50%);
    overflow: visible;
    transform-origin: center top;
    will-change: transform;
}

.cmp-stacking-cards__card {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--cmp-card-bg, #fff);
    border-radius: 16px;
    box-shadow: var(
        --stack-card-shadow,
        0 18px 40px -12px rgba(0, 63, 125, 0.16),
        0 6px 16px -8px rgba(15, 23, 42, 0.08)
    );
    transition: box-shadow 0.25s ease;
    overflow: hidden;
}

.cmp-stacking-cards__list--image-left .cmp-stacking-cards__card {
    direction: rtl;
}

.cmp-stacking-cards__list--image-left .cmp-stacking-cards__content,
.cmp-stacking-cards__list--image-left .cmp-stacking-cards__media {
    direction: ltr;
}

.cmp-stacking-cards__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(24px, 4vw, 48px);
}

.cmp-stacking-cards__title {
    margin: 0 0 12px;
    font-size: clamp(22px, 2.5vw, 28px);
    font-weight: 800;
    line-height: 1.2;
    color: var(--cmp-heading);
}

.cmp-stacking-cards__text {
    margin: 0 0 24px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--cmp-body);
}

.cmp-stacking-cards__content .sev-btn {
    align-self: flex-start;
}

.cmp-stacking-cards__media {
    position: relative;
    min-height: 100%;
}

.cmp-stacking-cards__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Static fallback when JS is disabled or reduced motion is preferred */
.cmp-stacking-cards.is-stack-static .cmp-stacking-cards__item {
    position: relative;
    height: auto;
    padding-bottom: 0;
    margin-bottom: var(--stack-cards-gap);
    transform: none !important;
}

.cmp-stacking-cards.is-stack-static .cmp-stacking-cards__item:last-child {
    margin-bottom: 0;
}

.cmp-stacking-cards.is-stack-static .cmp-stacking-cards__card {
    position: relative;
    min-height: 280px;
}

.cmp-stacking-cards.is-stack-static .cmp-stacking-cards__item:nth-last-child(1) .cmp-stacking-cards__card {
    --stack-card-shadow: 0 18px 40px -12px rgba(0, 63, 125, 0.16), 0 6px 16px -8px rgba(15, 23, 42, 0.08);
}

.cmp-stacking-cards.is-stack-static .cmp-stacking-cards__item:nth-last-child(2) .cmp-stacking-cards__card {
    --stack-card-shadow: 0 12px 28px -14px rgba(0, 63, 125, 0.12), 0 4px 12px -8px rgba(15, 23, 42, 0.06);
}

.cmp-stacking-cards.is-stack-static .cmp-stacking-cards__item:nth-last-child(3) .cmp-stacking-cards__card {
    --stack-card-shadow: 0 8px 20px -14px rgba(0, 63, 125, 0.09), 0 2px 8px -8px rgba(15, 23, 42, 0.05);
}

.cmp-stacking-cards.is-stack-static .cmp-stacking-cards__item:nth-last-child(n + 4) .cmp-stacking-cards__card {
    --stack-card-shadow: 0 6px 16px -14px rgba(0, 63, 125, 0.07), 0 2px 6px -8px rgba(15, 23, 42, 0.04);
}

@media (max-width: 1023px) {
    /* Natural card height in document flow — sticky stack without overlap */
    .cmp-stacking-cards:not(.is-stack-static) .cmp-stacking-cards__item {
        height: auto;
        padding-bottom: 0;
    }

    .cmp-stacking-cards:not(.is-stack-static) .cmp-stacking-cards__card {
        position: relative;
        inset: auto;
        grid-template-columns: 1fr;
        grid-template-rows: auto 200px;
    }

    .cmp-stacking-cards:not(.is-stack-static) .cmp-stacking-cards__list--image-left .cmp-stacking-cards__card {
        direction: ltr;
    }

    .cmp-stacking-cards:not(.is-stack-static) .cmp-stacking-cards__list--image-left .cmp-stacking-cards__content {
        order: 1;
    }

    .cmp-stacking-cards:not(.is-stack-static) .cmp-stacking-cards__list--image-left .cmp-stacking-cards__media {
        order: 2;
    }

    .cmp-stacking-cards.is-stack-static .cmp-stacking-cards__card {
        grid-template-columns: 1fr;
        grid-template-rows: auto 200px;
        min-height: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cmp-stacking-cards__item {
        will-change: auto;
    }
}