/* ─── Pattern: co-ogarniamy (features grid 3-col) ─────────
   Sekcja "Co ogarniamy" — H2 + 6 features w 3-col grid.
   Każdy element to BIAŁA KARTA (.kordit-card atom) z ikoną w okrągłym
   chipie (.kordit-icon-chip.is-lg.is-accent-soft atom).

   STRUKTURA:
     .kordit-co-ogarniamy            section
       .kordit-co-ogarniamy__head    eyebrow + h2
       .kordit-co-ogarniamy__grid    grid 3-col (1 col na mobile, 2 col na tablet)
         .kordit-co-ogarniamy__item.kordit-card   karta (bg/radius/shadow z atomu)
           .kordit-icon-chip.is-lg.is-accent-soft → ikona (atom)
           __title, __text → typo z theme.json

   Pattern-specific TYLKO: grid layout + padding wewnętrzny karty + spacing
   między ikoną/tytułem/tekstem. Wszystko inne dziedziczy z atomów. */

.kordit-co-ogarniamy {
    padding: var(--space-2xl) 0;

    /* __top — grid 2-col z _page-header.scss (shared selector).
       Margin-bottom między headerem a gridem feature kart. */
    &__top {
        margin-bottom: var(--space-xl);
    }

    &__grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-lg);

        @media (max-width: 1100px) {
            grid-template-columns: repeat(2, 1fr);
        }

        @media (max-width: 700px) {
            grid-template-columns: 1fr;
            gap: var(--space-md);
        }
    }

    /* __item dziedziczy bg/radius/shadow z .kordit-card.
       Layout: __head (ikona+h3 w wierszu) + __text (paragraph pod spodem). */
    &__item.wp-block-group {
        display: flex;
        flex-direction: column;
        gap: var(--space-md);
        padding: var(--space-lg);
    }

    /* __row — flex row z ikoną obok tytułu w środku karty. WP doda
       is-layout-flex automatycznie bo block layout w PHP jest type:flex. */
    &__row.wp-block-group {
        gap: var(--space-md);
        margin: 0;
    }
}