/* Category Carousel */

/* Clip box opens with side padding so the hover shadow's tail clears the edge.
   The side padding is cancelled on the track via a matching negative margin so
   clientWidth — and therefore the slide-width math — stays unaffected. The glow
   halo itself is inset + compact (see hover variants) so it never relies on a
   large spill. Mirrors the featured-pages-carousel module. */
.cc-carousel {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: var(--cc-max-width, none);
    padding: 6px 12px 1rem;
    margin: 2rem auto;
}

/* Viewport — the clip window around the track. It owns the negative side
   margin that cancels the root's 12px side padding, so the slides fill the
   root's full width (and clientWidth math stays unaffected). This margin moved
   here from the track when the viewport wrapper was introduced; leaving it on
   the track made the track overflow the viewport and let the root clip slice
   the cards' side edges. */
.cc-viewport {
    margin: 0 -12px;
}

/* Track — container scroll position is driven by the rAF spring engine, so
   the transform carries no CSS transition (animation is per-frame in JS). */
.cc-track {
    display: flex;
    will-change: transform;
}

/* Slide — each slide owns a per-slide translate that the SlideLooper toggles
   off-screen to wrap the loop. GPU-composited to avoid repaint cost. */
.cc-slide {
    flex: 0 0 auto;
    box-sizing: border-box;
    transform: translate3d(0, 0, 0);
    will-change: transform;
}

/* Card */
.cc-card {
    background: var(--cc-card-bg, #fff);
    border-radius: var(--cc-border-radius, 12px);
    overflow: hidden;
    height: 100%;
    border: 1px solid var(--border-color);
    transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

/* Card Image */
.cc-card-image {
    position: relative;
    height: var(--cc-image-height, 220px);
    overflow: hidden;
}

.cc-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.cc-card-image-link {
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.cc-card-image::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.15), transparent);
    pointer-events: none;
}

/* No Image Placeholder */
.cc-no-image {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--surface-sunken);
}

.cc-no-image i {
    font-size: 2.5rem;
    color: var(--text-muted);
}

/* Card Body */
.cc-card-body {
    padding: 12px 16px 16px;
}

/* Category Name */
.cc-category-name {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 6px;
}

/* Page Title */
.cc-page-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--cc-title-color, #2a3530);
    text-decoration: none;
    line-height: 1.4;
    transition: color 0.2s ease;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cc-page-title:hover {
    color: var(--cc-title-hover-color, #1d6b5e);
    text-decoration: underline;
}

/* Arrows */
.cc-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.9);
    color: var(--text-ink);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
    transition: background 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
    opacity: 0;
}

.cc-carousel:hover .cc-arrow {
    opacity: 1;
}

.cc-arrow:hover {
    background: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.cc-arrow svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cc-arrow-prev {
    left: 8px;
}

.cc-arrow-next {
    right: 8px;
}

.cc-arrow:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.cc-carousel:hover .cc-arrow:disabled {
    opacity: 0.3;
}

/* Dots */
.cc-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 16px 0 0;
}

.cc-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    background: var(--border-strong, #c4ccc8);
    cursor: pointer;
    padding: 0;
    transition: background 0.2s ease, transform 0.2s ease;
}

.cc-dot:hover {
    background: var(--text-muted);
}

.cc-dot.cc-dot-active {
    background: var(--cc-dot-active-color, var(--primary-color));
    transform: scale(1.2);
}

/* Vertical mode. The viewport wrapper is the clip window (JS pins its height
   to one viewport; overflow:hidden clips the off-screen slides INSIDE it), so
   the next card's edge can never leak past the viewport. The track keeps its
   natural content height and slides freely inside the viewport — the
   SlideLooper's per-slide wrap translates are never disturbed. The dots row is
   lifted out of flow to the root's bottom padding band, beneath the viewport,
   so the clip and the dots are entirely separate layers. */
.cc-carousel[data-mode="vertical"] {
    padding-bottom: 40px;
}

.cc-carousel[data-mode="vertical"] .cc-viewport {
    overflow: hidden;
    /* Headroom matches the JS LIFT_MARGIN so the lift hover effect (the card
       rising translateY(-4px)) is never sliced by the viewport's top clip. The
       viewport height already accounts for this band (see measureLayout), so
       pushing the track down here keeps the snap math intact. */
    padding-top: 6px;
}

