/* ==========================================================================
   BLOCK: VAULT — Members Knowledge Base + Weekly Wire twin panels
   One 100dvh section: side-by-side 50/50 columns on wide containers,
   two 50% rows when space forces stacking. Content centers in each panel.
   ========================================================================== */

@scope (.block-vault) {
    /* The section is the query container and owns the viewport height.
       NOTE: a container can't style itself from its own @container rule,
       which is why the old two-column rule never fired — the grid now
       lives on the inner .vault-grid instead. */
    :scope {
        display: grid;                /* single track — .vault-grid fills it */
        background: var(--bg-contrast);
        color: var(--text-inverse);
        margin-block-start: var(--space-lg);
        min-block-size: 100dvh;
        container-type: inline-size;
        container-name: vault;
    }

    /* Stacked (narrow): two equal rows, each ≥ 50% of the section */
    .vault-grid {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
    }

    .vault-members,
    .vault-newsletter {
        padding: var(--space-lg) var(--space-sm);
        display: flex;               /* mobile fallback */
        flex-direction: column;
        justify-content: center;
    }
    .vault-newsletter { background: var(--bg-panel); }

    /* Side by side: two equal columns, one full-height row */
    @container vault (width >= 1024px) {
        .vault-grid {
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr;
        }
        .vault-members,
        .vault-newsletter {
            padding: var(--space-lg) var(--space-md);
            border-inline-end: 1px solid rgba(255,255,255,0.1);
            justify-content: flex-start;   /* both start at the same top edge */
        }
        .vault-newsletter { border-inline-end: 0; }
    }

    .kicker { color: rgba(255,255,255,0.5); }

    h3 {
        font-weight: 100;
        font-size: var(--fs-h2);
        line-height: 1;
        margin-block-end: var(--space-sm);
    }
    h3 strong { font-weight: 900; display: block; }

    .vault-p {
        font-weight: 300;
        font-size: 1.1rem;
        color: #999;
        margin-block-end: var(--space-sm);
        max-width: 500px;
        line-height: 1.6;
    }

    .stat-grid { display: flex; flex-wrap: wrap; gap: clamp(20px, 3cqw, 40px); margin-block-end: 40px; }
    .stat-item strong {
        font-size: 2.5rem;
        font-weight: 900;
        display: block;
        color: var(--accent-lime);
    }
    .stat-item span {
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: #fff;
    }

    .vault-cta { align-self: flex-start; color: #fff; border-color: #fff; }

    /* Newsletter — bottom-rule input, :has() lights the rule */
    .input-group {
        display: flex;
        align-items: center;
        gap: 10px;
        border-block-end: 1px solid rgba(255,255,255,0.3);
        padding-block-end: 12px;
        max-width: 90%;
        align-self: stretch;
        height: max-content;
        transition: border-color 0.4s;
    }
    .input-group:has(input:focus-visible),
    .input-group:has(input:not(:placeholder-shown)) { border-color: var(--accent-lime); }

    .email-input {
        background: transparent;
        border: 0;
        outline: none;
        color: #fff;
        font-size: 1.2rem;
        font-weight: 300;
        inline-size: 100%;
        padding-inline: 0.25rem;
    }
    .email-input::placeholder { color: rgba(255,255,255,0.55); }

    .submit-arrow {
        color: var(--accent-lime);
        font-size: 1.5rem;
        line-height: 1;
        padding: 10px 16px;
        transition: translate 0.3s var(--ease-lux);
    }
    .submit-arrow:hover { translate: 6px 0; }
}