/**
 * Content-Split Block Styles
 * Two-column layout with content and image gallery
 * Mobile-first
 */

/* ─── Base (mobile) ─────────────────────────────────────────── */

.content-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--wp--custom--spacing--md, 2rem);
    align-items: center;
}

/* Images always above content on mobile */
.content-split__images {
    display: grid;
    gap: var(--wp--custom--spacing--md, 2rem);
    order: -1;
}

.content-split__content {
    display: flex;
    flex-direction: column;
    gap: var(--wp--custom--spacing--md, 2rem);
}

/* Only first image visible on mobile */
.content-split__images {
    display: none;
}

/* Image wrapper */
.content-split__image-wrapper {
    overflow: hidden;
    border-radius: var(--wp--custom--radius-card, 25px);
}

/* Image styling */
.content-split__image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* ─── Desktop (min-width: 600px) ────────────────────────────── */

@media (min-width: 769px) {
    .content-split {
        grid-template-columns: 1fr 1fr;
        gap: var(--wp--custom--spacing--xl, 4rem);
    }

    /* Restore images on desktop */
    .content-split__images {
        display: grid;
        order: unset;
    }

    /* Restore hidden images */
    .content-split__image-wrapper:not(:first-child) {
        display: block;
    }

    /* Single image layout */
    .content-split__images:has(.content-split__image-wrapper:only-child) {
        grid-template-columns: 1fr;
    }

    /* All images max height */
    .content-split__image {
        max-height: 422px;
        object-fit: cover;
    }

    /* Two images layout */
    .content-split__images:has(.content-split__image-wrapper:nth-child(2):last-child) {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
    }

    /* Three images layout */
    .content-split__images:has(.content-split__image-wrapper:nth-child(3)) {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto auto;
    }

    .content-split__images:has(.content-split__image-wrapper:nth-child(3)) .content-split__image-wrapper:first-child {
        grid-column: 1 / -1;
    }

    /* Non-full-width items: fill the shared row height equally */
    .content-split__images:has(.content-split__image-wrapper:nth-child(3)) .content-split__image-wrapper:not(:first-child) {
        height: 100%;
    }

    .content-split__images:has(.content-split__image-wrapper:nth-child(3)) .content-split__image-wrapper:not(:first-child) .content-split__image {
        height: 100%;
    }

    /* Hide images beyond 3rd */
    .content-split__image-wrapper:nth-child(n+4) {
        display: none;
    }

    /* Text left layout (default) */
    .content-split--text-left .content-split__content { order: 1; }
    .content-split--text-left .content-split__images  { order: 2; }

    /* Text right layout */
    .content-split--text-right .content-split__content { order: 2; }
    .content-split--text-right .content-split__images  { order: 1; }
}

/* ─── Typography ────────────────────────────────────────────── */

/* .content-split__content h2,
.content-split__content h3,
.content-split__content h4 {
    color: var(--wp--preset--color--brand, #D43425);
    font-family: var(--wp--preset--font-family--dm-serif-display, serif);
}

.content-split__content p {
    color: var(--wp--preset--color--brand, #D43425);
    font-family: var(--wp--preset--font-family--barlow-condensed, sans-serif);
    font-size: var(--wp--preset--font-size--body, 24px);
    line-height: 1.5;
}

.content-split__content ul,
.content-split__content ol {
    color: var(--wp--preset--color--brand, #D43425);
    font-family: var(--wp--preset--font-family--barlow-condensed, sans-serif);
} */