/**
 * Brand Card Grid - shared front-end + editor styles.
 * Desktop: a 2-column grid of light cards. Each card holds a circular image
 * whose centre sits on the card's inner corner; the card clips it to a
 * quadrant, so the four inner corners read as one circle at the grid centre.
 * Mobile: the grid becomes a horizontal swipe pager and the image moves to a
 * full circle in each card's bottom-right corner.
 * Colours/fonts resolve from Black Sheep theme tokens.
 */
.wp-block-blacksheep-brand-card-grid {
    --bcg-surface: var(--surface-alt-color, #f4f4f4);
    --bcg-title: var(--primary-button-color, var(--primary-color, #69b828));
    --bcg-body: var(--body-text-color, #202020);
    --bcg-btn-bg: var(--primary-button-color, var(--primary-color, #69b828));
    --bcg-btn-text: var(--primary-button-text-color, var(--primary-text-color, #ffffff));
    --bcg-empty-bg: var(--surface-color, #ffffff);
    --bcg-empty-text: var(--muted-text-color, #a8a39d);
    --bcg-dot: var(--border-color, #c9cdc9);
    --bcg-display: var(--header-font, "Poppins", Arial, sans-serif);
    --bcg-ui: var(--body-font, "Inter", Arial, sans-serif);

    --bcg-circle: 142px;
    --bcg-inner: clamp(96px, 12vw, 160px);
    --bcg-gap: 10px;
    --bcg-radius: 0px;

    display: block;
}

.wp-block-blacksheep-brand-card-grid .bcg {
    box-sizing: border-box;
    margin-inline: auto;
    max-width: 1024px;
    width: 100%;
}

.wp-block-blacksheep-brand-card-grid .bcg__grid {
    display: grid;
    gap: var(--bcg-gap);
    grid-template-columns: 1fr 1fr;
}

/* ---- Card -------------------------------------------------------------- */
.wp-block-blacksheep-brand-card-grid .bcg__card {
    background: var(--bcg-surface);
    border-radius: var(--bcg-radius);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 12px;
    justify-content: center;
    min-height: 230px;
    overflow: hidden;
    padding: clamp(20px, 2.4vw, 28px);
    position: relative;
}

.wp-block-blacksheep-brand-card-grid .bcg__content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    z-index: 1;
}

/* Inner-side padding clears the corner image (left column → image right). */
.wp-block-blacksheep-brand-card-grid .bcg__card:nth-child(odd) {
    padding-right: var(--bcg-inner);
}

.wp-block-blacksheep-brand-card-grid .bcg__card:nth-child(even) {
    padding-left: var(--bcg-inner);
}

/* ---- Corner image (centre of circle pinned to the inner corner) -------- */
.wp-block-blacksheep-brand-card-grid .bcg__media {
    background: var(--bcg-empty-bg);
    border-radius: 50%;
    height: var(--bcg-circle);
    overflow: hidden;
    position: absolute;
    width: var(--bcg-circle);
    z-index: 0;
}

.wp-block-blacksheep-brand-card-grid .bcg__media img {
    height: 100%;
    inset: 0;
    object-fit: cover;
    position: absolute;
    width: 100%;
}

.wp-block-blacksheep-brand-card-grid .bcg__media-ph {
    align-items: center;
    color: var(--bcg-empty-text);
    display: flex;
    height: 100%;
    inset: 0;
    justify-content: center;
    position: absolute;
    width: 100%;
}

/* Desktop/tablet: only the generic image (the centre circle) shows.
   Each card's own image is held back until the mobile pager. */
.wp-block-blacksheep-brand-card-grid .bcg__img--own {
    display: none;
}

.wp-block-blacksheep-brand-card-grid .bcg__media-ph svg {
    height: 30px;
    stroke: var(--bcg-empty-text);
    width: 30px;
}

/* Desktop/tablet only: pin the circle's centre to the card's inner corner
   (offset by half the gap so the four quadrants stay aligned across the gap).
   Scoped to min-width so it can't fight the mobile bottom-right placement. */
@media (min-width: 601px) {
    .wp-block-blacksheep-brand-card-grid .bcg__card:nth-child(odd) .bcg__media {
        right: calc(var(--bcg-circle) / -2 - var(--bcg-gap) / 2);
    }

    .wp-block-blacksheep-brand-card-grid .bcg__card:nth-child(even) .bcg__media {
        left: calc(var(--bcg-circle) / -2 - var(--bcg-gap) / 2);
    }

    .wp-block-blacksheep-brand-card-grid .bcg__card:nth-child(4n + 1) .bcg__media,
    .wp-block-blacksheep-brand-card-grid .bcg__card:nth-child(4n + 2) .bcg__media {
        bottom: calc(var(--bcg-circle) / -2 - var(--bcg-gap) / 2);
    }

    .wp-block-blacksheep-brand-card-grid .bcg__card:nth-child(4n + 3) .bcg__media,
    .wp-block-blacksheep-brand-card-grid .bcg__card:nth-child(4n) .bcg__media {
        top: calc(var(--bcg-circle) / -2 - var(--bcg-gap) / 2);
    }
}

/* ---- Text + button ----------------------------------------------------- */
.wp-block-blacksheep-brand-card-grid .bcg__title {
    color: var(--bcg-title);
    font-family: var(--bcg-display);
    font-size: clamp(20px, 2vw, 24px);
    font-weight: 700;
    line-height: 1.05;
    margin: 0;
    text-transform: uppercase;
}

.wp-block-blacksheep-brand-card-grid .bcg__body {
    color: var(--bcg-body);
    font-family: var(--bcg-display);
    font-size: 16px;
    line-height: 1.4;
    margin: 0;
}

.wp-block-blacksheep-brand-card-grid .bcg__btn {
    align-self: flex-start;
    background: var(--bcg-btn-bg);
    border: 1px solid var(--bcg-btn-text);
    border-radius: 6px;
    color: var(--bcg-btn-text);
    cursor: pointer;
    display: inline-flex;
    font-family: var(--bcg-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-brand-card-grid .bcg__btn:hover {
    background: var(--bcg-btn-text);
    color: var(--bcg-btn-bg);
}

.wp-block-blacksheep-brand-card-grid .bcg__btn:focus-visible {
    outline: 2px solid var(--bcg-btn-bg);
    outline-offset: 2px;
}

/* ---- Dots (mobile only) ----------------------------------------------- */
.wp-block-blacksheep-brand-card-grid .bcg__dots {
    display: none;
    gap: 10px;
    justify-content: center;
    padding: 16px 0 2px;
}

.wp-block-blacksheep-brand-card-grid .bcg__dots button {
    background: var(--bcg-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-brand-card-grid .bcg__dots button.is-active {
    background: var(--bcg-btn-bg);
    border-radius: 5px;
    width: 26px;
}

.wp-block-blacksheep-brand-card-grid .bcg__dots button:focus-visible {
    outline: 2px solid var(--bcg-btn-bg);
    outline-offset: 2px;
}

/* ---- Mobile (phones): swipe pager, image bottom-right per card.
   Tablets and up keep the grid with the generic centre image. -------------- */
@media (max-width: 600px) {
    .wp-block-blacksheep-brand-card-grid .bcg__grid {
        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-brand-card-grid .bcg__grid::-webkit-scrollbar {
        display: none;
    }

    .wp-block-blacksheep-brand-card-grid .bcg__card,
    .wp-block-blacksheep-brand-card-grid .bcg__card:nth-child(odd),
    .wp-block-blacksheep-brand-card-grid .bcg__card:nth-child(even) {
        min-width: 100%;
        padding: clamp(20px, 6vw, 28px);
        padding-bottom: 150px;
        scroll-snap-align: center;
    }

    /* Full circle in the bottom-right corner, per card. */
    .wp-block-blacksheep-brand-card-grid .bcg__card .bcg__media {
        --bcg-circle: 124px;
        bottom: 20px;
        left: auto;
        right: 20px;
        top: auto;
    }

    /* Mobile: each card's own image takes over; generic is the fallback. */
    .wp-block-blacksheep-brand-card-grid .bcg__img--own {
        display: block;
    }

    .wp-block-blacksheep-brand-card-grid .bcg__media.has-own .bcg__img--generic {
        display: none;
    }

    .wp-block-blacksheep-brand-card-grid .bcg__dots {
        display: flex;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wp-block-blacksheep-brand-card-grid .bcg__btn,
    .wp-block-blacksheep-brand-card-grid .bcg__dots button {
        transition: none;
    }

    .wp-block-blacksheep-brand-card-grid .bcg__grid {
        scroll-behavior: auto;
    }
}