/**
 * Category Image Split - shared front-end + editor styles.
 * One DOM, two layouts:
 *   Desktop: panel stack + a shared image that swaps on hover (CSS grid;
 *            each slide's content stacks in column 1, all medias overlap in
 *            column 2 and only the active one shows).
 *   Mobile:  a horizontal swipe pager - each slide carries its own image and
 *            text together, snap-scrolled left/right, with dots.
 * Colours/fonts resolve from Black Sheep theme tokens; the accent maps to the
 * theme button tokens, each panel a graduated shade (--cis-panel-bg), the
 * active panel switches to the ink surface.
 */
.wp-block-blacksheep-category-image-split {
    --cis-accent: var(--primary-button-color, var(--primary-color, #69b828));
    --cis-accent-text: var(--primary-button-text-color, var(--primary-text-color, #ffffff));
    /* Base = the colour the graduated panel stack is built from (darkening
       down the stack). Text = title/body/button colour. Both overridable per
       block via inline vars set from the editor controls. */
    --cis-base: var(--cis-accent);
    --cis-text: var(--cis-accent-text);
    --cis-ink: var(--theme-black, #0d1718);
    /* Hover/active panel colours (a distinct pair so the active state always
       contrasts the resting base, including when the base itself is dark). */
    --cis-active: var(--cis-ink);
    --cis-active-text: var(--theme-white, #ffffff);
    --cis-surface: var(--surface-color, #ffffff);
    --cis-empty-bg: var(--surface-alt-color, #f2f0ec);
    --cis-empty-text: var(--muted-text-color, #a8a39d);
    --cis-dot: var(--border-color, #c9cdc9);
    --cis-display: var(--header-font, "Poppins", Arial, sans-serif);
    --cis-ui: var(--body-font, "Inter", Arial, sans-serif);

    --cis-radius: 16px;
    --cis-gap: clamp(20px, 3vw, 48px);
    --cis-pad: clamp(20px, 3vw, 48px);
    --cis-media-min: 460px;

    display: block;
}

.wp-block-blacksheep-category-image-split .cis {
    background: var(--cis-surface);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    margin-inline: auto;
    max-width: 1024px;
    padding: var(--cis-pad);
    width: 100%;
}

/* ---- Desktop: grid stack + shared swapping image ----------------------- */
.wp-block-blacksheep-category-image-split .cis__viewport {
    align-items: stretch;
    column-gap: var(--cis-gap);
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.wp-block-blacksheep-category-image-split .cis__slide {
    display: contents;
}

.wp-block-blacksheep-category-image-split .cis__content {
    background: var(--cis-panel-bg, var(--cis-base));
    color: var(--cis-text);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 10px;
    grid-column: 1;
    justify-content: center;
    padding: clamp(18px, 2.2vw, 26px);
    transition: background-color 0.3s ease;
}

.wp-block-blacksheep-category-image-split .cis__content.cis__content--first {
    border-radius: var(--cis-radius) var(--cis-radius) 0 0;
}

.wp-block-blacksheep-category-image-split .cis__content.cis__content--last {
    border-radius: 0 0 var(--cis-radius) var(--cis-radius);
}

.wp-block-blacksheep-category-image-split .cis__content.is-active {
    background: var(--cis-active);
    color: var(--cis-active-text);
}

.wp-block-blacksheep-category-image-split .cis__content.is-active .cis__title,
.wp-block-blacksheep-category-image-split .cis__content.is-active .cis__body {
    color: var(--cis-active-text);
}

.wp-block-blacksheep-category-image-split .cis__media {
    border-radius: var(--cis-radius);
    grid-column: 2;
    grid-row: 1 / -1;
    min-height: var(--cis-media-min);
    opacity: 0;
    overflow: hidden;
    position: relative;
    transition: opacity 0.4s ease;
}

.wp-block-blacksheep-category-image-split .cis__media.is-active {
    opacity: 1;
}

.wp-block-blacksheep-category-image-split .cis.has-image-left .cis__content {
    grid-column: 2;
}

.wp-block-blacksheep-category-image-split .cis.has-image-left .cis__media {
    grid-column: 1;
}

.wp-block-blacksheep-category-image-split .cis__media img {
    height: 100%;
    inset: 0;
    object-fit: cover;
    position: absolute;
    width: 100%;
}

.wp-block-blacksheep-category-image-split .cis__media-ph {
    align-items: center;
    background: var(--cis-empty-bg);
    color: var(--cis-empty-text);
    display: flex;
    flex-direction: column;
    gap: 10px;
    inset: 0;
    justify-content: center;
    position: absolute;
}

.wp-block-blacksheep-category-image-split .cis__media-ph span {
    font-family: var(--cis-ui);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.wp-block-blacksheep-category-image-split .cis__media-ph svg {
    height: 36px;
    stroke: var(--cis-empty-text);
    width: 36px;
}

/* ---- Text ------------------------------------------------------------- */
.wp-block-blacksheep-category-image-split .cis__title {
    color: var(--cis-text);
    font-family: var(--cis-display);
    font-size: clamp(20px, 2vw, 24px);
    font-weight: 700;
    line-height: 1.05;
    margin: 0;
    text-transform: uppercase;
}

.wp-block-blacksheep-category-image-split .cis__body {
    color: var(--cis-text);
    font-family: var(--cis-display);
    font-size: 16px;
    line-height: 1.4;
    margin: 0;
}

.wp-block-blacksheep-category-image-split .cis__btn {
    align-self: flex-start;
    background: var(--cis-base);
    border: 1px solid var(--cis-text);
    border-radius: 6px;
    color: var(--cis-text);
    cursor: pointer;
    display: inline-flex;
    font-family: var(--cis-ui);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    margin-top: 4px;
    padding: 12px 18px;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.wp-block-blacksheep-category-image-split .cis__btn:hover {
    background: var(--cis-text);
    color: var(--cis-base);
}

/* Button inside the active (hover) panel: outline in the active text colour. */
.wp-block-blacksheep-category-image-split .cis__content.is-active .cis__btn {
    background: transparent;
    border-color: var(--cis-active-text);
    color: var(--cis-active-text);
}

.wp-block-blacksheep-category-image-split .cis__content.is-active .cis__btn:hover {
    background: var(--cis-active-text);
    color: var(--cis-active);
}

.wp-block-blacksheep-category-image-split .cis__btn:focus-visible {
    outline: 2px solid var(--cis-text);
    outline-offset: 2px;
}

/* ---- Dots (mobile only) ----------------------------------------------- */
.wp-block-blacksheep-category-image-split .cis__dots {
    display: none;
    gap: 10px;
    justify-content: center;
    padding: 16px 0 2px;
}

.wp-block-blacksheep-category-image-split .cis__dots button {
    background: var(--cis-dot);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    height: 9px;
    padding: 0;
    transition: background-color 0.25s ease, width 0.25s ease;
    width: 9px;
}

.wp-block-blacksheep-category-image-split .cis__dots button.is-active {
    background: var(--cis-accent);
    border-radius: 5px;
    width: 26px;
}

.wp-block-blacksheep-category-image-split .cis__dots button:focus-visible {
    outline: 2px solid var(--cis-accent);
    outline-offset: 2px;
}

/* ---- Mobile: horizontal swipe pager ----------------------------------- */
@media (max-width: 52em) {
    .wp-block-blacksheep-category-image-split .cis__viewport {
        display: flex;
        gap: 0;
        grid-template-columns: none;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .wp-block-blacksheep-category-image-split .cis__viewport::-webkit-scrollbar {
        display: none;
    }

    .wp-block-blacksheep-category-image-split .cis__slide {
        display: flex;
        flex-direction: column;
        min-width: 100%;
        overflow: hidden;
        scroll-snap-align: center;
    }

    .wp-block-blacksheep-category-image-split .cis__content,
    .wp-block-blacksheep-category-image-split .cis__content.cis__content--first,
    .wp-block-blacksheep-category-image-split .cis__content.cis__content--last {
        border-radius: 0;
        gap: 8px;
        padding: 18px 20px 22px;
    }

    .wp-block-blacksheep-category-image-split .cis__media {
        aspect-ratio: 16 / 10;
        border-radius: 0;
        min-height: 0;
        opacity: 1;
        order: -1;
        width: 100%;
    }

    .wp-block-blacksheep-category-image-split .cis__media--default {
        display: none;
    }

    .wp-block-blacksheep-category-image-split .cis__dots {
        display: flex;
    }
}

/* ---- Reduced motion --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .wp-block-blacksheep-category-image-split .cis__content,
    .wp-block-blacksheep-category-image-split .cis__media,
    .wp-block-blacksheep-category-image-split .cis__dots button {
        transition: none;
    }

    .wp-block-blacksheep-category-image-split .cis__viewport {
        scroll-behavior: auto;
    }
}