/**
 * ITS Media Carousel
 *
 * Slide widths are driven by --its-mc-per-view, which the JS sets per
 * breakpoint from the widget's responsive Slides Per View control.
 */

.its-media-carousel {
    --its-mc-gap: 16px;
    --its-mc-per-view: 1;
    position: relative;
}

.its-media-carousel__viewport {
    overflow: hidden;
    width: 100%;
}

.its-media-carousel__track {
    display: flex;
    gap: var(--its-mc-gap);
    will-change: transform;
    transition: transform 0.4s ease;
}

.its-media-carousel__slide {
    /* Each slide takes an equal share of the viewport minus the gaps. */
    flex: 0 0 calc(
        (100% - (var(--its-mc-gap) * (var(--its-mc-per-view) - 1))) / var(--its-mc-per-view)
    );
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.its-media-carousel__figure {
    display: block;
    width: 100%;
    /* Height comes from the widget's responsive Height control, which writes
       --its-mc-height per breakpoint. */
    height: var(--its-mc-height, 460px);
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: transparent;
    border: none;
}

.its-media-carousel__figure--button {
    cursor: pointer;
}

.its-media-carousel__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Below the tablet breakpoint the slide is roughly as wide as the screen, so
   any fixed height crops a portrait image hard — on a mugshot that removes the
   face and leaves only hair. Drop the forced height and let the image keep its
   own aspect ratio, which is what Elementor's Media Carousel effectively does.
   Overrides the per-post CSS Elementor generates from the Height control. */
@media (max-width: 767px) {
    .its-media-carousel__figure {
        height: auto !important;
    }

    .its-media-carousel__image {
        height: auto;
        object-fit: contain;
    }
}

.its-media-carousel__caption {
    margin-top: 10px;
    line-height: 1.5;
}

/* ── Navigation arrows ───────────────────────────────────── */

.its-media-carousel__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    cursor: pointer;
}

.its-media-carousel__nav:hover,
.its-media-carousel__nav:focus-visible {
    background: rgba(0, 0, 0, 0.7);
}

.its-media-carousel__nav:focus-visible {
    outline: 2px solid var(--color6, #fff);
    outline-offset: 2px;
}

.its-media-carousel__nav--prev {
    left: 8px;
}

.its-media-carousel__nav--next {
    right: 8px;
}

.its-media-carousel__nav[disabled] {
    opacity: 0.35;
    cursor: default;
}

/* ── Pagination dots ─────────────────────────────────────── */

.its-media-carousel__dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

.its-media-carousel__dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.25);
    cursor: pointer;
}

.its-media-carousel__dot.is-active {
    background: var(--color2, #333);
}

.its-media-carousel__dot:focus-visible {
    outline: 2px solid var(--color6, #333);
    outline-offset: 2px;
}

/* ── Lightbox ────────────────────────────────────────────── */

.its-media-carousel__lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    background: rgba(0, 0, 0, 0.85);
}

.its-media-carousel__lightbox[hidden] {
    display: none;
}

.its-media-carousel__lightbox-image {
    max-width: 90vw;
    max-height: 80vh;
    object-fit: contain;
}

.its-media-carousel__lightbox-caption {
    margin-top: 16px;
    max-width: 70ch;
    color: #fff;
    text-align: center;
}

.its-media-carousel__lightbox-caption:empty {
    display: none;
}

.its-media-carousel__lightbox-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.its-media-carousel__lightbox-close:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* ── Reduced motion ──────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .its-media-carousel__track {
        transition: none;
    }
}

/* ── Editor preview ──────────────────────────────────────── */

.its-media-carousel--preview .its-media-carousel__track {
    transition: none;
}