/* ── Stacking Cards block ──────────────────────────────────────────────── */

/*
 * The heading above the card stack stays pinned at the viewport top via
 * pure CSS sticky — no GSAP pin needed. z-index:20 keeps it above all
 * cards whose --nyehs-sc-idx values run 1..N.
 */
.nyehs-sc-pin {
    position: sticky;
    top:      0;
    z-index:  20;
}

.nyehs-sc {
    list-style: none;
    margin:     0;
    padding:    0;
}

/* ── Item wrappers ───────────────────────────────────────────────────── */

/*
 * Fallback: no-JS renders items in normal block flow.
 * view.js switches each item to position:absolute and drives translateY + scale
 * via a scroll handler, so sticky/top are not used when JS is active.
 *
 * transform-origin: 50% 0% makes scale shrink downward from the top edge,
 * so buried cards visually recede behind the incoming card.
 */
.nyehs-sc__item {
    position:         relative;
    z-index:          var(--nyehs-sc-idx, 1);
    transform-origin: 50% 0%;
    will-change:      transform;
}

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

.nyehs-sc__card {
    display:       flex;
    align-items:   center;
    gap:           clamp(32px, 5vw, 64px);
    background:    #ffffff;
    border-radius: 28px;
    padding:       clamp(36px, 5vw, 64px) clamp(28px, 5vw, 72px);
    box-shadow:
        0  2px  6px  rgba(0, 0, 0, 0.04),
        0  8px  28px rgba(0, 0, 0, 0.08),
        inset 0 1px 0   rgba(0, 0, 0, 0.04),
        inset 0 2px 10px rgba(0, 0, 0, 0.03);
    height:        35vh;
    overflow:      hidden;
}

/* ── Text body ───────────────────────────────────────────────────────── */

.nyehs-sc__body {
    flex:      1 1 0%;
    min-width: 0;
}

.nyehs-sc__heading {
    font-family:            var(--wp--preset--font-family--gt-eesti-display, sans-serif);
    font-size:              clamp(1.65rem, 3vw, 2.5rem);
    font-weight:            700;
    line-height:            1.18;
    color:                  #0f172a;
    margin:                 0 0 18px;
    -webkit-font-smoothing: antialiased;
}

.nyehs-sc__text {
    font-size:   1rem;
    line-height: 1.72;
    color:       rgba(15, 23, 42, 0.66);
}

.nyehs-sc__text p {
    margin: 0 0 14px;
}

.nyehs-sc__text p:last-child {
    margin-bottom: 0;
}

/* ── CTA button ──────────────────────────────────────────────────────── */

.nyehs-sc__btn-wrap {
    margin: 28px 0 0;
}

.nyehs-sc__btn {
    display:                inline-flex;
    align-items:            center;
    padding:                13px 30px;
    background:             linear-gradient(90deg, #0017c7 -25%, #0d41ff 125%);
    color:                  #fff;
    border-radius:          999px;
    font-size:              0.95rem;
    font-weight:            600;
    line-height:            1.4;
    text-decoration:        none;
    transition:             opacity 0.2s ease, transform 0.2s ease;
    -webkit-font-smoothing: antialiased;
}

.nyehs-sc__btn:hover {
    opacity:         0.86;
    transform:       translateY(-1px);
    color:           #fff;
    text-decoration: none;
}

/* ── Image ───────────────────────────────────────────────────────────── */

.nyehs-sc__figure {
    flex:          0 0 44%;
    max-width:     44%;
    aspect-ratio:  4 / 3;
    border-radius: 20px;
    overflow:      hidden;
    margin:        0;
}

.nyehs-sc__figure img {
    display:    block;
    width:      100%;
    height:     100%;
    object-fit: cover;
}

/* ── Image layout: half ──────────────────────────────────────────────── */

/*
 * CSS Grid gives both columns the same reference width (the full card),
 * so the figure column is exactly 50 % and the body column is the rest.
 * Card padding is zeroed and moved into the body so the figure can reach
 * the edges; border-radius + overflow:hidden handle corner clipping.
 */
.nyehs-sc__card--layout-half {
    display:               grid;
    grid-template-columns: 1fr 50%;
    align-items:           stretch;
    padding:               0;
    gap:                   0;
}

.nyehs-sc__card--layout-half .nyehs-sc__body {
    padding:         clamp(36px, 5vw, 64px) clamp(28px, 5vw, 72px);
    display:         flex;
    flex-direction:  column;
    justify-content: center;
    min-width:       0;
}

.nyehs-sc__card--layout-half .nyehs-sc__figure {
    flex:          unset;
    max-width:     none;
    height:        100%;
    aspect-ratio:  unset;
    border-radius: 0;
    margin:        0;
}

/* ── Image layout: background ────────────────────────────────────────── */

/*
 * Gradient + image are set as inline background layers in render.php.
 * Text colour is driven by --nyehs-sc-text, set as an inline CSS custom
 * property on nyehs-sc__body from the editor-chosen value.
 * Body is capped at 50% so text stays in the left half where the gradient
 * provides contrast; the right half shows the image clearly.
 */
.nyehs-sc__card--layout-background .nyehs-sc__body {
    flex:      0 0 auto;
    width:     50%;
    max-width: 50%;
}

.nyehs-sc__card--layout-background .nyehs-sc__heading {
    color: var(--nyehs-sc-text, #fff);
}

.nyehs-sc__card--layout-background .nyehs-sc__text {
    color: var(--nyehs-sc-text, rgba(255, 255, 255, 0.82));
}

/* ── Tablet / mobile sticky stack (JS unavailable below 1024px) ─────── */

/*
 * parallax.js only makes sections sticky at >=1024px, so view.js tears down
 * below that breakpoint. CSS takes over: each item is independently sticky
 * with a staggered top offset driven by --nyehs-sc-idx (1-based, set in
 * render.php) so later cards slide on top of earlier ones as you scroll.
 */
@media (max-width: 1023px) {
    .nyehs-sc-pin {
        position: static;
    }

    .nyehs-sc__item {
        position: sticky;
        top:      calc(60px + (var(--nyehs-sc-idx, 1) - 1) * 20px);
    }
}

/* ── Mobile ──────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .nyehs-sc__card {
        flex-direction: column;
        height:         auto;        /* remove fixed 35vh so stacked content isn't clipped */
        padding:        32px 24px 36px;
        gap:            24px;
        border-radius:  20px;
    }

    .nyehs-sc__figure {
        flex:      none;
        width:     100%;
        max-width: 100%;
    }

    .nyehs-sc__card--layout-half {
        display: flex;
        padding: 32px 24px 36px;
    }

    .nyehs-sc__card--layout-half .nyehs-sc__body {
        padding: 0;
        display: block;
    }

    .nyehs-sc__card--layout-half .nyehs-sc__figure {
        height:       auto;
        aspect-ratio: 4 / 3;
    }

    .nyehs-sc__card--layout-background .nyehs-sc__body {
        width:     100%;
        max-width: 100%;
    }
}