.cc-carousel[data-mode="vertical"] .cc-track {
    flex-direction: column;
}

.cc-carousel[data-mode="vertical"] .cc-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 8px;
    padding: 0;
}

.cc-carousel[data-mode="vertical"] .cc-arrow-prev {
    top: 13px;
    left: 50%;
    transform: translateX(-50%) rotate(90deg);
}

.cc-carousel[data-mode="vertical"] .cc-arrow-next {
    top: auto;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%) rotate(90deg);
}

/* Dragging state */
.cc-track.cc-dragging {
    transition: none;
    cursor: grabbing;
}

.cc-track.cc-draggable {
    cursor: grab;
}

/* Dark mode */
[data-bs-theme="dark"] .cc-card {
    background: #2f3833;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-bs-theme="dark"] .cc-category-name {
    color: var(--text-muted);
}

[data-bs-theme="dark"] .cc-page-title {
    color: var(--cc-title-color, #d7dedb);
}

[data-bs-theme="dark"] .cc-page-title:hover {
    color: var(--cc-title-hover-color, var(--primary-color));
}

[data-bs-theme="dark"] .cc-arrow {
    background: rgba(30, 30, 30, 0.9);
    color: #d7dedb;
}

[data-bs-theme="dark"] .cc-arrow:hover {
    background: #161c1a;
}

[data-bs-theme="dark"] .cc-no-image {
    background-color: #161c1a;
}

[data-bs-theme="dark"] .cc-no-image i {
    color: var(--text-muted);
}

[data-bs-theme="dark"] .cc-dot {
    background: var(--border-strong);
}

[data-bs-theme="dark"] .cc-dot:hover {
    background: var(--text-muted);
}

[data-bs-theme="dark"] .cc-dot.cc-dot-active {
    background: var(--cc-dot-active-color, var(--primary-color));
}

/* Responsive */
@media (max-width: 767px) {
    .cc-card-body {
        padding: 10px 12px 14px;
    }

    .cc-page-title {
        font-size: 0.85rem;
    }

    .cc-category-name {
        font-size: 0.65rem;
    }

    .cc-arrow {
        width: 44px;
        height: 44px;
    }

    .cc-arrow svg {
        width: 16px;
        height: 16px;
    }
}

/* Transparent Background Variant */
.cc-card.cc-transparent {
    background: transparent;
    box-shadow: none;
}

.cc-card.cc-transparent:hover {
    box-shadow: none;
}

[data-bs-theme="dark"] .cc-card.cc-transparent {
    background: transparent;
    box-shadow: none;
}

[data-bs-theme="dark"] .cc-card.cc-transparent:hover {
    box-shadow: none;
}

/* Frameless Variant */
.cc-card.cc-frameless {
    border: none;
    box-shadow: none;
}

.cc-card.cc-frameless:hover {
    box-shadow: none;
    border: none;
}

[data-bs-theme="dark"] .cc-card.cc-frameless {
    box-shadow: none;
}

[data-bs-theme="dark"] .cc-card.cc-frameless:hover {
    box-shadow: none;
}

/* Full Images Mode */
.cc-card.cc-card-full {
    position: relative;
}

.cc-card.cc-card-full .cc-card-image::after {
    display: none;
}

.cc-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 40px 15px 15px;
    background: linear-gradient(to top, rgba(0, 0, 0, 1), transparent);
    z-index: 2;
}

.cc-category-name-overlay {
    color: rgba(255, 255, 255, 0.8);
}

.cc-page-title-overlay {
    color: #fff;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cc-page-title-overlay:hover {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: underline;
}

[data-bs-theme="dark"] .cc-category-name-overlay {
    color: rgba(255, 255, 255, 0.8);
}

[data-bs-theme="dark"] .cc-page-title-overlay {
    color: #fff;
}

[data-bs-theme="dark"] .cc-page-title-overlay:hover {
    color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 767px) {
    .cc-card-overlay {
        padding: 30px 12px 12px;
    }

    .cc-page-title-overlay {
        font-size: 0.85rem;
    }

    .cc-category-name-overlay {
        font-size: 0.65rem;
    }
}

/* ============================================
   HOVER-EFFECT VARIANTS (data-hover-effect)
   ============================================ */
