/* =========================================================
   Sticky Cards – frontend styles
   ========================================================= */

/* ── Outer section wrapper ──────────────────────────────── */
.sticky-cards-section {
    position: relative;
    /* height is set dynamically by JS: 100vh × (numCards + 1.5) */
}

/* ── Sticky pin container (created by JS) ───────────────── */
.sticky-cards-pin {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* Background color is inherited from the Group block setting */
}

/* ── "Above-cards" header area (heading + intro text) ───── */
.sticky-cards-header {
    flex-shrink: 0;
    padding: clamp(40px, 6vw, 80px) clamp(24px, 5vw, 80px) clamp(20px, 3vw, 40px);
    /* Allow pointer events so links/buttons still work */
    pointer-events: auto;
}

/* Gutenberg resets the heading margin; restore it */
.sticky-cards-header :is(h1, h2, h3, h4, h5, h6) {
    margin-top: 0;
    color: inherit;
}

/* ── Track that holds all cards (created by JS) ─────────── */
.sticky-cards-track {
    position: relative;
    flex: 1;
    /* Cards are absolute inside, they fill the track */
}

/* ── Individual white card ──────────────────────────────── */
.sticky-card {
    position: absolute !important; /* override Gutenberg display */
    inset: 0;                      /* top/right/bottom/left: 0  */
    overflow-y: auto;
    will-change: transform;
    /* Starting position: below the viewport – JS will set translateY */
    transform: translateY(100%);
    background: #ffffff;
    border-radius: 4px 4px 0 0;
    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.12);

    /* Inner padding */
    padding: clamp(32px, 5vw, 64px) clamp(24px, 6vw, 80px);
    box-sizing: border-box;

    /* Two-column layout (text + image) matching the reference design */
    /* display: grid !important; */
    /* grid-template-columns: 1fr 1fr; */
    /* gap: clamp(24px, 4vw, 60px); */
    /* align-items: center; */
}

/* Stack cards so later ones render on top */
.sticky-card:nth-child(1)  { z-index: 1; }
.sticky-card:nth-child(2)  { z-index: 2; }
.sticky-card:nth-child(3)  { z-index: 3; }
.sticky-card:nth-child(4)  { z-index: 4; }
.sticky-card:nth-child(5)  { z-index: 5; }
.sticky-card:nth-child(6)  { z-index: 6; }
.sticky-card:nth-child(7)  { z-index: 7; }
.sticky-card:nth-child(8)  { z-index: 8; }
.sticky-card:nth-child(9)  { z-index: 9; }
.sticky-card:nth-child(10) { z-index: 10; }

/* Smooth card slide – only when JS has initialised the section */
.sticky-cards-initialized .sticky-card {
    transition: transform 0.05s linear;
}

/* ── Responsive: single column on small screens ─────────── */
@media (max-width: 768px) {
    .sticky-card {
        grid-template-columns: 1fr;
    }
}

/* ── Gutenberg inner-blocks override ────────────────────── */
/* Make sure Gutenberg doesn't add extra margin inside cards  */
.sticky-card .wp-block-group__inner-container,
.sticky-card > * {
    margin-top: 0;
    margin-bottom: 0;
}

/* ── Accessibility: respect reduced-motion preference ────── */
@media (prefers-reduced-motion: reduce) {
    .sticky-cards-initialized .sticky-card {
        transition: none;
    }
}