/**
 * Category Carousel for Creative Elements - front styles
 * Prefix: zdcc
 */

.zdcc-root {
    --zdcc-gap: 18px;
    --zdcc-per-d: 5;
    --zdcc-per-t: 3;
    --zdcc-per-m: 2;
    --zdcc-peek-d: 30px;
    --zdcc-peek-t: 24px;
    --zdcc-peek-m: 24px;
    width: 100%;
}

/* Active per-view / peek resolve from the breakpoint source vars so the
   media queries always win over an inline value. */
.zdcc {
    --zdcc-per: var(--zdcc-per-d);
    --zdcc-peek: var(--zdcc-peek-d);
    position: relative;
    width: 100%;
}

@media (max-width: 1024px) {
    .zdcc {
        --zdcc-per: var(--zdcc-per-t);
        --zdcc-peek: var(--zdcc-peek-t);
    }
}

@media (max-width: 767px) {
    .zdcc {
        --zdcc-per: var(--zdcc-per-m);
        --zdcc-peek: var(--zdcc-peek-m);
    }
}

/* ---- heading ------------------------------------------------------- */

.zdcc-header {
    margin-bottom: 34px;
}

.zdcc-eyebrow {
    display: block;
    margin: 0 0 6px;
    color: #6b7280;
}

.zdcc-heading {
    margin: 0;
    color: #111827;
    line-height: 1.15;
}

/* ---- viewport / track --------------------------------------------- */

.zdcc-viewport {
    overflow: hidden;
    width: 100%;
}

.zdcc-track {
    display: flex;
    gap: var(--zdcc-gap);
    will-change: transform;
    transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
    touch-action: pan-y;
}

.zdcc-slide {
    flex: 0 0 calc(
        (100% - (var(--zdcc-per) - 1) * var(--zdcc-gap) - var(--zdcc-peek)) / var(--zdcc-per)
    );
    min-width: 0;
    box-sizing: border-box;
}

/* When there is nothing to scroll, drop the peek so cards fill the row. */
.zdcc.zdcc-nostretch .zdcc-slide {
    flex-basis: calc(
        (100% - (var(--zdcc-per) - 1) * var(--zdcc-gap)) / var(--zdcc-per)
    );
}

/* ---- card ---------------------------------------------------------- */

.zdcc-card {
    --zdcc-lift: 8px;
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 14px;
    overflow: hidden;
    background: transparent;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-sizing: border-box;
}

.zdcc-cardlink {
    display: block;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.zdcc-media {
    position: relative;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
}

.zdcc-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.45s ease;
}

/* Image aspect ratios (ignored when title sits below AND custom height set) */
.zdcc-ratio--portrait  .zdcc-media { aspect-ratio: 3 / 4; }
.zdcc-ratio--tall      .zdcc-media { aspect-ratio: 2 / 3; }
.zdcc-ratio--square    .zdcc-media { aspect-ratio: 1 / 1; }
.zdcc-ratio--landscape .zdcc-media { aspect-ratio: 4 / 3; }
.zdcc-ratio--wide      .zdcc-media { aspect-ratio: 16 / 9; }
.zdcc-ratio--custom    .zdcc-media { aspect-ratio: auto; }

/* Fallback for browsers without aspect-ratio support */
@supports not (aspect-ratio: 1 / 1) {
    .zdcc-media { min-height: 180px; }
}

.zdcc-ph {
    font-size: 13px;
    color: #9ca3af;
    padding: 24px;
    text-align: center;
}

/* Hover colour overlay ---------------------------------------------- */

.zdcc-overlay {
    position: absolute;
    inset: 0;
    background: transparent;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 2;
}

.zdcc-hoveroverlay .zdcc-card:hover .zdcc-overlay {
    opacity: 1;
}

/* ---- title --------------------------------------------------------- */

.zdcc-title {
    display: flex;
    align-items: center;
    margin: 0;
    color: #1f2937;
    line-height: 1.3;
    transition: color 0.25s ease;
}

.zdcc-title--below {
    padding-top: 12px;
    justify-content: center;
    text-align: center;
}

/* Title over the image */
.zdcc-title--overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    padding: 16px 14px;
    color: #ffffff;
    justify-content: center;
    text-align: center;
}

