/* ============================================================
   Card Carousel — card-carousel.css
   ============================================================ */

/* ── CSS Custom-Property defaults ── */
.cc-stage {
    --cc-center-w:     50%;
    --cc-side-w:       30%;
    --cc-back-w:       18%;
    --cc-left-x:      -5%;
    --cc-right-x:      5%;
    --cc-back-left-x:  22%;
    --cc-back-right-x: 47%;
    --cc-back-top:     5%;
    --cc-center-color: #22c55e;
    --cc-left-color:   #8b5cf6;
    --cc-right-color:  #3b82f6;
    --cc-back-color:   #a5b4fc;
}

/* ── Wrapper ── */
.cc-wrapper {
    position: relative;
    width: 100%;
    user-select: none;
    touch-action: pan-y;
    padding-bottom: 44px;
}

/* ── Stage: height is auto — driven by tallest card ── */
.cc-stage {
    position: relative;
    width: 100%;
    min-height: 200px;
}

/* ── Base card ── */
.cc-card {
    position: absolute;
    overflow: hidden;
    border-radius: 12px;
    background-color: var(--card-color, var(--cc-center-color));
    display: block;
    cursor: pointer;
    box-sizing: border-box;
    border: 0px solid transparent;
    will-change: transform, opacity, filter, left, top, width;
}

/* Smooth transition */
.cc-card.cc-animating {
    transition:
        left        var(--cc-transition, 600ms) cubic-bezier(0.4, 0, 0.2, 1),
        top         var(--cc-transition, 600ms) cubic-bezier(0.4, 0, 0.2, 1),
        width       var(--cc-transition, 600ms) cubic-bezier(0.4, 0, 0.2, 1),
        opacity     var(--cc-transition, 600ms) cubic-bezier(0.4, 0, 0.2, 1),
        filter      var(--cc-transition, 600ms) cubic-bezier(0.4, 0, 0.2, 1),
        transform   var(--cc-transition, 600ms) cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Card image: real <img> tag, full view, no crop ── */
.cc-card__img {
    display: block;
    width: 100%;
    height: auto;           /* height auto = image sets its own height */
    object-fit: contain;    /* FULL image visible, no crop */
    object-position: center center;
    border-radius: inherit;
    pointer-events: none;
}

/* ── Full-cover link overlay ── */
.cc-card__link {
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: inherit;
    display: block;
    text-decoration: none;
    outline-offset: 3px;
}

/* ── Card body: only renders when title/desc exist (PHP-controlled) ── */
.cc-card__body {
    position: relative;
    z-index: 2;
    padding: .6rem .85rem;
    background: none;       /* absolutely no background, no gradient, no shadow */
    box-shadow: none;
}

.cc-card__title {
    margin: 0 0 .2rem;
    font-size: 1rem;
    font-weight: 700;
    color: #111827;
    line-height: 1.3;
}

.cc-card__title:last-child { margin-bottom: 0; }

.cc-card__desc {
    margin: 0;
    font-size: .82rem;
    color: #374151;
}

/* ══════════════════════════════════════════════
   SLOT STATES — JS sets data-slot on each card
   ══════════════════════════════════════════════ */

/* SLOT 0 — back-left */
.cc-card[data-slot="0"] {
    width:   var(--cc-back-w);
    left:    var(--cc-back-left-x);
    top:     var(--cc-back-top);
    z-index: 1;
    opacity: 0.85;
    filter:  blur(1px);
    transform: none;
    background-color: var(--card-color, var(--cc-back-color));
}

/* SLOT 1 — left */
.cc-card[data-slot="1"] {
    width:   var(--cc-side-w);
    left:    var(--cc-left-x);
    top:     50%;
    transform: translateY(-50%);
    z-index: 2;
    opacity: 1;
    filter:  blur(0px);
    background-color: var(--card-color, var(--cc-left-color));
}

/* SLOT 2 — center (active) */
.cc-card[data-slot="2"] {
    width:   var(--cc-center-w);
    left:    50%;
    top:     50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    opacity: 1;
    filter:  none;
    background-color: var(--card-color, var(--cc-center-color));
}

/* SLOT 3 — right */
.cc-card[data-slot="3"] {
    width:   var(--cc-side-w);
    right:   var(--cc-right-x);
    left:    auto;
    top:     50%;
    transform: translateY(-50%);
    z-index: 2;
    opacity: 1;
    filter:  blur(0px);
    background-color: var(--card-color, var(--cc-right-color));
}

/* SLOT 4 — back-right */
.cc-card[data-slot="4"] {
    width:   var(--cc-back-w);
    left:    var(--cc-back-right-x);
    top:     var(--cc-back-top);
    z-index: 1;
    opacity: 0.85;
    filter:  blur(1px);
    transform: none;
    background-color: var(--card-color, var(--cc-back-color));
}

/* Hidden (< 5 cards) */
.cc-card[data-slot="hidden"] {
    opacity: 0;
    pointer-events: none;
    z-index: 0;
}

/* ── Arrows ── */
.cc-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: background 0.2s, transform 0.2s;
    padding: 0;
}
.cc-arrow:hover {
    background: rgba(0,0,0,0.6);
    transform: translateY(-50%) scale(1.08);
}
.cc-arrow--prev { left: 10px; }
.cc-arrow--next { right: 10px; }
.cc-arrow svg   { stroke: #fff; display: block; pointer-events: none; }

/* ── Dots ── */
.cc-dots {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    align-items: center;
}
.cc-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    border: none;
    background: #6b7280;
    cursor: pointer;
    padding: 0;
    transition: background 0.25s, transform 0.25s;
}
.cc-dot.is-active {
    background: #111827;
    transform: scale(1.4);
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .cc-stage {
        --cc-center-w: 68%;
        --cc-side-w:   20%;
        --cc-back-w:   10%;
    }
}
@media (max-width: 480px) {
    .cc-stage {
        --cc-center-w: 88%;
        --cc-side-w:   0%;
        --cc-back-w:   0%;
    }
    .cc-card[data-slot="0"],
    .cc-card[data-slot="1"],
    .cc-card[data-slot="3"],
    .cc-card[data-slot="4"] {
        opacity: 0;
        pointer-events: none;
    }
}