/* Card hover is opt-in: the chosen effect is read from the root container's
   data-hover-effect attribute. Mirrors the team module family. Default "none"
   keeps the card inert until the editor picks an effect. Selectors are scoped
   to .cc-carousel so the variants never leak into other modules. */

.cc-carousel[data-hover-effect="none"] .cc-card {
    transition: none;
}

/* HOVER: lift (the card rises with a deeper shadow). Shadow blur stays compact
   so its tail clears the carousel's side breathing room. */
.cc-carousel[data-hover-effect="lift"] .cc-card:hover {
    transform: translateY(-4px);
    border-color: var(--border-strong);
    box-shadow: 0 2px 4px rgba(26, 36, 33, 0.06),
                0 8px 16px rgba(26, 36, 33, 0.12);
}

.cc-carousel[data-hover-effect="lift"] .cc-card:hover .cc-page-title {
    color: var(--cc-title-hover-color, var(--primary-color));
}

/* HOVER: overlay (a tonal wash slides over the card body) */
.cc-carousel[data-hover-effect="overlay"] .cc-card {
    position: relative;
    overflow: hidden;
}

.cc-carousel[data-hover-effect="overlay"] .cc-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--primary-tint, rgba(29, 107, 94, 0.10));
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 0;
}

.cc-carousel[data-hover-effect="overlay"] .cc-card > * {
    position: relative;
    z-index: 1;
}

.cc-carousel[data-hover-effect="overlay"] .cc-card:hover::after {
    opacity: 1;
}

.cc-carousel[data-hover-effect="overlay"] .cc-card:hover {
    border-color: var(--primary-color);
}

/* HOVER: zoom (photo crops in, card stays put) */
.cc-carousel[data-hover-effect="zoom"] .cc-card:hover .cc-card-image img {
    transform: scale(1.08);
}

.cc-carousel[data-hover-effect="zoom"] .cc-card:hover {
    border-color: var(--border-strong);
}

/* HOVER: glow (a teal halo earned with an inset ring + tight outer glow).
   The ring is painted by an ::after layer stacked ABOVE the card content
   (z-index: 2) so the photo does not cover the halo. The outer glow stays
   compact so its tail clears the breathing room. The ring sits inset so it
   never clips at the carousel edge — readable even at the first/last cards
   that sit flush against the carousel border. */
.cc-carousel[data-hover-effect="glow"] .cc-card {
    position: relative;
    overflow: hidden;
}

.cc-carousel[data-hover-effect="glow"] .cc-card::after {
    content: "";
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 0 2px var(--primary-color);
    background: var(--primary-tint, rgba(29, 107, 94, 0.10));
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 2;
}

.cc-carousel[data-hover-effect="glow"] .cc-card:hover::after {
    opacity: 1;
}

.cc-carousel[data-hover-effect="glow"] .cc-card:hover {
    border-color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(29, 107, 94, 0.28);
}

/* HOVER: tilt (photo wakes up in full colour) */
.cc-carousel[data-hover-effect="tilt"] .cc-card-image img {
    filter: grayscale(1) contrast(0.95) brightness(1.02);
    transition: filter 0.45s ease, transform 0.45s ease;
}

.cc-carousel[data-hover-effect="tilt"] .cc-card:hover .cc-card-image img {
    filter: grayscale(0) contrast(1) brightness(1);
    transform: scale(1.06);
}

.cc-carousel[data-hover-effect="tilt"] .cc-card:hover {
    border-color: var(--border-strong);
}

/* Dark mode — the shadow-bearing effects read deeper against dark cards. */
[data-bs-theme="dark"] .cc-carousel[data-hover-effect="lift"] .cc-card:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
}

[data-bs-theme="dark"] .cc-carousel[data-hover-effect="glow"] .cc-card:hover {
    box-shadow: 0 4px 12px rgba(29, 107, 94, 0.4);
}

/* ============================================
   REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .cc-card,
    .cc-card-image img,
    .cc-arrow,
    .cc-dot {
        transition: none;
    }

    .cc-card:hover {
        box-shadow: none;
    }

    .cc-card:hover .cc-card-image img {
        transform: none;
    }

    .cc-dot.cc-dot-active {
        transform: none;
    }
}