/**
 * Pattern 2: Problem → Controlled Solution → Proof
 * ===================================================
 *
 * Three-column card grid displaying the narrative:
 * Problem → Controlled Solution → Proof.
 *
 * Structure:
 *   Section (.x-section-soft) > Container (.x-container) >
 *     optional heading > Grid (3 columns) >
 *       Card (.x-card): Icon (.x-icon-sticker) + H3 + Paragraph
 *
 * Mobile: cards stack vertically in logical order (Problem first,
 * then Solution, then Proof).
 *
 * Uses design tokens from custom-tokens.css and global classes from
 * global-classes.css (.x-section-soft, .x-container, .x-card, .x-icon-sticker).
 *
 * Requirements: 9.1, 9.2, 9.3, 9.4, 26.4
 *
 * @package Xenopz
 * @since 1.0.0
 */

/* =========================================================================
   SECTION HEADING
   ========================================================================= */

.x-pattern-psp__heading {
    text-align: center;
    margin-bottom: var(--x-space-lg);
}

/* =========================================================================
   THREE-COLUMN GRID
   ========================================================================= */

.x-pattern-psp__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--x-space-lg);
    align-items: stretch;
}

/* =========================================================================
   CARD LAYOUT
   ========================================================================= */

.x-pattern-psp__card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--x-space-sm);
    padding: var(--x-space-lg);
}

.x-pattern-psp__card-heading {
    font-family: var(--x-font-heading);
    font-weight: 800;
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    line-height: 1.2;
    color: var(--x-teal-900);
    margin: 0;
}

.x-pattern-psp__card-description {
    font-family: var(--x-font-body);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--x-ink);
    margin: 0;
}

/* =========================================================================
   RESPONSIVE: TABLET (2 columns + 1 below)
   ========================================================================= */

@media (max-width: 991px) {
    .x-pattern-psp__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--x-space-md);
    }

    /* Third card spans full width on tablet for balanced layout */
    .x-pattern-psp__card:last-child {
        grid-column: 1 / -1;
        max-width: 50%;
        justify-self: center;
    }
}

/* =========================================================================
   RESPONSIVE: MOBILE (single column, vertical stack)
   Cards stack in logical order: Problem → Solution → Proof.
   ========================================================================= */

@media (max-width: 767px) {
    .x-pattern-psp__grid {
        grid-template-columns: 1fr;
        gap: var(--x-space-md);
    }

    /* Reset tablet override */
    .x-pattern-psp__card:last-child {
        grid-column: auto;
        max-width: none;
        justify-self: auto;
    }

    .x-pattern-psp__card {
        padding: var(--x-space-md);
    }
}