.zdcc-titlescrim {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 60%;
    z-index: 2;
    background: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* Reveal-on-hover variant */
.zdcc-tpos--reveal .zdcc-title--overlay,
.zdcc-tpos--reveal .zdcc-titlescrim {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.zdcc-tpos--reveal .zdcc-titlescrim {
    transform: none;
}

.zdcc-tpos--reveal .zdcc-card:hover .zdcc-title--overlay,
.zdcc-tpos--reveal .zdcc-card:hover .zdcc-titlescrim {
    opacity: 1;
    transform: none;
}

/* ---- hover: zoom & lift ------------------------------------------- */

.zdcc-hoverzoom .zdcc-card:hover .zdcc-img {
    transform: scale(1.08);
}

.zdcc-hoverlift .zdcc-card:hover {
    transform: translateY(calc(var(--zdcc-lift) * -1));
    box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.45);
}

/* ---- resting shadow ----------------------------------------------- */

.zdcc-shadow--sm .zdcc-card { box-shadow: 0 2px 10px -6px rgba(0, 0, 0, 0.3); }
.zdcc-shadow--md .zdcc-card { box-shadow: 0 10px 26px -16px rgba(0, 0, 0, 0.4); }

/* ---- arrows -------------------------------------------------------- */

.zdcc-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: #111827;
    cursor: pointer;
    z-index: 10;
    transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.zdcc-arrowshadow .zdcc-arrow {
    box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.4);
}

.zdcc-arrow svg {
    width: 45%;
    height: 45%;
}

.zdcc-arrow:disabled {
    opacity: 0.35;
    cursor: default;
}

.zdcc-prev { left: 8px; }
.zdcc-next { right: 8px; }

.zdcc-arrows--outside .zdcc-prev { left: -22px; }
.zdcc-arrows--outside .zdcc-next { right: -22px; }

.zdcc-arrows--top-right .zdcc-arrow {
    top: -58px;
    transform: none;
}
.zdcc-arrows--top-right .zdcc-prev { left: auto; right: 58px; }
.zdcc-arrows--top-right .zdcc-next { right: 8px; }

.zdcc-arrows--bottom-center .zdcc-arrow {
    top: auto;
    bottom: -56px;
    transform: none;
}
.zdcc-arrows--bottom-center .zdcc-prev { left: calc(50% - 52px); }
.zdcc-arrows--bottom-center .zdcc-next { right: calc(50% - 52px); }

/* ---- pagination ---------------------------------------------------- */

.zdcc-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
}

.zdcc-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #d1d5db;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.zdcc-dot.is-active {
    background: #111827;
    transform: scale(1.25);
}

.zdcc-pagination--bar {
    width: 100%;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
}

.zdcc-bar {
    position: relative;
    width: 100%;
    height: 4px;
    border-radius: 4px;
    background: #d1d5db;
    overflow: hidden;
}

.zdcc-bar-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    border-radius: 4px;
    background: #111827;
    transition: transform 0.35s ease, width 0.35s ease;
}

/* ---- drag / states ------------------------------------------------- */

.zdcc-draggable .zdcc-viewport { cursor: grab; }
.zdcc-dragging .zdcc-viewport { cursor: grabbing; }
.zdcc-dragging .zdcc-track { transition: none; }
.zdcc-dragging .zdcc-cardlink { pointer-events: none; }

/* ---- entrance animations ------------------------------------------ */

.zdcc-anim--fade .zdcc-slide,
.zdcc-anim--fade-up .zdcc-slide,
.zdcc-anim--zoom .zdcc-slide {
    opacity: 0;
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.zdcc-anim--fade-up .zdcc-slide { transform: translateY(24px); }
.zdcc-anim--zoom .zdcc-slide { transform: scale(0.92); }

.zdcc-inview.zdcc-anim--fade .zdcc-slide,
.zdcc-inview.zdcc-anim--fade-up .zdcc-slide,
.zdcc-inview.zdcc-anim--zoom .zdcc-slide {
    opacity: 1;
    transform: none;
}

/* ---- editor placeholder ------------------------------------------- */

.zdcc-empty {
    padding: 28px;
    text-align: center;
    color: #9ca3af;
    border: 1px dashed #d1d5db;
    border-radius: 12px;
}

@media (prefers-reduced-motion: reduce) {
    .zdcc-track,
    .zdcc-img,
    .zdcc-card,
    .zdcc-slide {
        transition: none !important;
    }
}