.ccb-carousel {
    margin: 24px 0;
}

.ccb-track {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 0;
}

.ccb-box {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    display: block;
    text-decoration: none;
    color: #fff;
    background-color: #2b2b2b;
}

.ccb-face {
    position: absolute;
    inset: 0;
    background-color: #2b2b2b;
    background-size: cover;
    background-position: center;
    transition: transform var(--ccb-duration, 0.6s) ease, opacity var(--ccb-duration, 0.6s) ease, clip-path var(--ccb-duration, 0.6s) ease;
    backface-visibility: hidden;
}

.ccb-face.ccb-no-image {
    background-color: #333;
}

/* Sane appearance even before JS initializes (or if it fails to run):
   the real content face shows, the empty buffer face stays hidden. */
.ccb-face-current {
    opacity: 1;
    z-index: 2;
}

.ccb-face-buffer {
    opacity: 0;
    z-index: 1;
    pointer-events: none;
}

.ccb-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 12px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0));
    z-index: 1;
    display: block;
}

.ccb-title {
    display: block;
    margin: 0;
    color: #fff;
    font-size: 0.95rem;
    line-height: 1.3;
}

/* Inside the block editor's live preview, boxes are plain divs, not links. */
.ccb-block-preview .ccb-box {
    cursor: default;
}