/**
 * WEEU 830 Ad Carousel
 *
 * A row of sponsor images that rotates. Slides render black and white; the
 * centre slide (and any hovered slide) comes up in full colour.
 *
 * Sizing contract — every instance sets these three custom properties inline,
 * and everything else is derived from them:
 *   --adc-slides   how many slides fit across the viewport
 *   --adc-height   slide height in px
 *   --adc-gap      space between slides in px
 *
 * Narrow screens clamp --adc-visible below the author's slide count so the
 * images never squeeze to unreadable widths. Slide width is computed from
 * --adc-visible, so the whole thing is fluid without a single JS resize
 * handler.
 *
 * Motion modes (set by ad-carousel.js via the mode class):
 *   auto / manual  translate the track by whole slides
 *   marquee        translate a doubled track continuously
 *
 * @package WEEU830
 * @since   2.15.0
 */

.weeu-ad-carousel {
    --adc-visible: var(--adc-slides, 5);
    position: relative;
    margin: 24px auto;
    max-width: 100%;
}

/* Full width: break out of the page container to the viewport edges. */
.weeu-ad-carousel.weeu-adc-width-full {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

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

.weeu-adc-track {
    display: flex;
    align-items: center;
    gap: var(--adc-gap, 16px);
    will-change: transform;
}

/* Stepped modes ease between positions; the marquee is driven frame by
   frame in JS and must not have a transition fighting it. */
.weeu-adc-mode-auto .weeu-adc-track,
.weeu-adc-mode-manual .weeu-adc-track {
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   Slides
   ========================================================================== */

.weeu-ad-carousel .weeu-adc-slide {
    /* Each slide takes an equal share of the viewport once the gaps between
       the visible slides are removed from the total. The divisor is the
       configured slide count, never the number of ads running, so a lone
       sponsor keeps the same card size as a full row. */
    flex: 0 0 calc(
        (100% - (var(--adc-visible) - 1) * var(--adc-gap, 16px)) / var(--adc-visible)
    );
    height: var(--adc-height, 200px);
    display: flex;
    align-items: center;
    justify-content: center;
    /* .weeu-ad in ads.css carries slot margins and a size reservation that
       do not apply inside a carousel. */
    margin: 0;
    min-height: 0;
}

.weeu-ad-carousel .weeu-adc-slide img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    /* Fit inside the slide box without cropping or distorting the sponsor's
       artwork, whatever aspect ratio they supplied. */
    object-fit: contain;
    display: block;
}

/* The slide selector is in here to out-specify `.weeu-ad .weeu-ad-link` in
   ads.css, which sets display:inline-block. Both rules were (0,2,0) and
   ads.css loads second, so it won: the anchor stopped being a flex container
   (blockified to `block` as a flex item), align-items did nothing, and a
   linked sponsor logo sat against the top of its slide instead of centred.
   Unlinked slides were unaffected, which is why this only showed on some. */
.weeu-ad-carousel .weeu-adc-slide .weeu-adc-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
    /* ads.css also sets line-height:0 on ad links, which would leave the
       flex line half a pixel short of true centre. */
    line-height: normal;
}

/* ==========================================================================
   Colour treatment
   ========================================================================== */

.weeu-adc-grayscale .weeu-adc-slide img {
    filter: grayscale(1);
    opacity: 0.75;
    transition: filter 0.4s ease, opacity 0.4s ease, transform 0.4s ease;
}

/* The centre slide is marked by ad-carousel.js on every settle/frame. */
.weeu-adc-grayscale .weeu-adc-slide.is-center img,
.weeu-adc-grayscale .weeu-adc-slide:hover img,
.weeu-adc-grayscale .weeu-adc-slide:focus-within img {
    filter: grayscale(0);
    opacity: 1;
}

.weeu-adc-grayscale .weeu-adc-slide:hover img,
.weeu-adc-grayscale .weeu-adc-slide:focus-within img {
    transform: scale(1.04);
}

/* Colour-off carousels still get the lift, just no desaturation. */
.weeu-ad-carousel:not(.weeu-adc-grayscale) .weeu-adc-slide img {
    transition: transform 0.4s ease;
}

