/* JA — panel (image ⇄ text split)
 *
 * Figma: 550 + 120 gap + 550 = 1220. Text-first is the default DOM (better
 * reading order); `.ja-panel--media-first` flips the media LEFT visually via
 * `order` (Who We Work With), keeping the DOM heading-first.
 */

.ja-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 120px;
    align-items: center;
}

.ja-panel--media-first .ja-panel__media { order: -1; }

.ja-panel__heading { margin: 0 0 var(--ja-head-gap); }

.ja-panel__body {
    font-family: var(--ja-font-sans);
    font-size: 16px;
    font-weight: 500;
    line-height: 22.5px;
    letter-spacing: -0.04em;
    color: var(--ja-ink);
    margin: 0;
}

.ja-panel__extra { margin-top: 28px; }

.ja-panel__img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--ja-radius-img);
    display: block;
}

/* No-image fallback — Figma's #E1D5CF placeholder square keeps the
   two-column balance (same tone as --ja-stat-label). */
.ja-panel__placeholder {
    width: 100%;
    aspect-ratio: 1;
    background: var(--ja-line-warm);
    border-radius: var(--ja-radius-img);
}

@media (max-width: 960px) {
    .ja-panel { grid-template-columns: 1fr; gap: 32px; }
}