/**
 * .ww-pros-cons — the editorial Pros & Cons block
 * (blocks/pros-cons/render.php).
 *
 * Was `grid-template-columns: 1fr 1fr` inline, which does not collapse:
 * on a phone that produced two ~150px columns of wrapped single words.
 * Stacks below the tablet breakpoint instead, and marks each side with
 * a colored edge so the two lists stay distinguishable once stacked and
 * the headings scroll apart — colour alone never carries the meaning,
 * since each column keeps its own visible heading.
 */

.ww-pros-cons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.ww-pros-cons__column {
    border-inline-start: 3px solid var(--ww-border-color);
    padding-inline-start: 1rem;
}

.ww-pros-cons__column--pros {
    border-inline-start-color: var(--wp--preset--color--success);
}

.ww-pros-cons__column--cons {
    border-inline-start-color: var(--wp--preset--color--danger);
}

.ww-pros-cons__heading {
    font-size: var(--wp--preset--font-size--small);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-block-end: 0.5rem;
}

@media (max-width: 768px) {
    .ww-pros-cons {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}