.weeu-ad-carousel:not(.weeu-adc-grayscale) .weeu-adc-slide:hover img,
.weeu-ad-carousel:not(.weeu-adc-grayscale) .weeu-adc-slide:focus-within img {
    transform: scale(1.04);
}

/* ==========================================================================
   Arrows and dots (manual mode)
   ========================================================================== */

.weeu-adc-nav {
    position: absolute;
    top: calc(var(--adc-height, 200px) / 2);
    transform: translateY(-50%);
    z-index: 2;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: var(--color-background, #fff);
    color: var(--color-heading, #111);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.weeu-adc-nav:hover,
.weeu-adc-nav:focus-visible {
    background: var(--color-primary, #F80000);
    color: #fff;
}

.weeu-adc-prev { left: 6px; }
.weeu-adc-next { right: 6px; }

.weeu-adc-nav[disabled] {
    opacity: 0.35;
    cursor: default;
}

.weeu-adc-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
}

.weeu-adc-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--color-border, #ccc);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.weeu-adc-dot.is-active {
    background: var(--color-primary, #F80000);
    transform: scale(1.25);
}

/* ==========================================================================
   Editor-only notice
   ========================================================================== */

.weeu-adc-editor-notice {
    margin: 24px auto;
    padding: 14px 16px;
    border: 1px dashed var(--color-border, #ccc);
    border-radius: 6px;
    background: var(--color-background-alt, #f8f8f8);
    color: var(--color-text-subtle, #666);
    font-size: var(--font-size-sm, 14px);
    text-align: center;
}

/* ==========================================================================
   Responsive — clamp the visible count so slides stay legible
   ========================================================================== */

@media (max-width: 1024px) {
    .weeu-ad-carousel {
        --adc-visible: min(var(--adc-slides, 5), 4);
    }
}

@media (max-width: 768px) {
    .weeu-ad-carousel {
        --adc-visible: min(var(--adc-slides, 5), 3);
    }

    .weeu-adc-nav {
        width: 34px;
        height: 34px;
        font-size: 20px;
    }
}

@media (max-width: 560px) {
    .weeu-ad-carousel {
        --adc-visible: min(var(--adc-slides, 5), 2);
    }
}

@media (max-width: 400px) {
    .weeu-ad-carousel {
        --adc-visible: 1;
    }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

/* Visitors who ask for reduced motion get a static, readable row rather
   than a moving one. JS also stops advancing; this covers the transitions
   and the hover scale. ad-carousel.js drops the grayscale class in this
   case so no sponsor is left permanently dimmed. */
@media (prefers-reduced-motion: reduce) {
    .weeu-adc-track {
        transition: none !important;
    }

    .weeu-ad-carousel .weeu-adc-slide img {
        transition: none !important;
        transform: none !important;
    }
}

.weeu-adc-editor-notice-list {
    text-align: left;
    max-width: 720px;
}

.weeu-adc-editor-notice-list p {
    margin: 0 0 8px;
}

.weeu-adc-editor-notice-list ul {
    margin: 0 0 8px;
    padding-left: 20px;
    list-style: disc;
}

.weeu-adc-editor-notice-list li {
    margin-bottom: 4px;
}

.weeu-adc-editor-note {
    font-style: italic;
    opacity: 0.8;
}

/* ==========================================================================
   Fixed-width cards
   ========================================================================== */

/* Every card is exactly --adc-card-width regardless of how many are running,
   so a creative never changes size because a neighbouring campaign started
   or ended. */
.weeu-adc-fixed-cards .weeu-adc-slide {
    flex: 0 0 var(--adc-card-width, 240px);
    max-width: 100%;
}

/* Too few cards to fill the row: centre them instead of leaving them hard
   against the left edge. Once they overflow, flex-start keeps the track
   translating predictably. */
.weeu-adc-fixed-cards .weeu-adc-track {
    justify-content: center;
}

.weeu-adc-fixed-cards.is-overflowing .weeu-adc-track {
    justify-content: flex-start;
}

/* On a narrow screen a fixed card can be wider than the viewport; cap it so
   the page never scrolls sideways. */
@media (max-width: 560px) {
    .weeu-adc-fixed-cards .weeu-adc-slide {
        flex-basis: min(var(--adc-card-width, 240px), 100%);
    }
}