/* JA — Communication (staggered card stack, Figma #2564:2519)
 *
 * Four 600×225 cream cards placed at (0,0) (620,204) (0,403) (620,612) in a
 * 1220×837 box — a two-column staircase with a 204px row stride and a 20px
 * column gap. The row/column assignments live inside min-width:961px so
 * mobile never has to undo them (no !important). Explicit grid-row per card
 * is required: with only grid-column set, auto-placement drops card 2 into
 * row 1 and kills the stagger.
 */

.ja-comm__stack { display: grid; grid-template-columns: 1fr; row-gap: 20px; }

.ja-comm__card {
    background: var(--ja-cream);
    border: 0;
    border-radius: var(--ja-radius-card); /* 30px */
    padding: 30px 50px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 225px;
}

.ja-comm__num {
    color: var(--ja-blue);
    font-family: var(--ja-font-sans);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.04em;
    text-transform: uppercase;
    text-align: left;
    margin: 0;
}

@media (min-width: 961px) {
    .ja-comm__stack {
        grid-template-columns: 1fr 1fr;
        column-gap: 20px;
        row-gap: 0;
        grid-auto-rows: var(--ja-comm-stride, 204px);
        padding-bottom: 21px; /* absorbs the last card's 225-204 overhang */
    }
    .ja-comm__card { align-self: start; }
    .ja-comm__card:nth-child(odd)  { grid-column: 1; }
    .ja-comm__card:nth-child(even) { grid-column: 2; }
    .ja-comm__card:nth-child(1) { grid-row: 1; }
    .ja-comm__card:nth-child(2) { grid-row: 2; }
    .ja-comm__card:nth-child(3) { grid-row: 3; }
    .ja-comm__card:nth-child(4) { grid-row: 4; }
    /* ja_communication_tiles is capped at 4 in ACF, so 1–4 is complete
       coverage. If the cap is ever raised, cards 5+ flow naturally:
       :nth-child(n+5) { grid-row: auto; } */
}

@media (max-width: 960px) {
    .ja-comm__card { padding: 24px; min-height: 0; }
}