/* ==========================================================================
   Media Object — 50/50 image + content row, image side swappable.
   ========================================================================== */

.section.mediaobject {
    padding-top: 64px;
    padding-bottom: 64px;
}

.mediaobject-row {
    display: flex;
    align-items: center;
    gap: clamp(40px, 8vw, 108px);
}
.mediaobject--image-right .mediaobject-row { flex-direction: row-reverse; }

/* ---- Media -------------------------------------------------------------- */
.mediaobject-media {
    flex: 1 1 50%;
    min-width: 0;
}
.mediaobject-media img {
    width: 100%;
    aspect-ratio: 554 / 358;
    object-fit: cover;
    border-radius: var(--radius-md);
    display: block;
}

/* ---- Content ------------------------------------------------------------ */
.mediaobject-content {
    flex: 1 1 50%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}
.mediaobject-eyebrow {
    font-family: var(--font-heading);
    font-size: var(--text-label-xs);
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-foreground);
}
.mediaobject-heading { margin: 0; color: var(--color-foreground); }
.mediaobject-subcopy { color: var(--color-foreground); }
.mediaobject-subcopy p { margin: 0 0 1em; }
.mediaobject-subcopy p:last-child { margin-bottom: 0; }
.mediaobject-btn { margin-top: 8px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px) {
    .mediaobject-row,
    .mediaobject--image-right .mediaobject-row {
        flex-direction: column;
        align-items: stretch;
        gap: 32px;
    }
    .mediaobject-media,
    .mediaobject-content { flex: 0 0 auto; }
}