/* ========================================
   BLOCK: PROCESS
   ======================================== */

@scope (.block-process) {
    :scope {
        padding-block: var(--space-lg);
        background: var(--color-bg-dark);
        color: var(--color-text-inverse);
    }

    .cms-block-inner {
        max-width: var(--content-width);
        margin-inline: auto;
        padding-inline: var(--space-xs);
    }

    /* Process Header */
    .process-header {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--space-sm);
        margin-block-end: var(--space-md);
    }

    @container (min-width: 768px) {
        .process-header {
            grid-template-columns: 1fr 1fr;
        }
    }

    .process-title .kicker {
        color: var(--color-text-muted);
    }

    h2 {
        font-size: var(--text-h2);
        font-weight: 300;
        line-height: 1.1;
    }

    h2 strong {
        font-weight: 900;
    }

    .process-header > p {
        font-size: var(--text-body);
        color: var(--color-text-muted);
        line-height: 1.7;
        align-self: end;
    }

    /* Process Grid */
    .process-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--space-sm);
    }

    @container (min-width: 768px) {
        .process-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @container (min-width: 1440px) {
        .process-grid {
            grid-template-columns: repeat(4, 1fr);
        }
    }

    /* Process Card */
    .process-card {
        padding: var(--space-sm);
        border-top: 4px solid var(--color-accent);
        display: grid;
        gap: var(--space-xs);
        align-content: start;
        transition: var(--transition-fast);
    }

    .process-card:hover {
        background: rgba(255, 255, 255, 0.05);
    }

    .process-number {
        font-size: var(--text-h1);
        font-weight: 900;
        color: rgba(255, 255, 255, 0.1);
        line-height: 1;
    }

    .process-card:hover .process-number {
        color: var(--color-accent);
    }

    .process-card h3 {
        font-size: var(--text-h4);
        font-weight: 700;
    }

    .process-card h3 a {
        color: var(--color-text-inverse);
    }

    .process-card h3 a:hover {
        color: var(--color-accent);
    }

    .process-card p {
        font-size: var(--text-body);
        color: var(--color-text-muted);
        line-height: 1.6;
    }
}