/* ==========================================================================
   BLOCK: PILLARS INTERACTIVE — the Four Pillars selector
   Zero JavaScript. .sr-only radio inputs drive the state:
   input:checked + .pillar becomes the hero panel (left, 3 rows tall);
   the rest auto-place as the list column. Arrow keys work for free
   because the widget is built on real radios. Backgrounds are
   grid-stacked ("stack" area) — no absolute positioning.
   ========================================================================== */

@scope (.block-pillars-interactive) {
    :scope {
        padding-block: var(--space-lg);
        container-type: inline-size;
        container-name: pillars;
    }

    .pillars-intro {
        max-width: var(--content-text);
        margin-block-end: var(--space-md);
    }
    .pillars-intro h2 {
        font-weight: 300;
        font-size: var(--fs-h2);
        letter-spacing: -0.04em;
        margin-block-end: 20px;
    }
    .pillars-intro h2 strong { font-weight: 900; }
    .pillars-intro p {
        font-size: 1.1rem;
        line-height: 1.7;
        color: var(--text-secondary);
    }

    /* ------------------------------------------------------ THE GRID -- */
    .pillars-wrapper {
        display: grid;
        gap: var(--space-xs);
        scroll-margin-top: calc(var(--header-h) + 20px);
    }
    @container pillars (width >= 1024px) {
        .pillars-wrapper {
            grid-template-columns: 1.6fr 1fr;
            grid-template-rows: repeat(3, minmax(0, 1fr));
            min-height: 800px;
        }
        /* Unchecked cards auto-place down the list column */
        .pillar { grid-column: 2; }
        /* The checked card owns the hero panel */
        input:checked + .pillar { grid-area: 1 / 1 / 4 / 2; }
    }

    /* ------------------------------------------------------ THE CARD -- */
    .pillar {
        display: grid;
        grid-template-areas: "stack";
        overflow: hidden;
        cursor: pointer;
        background: var(--bg-canvas);
        border-block-start: 2px solid #000;
        padding: clamp(24px, 3cqw, 40px);
        transition: transform 0.5s var(--ease-lux), background 0.5s, border-color 0.5s;
        container-type: inline-size;
    }
    .pillar:hover { border-color: #000; background: var(--color-bg-alt); transform: translateX(-10px); }
    /* Keyboard focus on the hidden radio rings its card */
    input:focus-visible + .pillar { outline: 2px solid currentColor; outline-offset: 3px; }

    /* Grid-stacked background image — muted until the card is the hero */
    .pillar-bg {
        grid-area: stack;
        margin: calc(clamp(24px, 3cqw, 40px) * -1); /* bleed to the card edge */
        background-image: var(--pillar-bg);
        background-size: cover;
        background-position: center;
        filter: brightness(0.6) grayscale(25%);
        opacity: 0;
        transition: opacity 0.5s, filter 0.5s, scale 6s;
    }

    .pillar-content {
        grid-area: stack;
        z-index: 1;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        text-align: left;
        gap: 20px;
    }

    /* List-state typography */
    .p-num {
        font-size: 2.5rem;
        font-weight: 900;
        line-height: 1;
        color: #e0e0e0;
        transition: color 0.3s;
    }
    .pillar:hover .p-num { color: #000; }

    .p-title {
        display: block;
        font-size: 1.5rem;
        font-weight: 600;
        letter-spacing: -0.02em;
        line-height: 1.1;
    }
    .p-title strong { display: inline; font-weight: 900; }

    .p-desc {
        display: block;
        font-size: 1rem;
        line-height: 1.5;
        font-weight: 300;
        color: var(--text-secondary);
        max-width: 600px;
    }

    .p-btn { display: none; align-self: flex-start; }

    .p-kicker {
        display: inline-block;
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        border-block-end: 2px solid #000;
        padding-block-end: 4px;
        margin-block-start: auto;
        padding-block-start: 20px;
        align-self: flex-start;
    }

    /* -------------------------------------------------- HERO STATE ----- */
    input:checked + .pillar {
        background: #000;
        color: #fff;
        border-color: transparent;
        cursor: default;
        padding: clamp(40px, 5cqw, 80px);
        min-height: 600px;
    }
    input:checked + .pillar:hover { transform: none; }

    input:checked + .pillar .pillar-bg {
        margin: calc(clamp(40px, 5cqw, 80px) * -1);
        opacity: 1;
    }
    input:checked + .pillar:hover .pillar-bg {
        scale: 1.05;
        filter: brightness(0.6) grayscale(0%);
    }

    input:checked + .pillar .pillar-content { justify-content: space-between; }

    input:checked + .pillar .p-num {
        font-size: 5rem;
        color: var(--accent-lime);
    }
    input:checked + .pillar .p-title {
        font-weight: 100;
        line-height: 0.9;
        letter-spacing: -0.04em;
        margin-block: 20px;
        /* container units — the title scales with the panel, not the page */
        font-size: clamp(2rem, 12cqw, 5rem);
        overflow-wrap: break-word;
    }
    input:checked + .pillar .p-title strong { display: block; font-weight: 900; }
    input:checked + .pillar .p-desc {
        font-size: 1.25rem;
        color: inherit;
        opacity: 0.9;
        margin-block-end: 30px;
    }
    input:checked + .pillar .p-btn { display: inline-block; }
    input:checked + .pillar .p-kicker { display: none; }
}