/**
 * WEEU 830 Carousel Styles — v3 "design stage" model
 *
 * Every slide is designed on a fixed 1000x600 canvas. The canvas scales as
 * one unit (transform: scale) to fit the carousel's width, so a slide looks
 * identical — just proportionally smaller — at every viewport size, and the
 * admin editor preview is pixel-accurate because it uses this same CSS and
 * the same scale rule.
 *
 * --carousel-scale is set by assets/js/carousel.js (ResizeObserver) and by
 * an inline bootstrap script in template-parts/carousel.php for first paint.
 *
 * All selectors are scoped under .weeu830-carousel so unrelated components
 * that reuse class names (e.g. sports-hub.css has its own .carousel-slide)
 * can't bleed in.
 *
 * @package WEEU830
 * @version 3.0.0
 */

/* ============================================
   BASE STRUCTURE + SCALE MODEL
   ============================================ */
.weeu830-carousel-section {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #000;
}

.weeu830-carousel {
    /* Design canvas dimensions (must match WEEU830_Carousel_Renderer consts). */
    --carousel-canvas-w: 1000;
    --carousel-canvas-h: 600;
    /* Uniform scale = min(1, containerWidth / canvasWidth). Set by JS;
       1 is the desktop default so a no-JS first paint is correct above
       1000px. */
    --carousel-scale: 1;
    /* Display-height factor: the visible window's height as a fraction of
       the design height. The canvas is scaled by the same factor so the
       whole 1000x600 design always fits — never cropped. 1 = full height. */
    --carousel-height-factor: 1;

    position: relative;
    width: 100%;
    height: calc(var(--carousel-canvas-h) * var(--carousel-scale) * var(--carousel-height-factor) * 1px);
    overflow: hidden;
}

/* Front end shows heroes at 60% design height so they don't swallow short
   viewports; the editor keeps the full canvas for authoring. */
.weeu830-carousel:not(.editor-preview) {
    --carousel-height-factor: 0.6;
}

.weeu830-carousel .carousel-track {
    position: relative;
    width: 100%;
    height: 100%;
}

.weeu830-carousel .carousel-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
    overflow: hidden;
}

.weeu830-carousel .carousel-slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

/* The stage centers the design canvas in the slide. */
.weeu830-carousel .carousel-stage {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* The design canvas: fixed design dimensions, scaled as a unit. */
.weeu830-carousel .carousel-canvas {
    position: relative;
    flex: none;
    width: calc(var(--carousel-canvas-w) * 1px);
    height: calc(var(--carousel-canvas-h) * 1px);
    transform: scale(calc(var(--carousel-scale) * var(--carousel-height-factor)));
    transform-origin: center center;
    color: var(--color-text-on-dark);
}

/* ============================================
   BACKGROUND + OVERLAY (full-bleed, behind the stage)
   ============================================ */
.weeu830-carousel .carousel-background {
    position: absolute;
    inset: 0;
    z-index: 0;
    /* size / position / repeat come from inline styles (coverage options). */
    transform: scale(1);
    transition: transform 10s ease-out;
}

.weeu830-carousel .carousel-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Background load animations */
.weeu830-carousel .bg-anim-fade        { animation: weeu-bgFadeIn 1.5s ease-out; }
.weeu830-carousel .bg-anim-zoom        { animation: weeu-bgZoomIn 2s ease-out; }
.weeu830-carousel .bg-anim-slide-left  { animation: weeu-bgSlideLeft 1.5s ease-out; }
.weeu830-carousel .bg-anim-slide-right { animation: weeu-bgSlideRight 1.5s ease-out; }
.weeu830-carousel .bg-anim-slide-up    { animation: weeu-bgSlideUp 1.5s ease-out; }
.weeu830-carousel .bg-anim-pan         { animation: weeu-bgPan 15s ease-in-out infinite alternate; }

.weeu830-carousel .carousel-slide.parallax-enabled .carousel-background {
    transition: transform 0.3s ease-out;
    will-change: transform;
}

@keyframes weeu-bgFadeIn     { from { opacity: 0; } to { opacity: 1; } }
@keyframes weeu-bgZoomIn     { from { opacity: 0; transform: scale(1.3); } to { opacity: 1; transform: scale(1); } }
@keyframes weeu-bgSlideLeft  { from { transform: translateX(100%); }  to { transform: translateX(0); } }
@keyframes weeu-bgSlideRight { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes weeu-bgSlideUp    { from { transform: translateY(100%); }  to { transform: translateY(0); } }
@keyframes weeu-bgPan        { 0% { transform: scale(1.1) translateX(-5%); } 100% { transform: scale(1.1) translateX(5%); } }

/* ============================================
   LAYERS
   ============================================ */
.weeu830-carousel .carousel-layer {
    position: absolute;
    pointer-events: auto;
}

.weeu830-carousel .carousel-layer .layer-text {
    white-space: nowrap; /* explicit text_max_width turns wrapping on via inline style */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    display: inline-block;
}

.weeu830-carousel .carousel-layer-image {
    display: block;
    object-fit: contain;
}

/* Image layers with no image yet: invisible on the frontend (the editor
   shows a placeholder via its own stylesheet). */
.weeu830-carousel .layer-image-placeholder {
    display: none;
}

.weeu830-carousel .carousel-button {
    display: inline-block;
    padding: 15px 35px;
    text-decoration: none;
    border-radius: 30px;
    font-weight: 600;
    font-size: 16px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    white-space: nowrap;
}

.weeu830-carousel .carousel-button.button-primary {
    background: var(--color-primary, #F80000);
    color: var(--color-on-primary);
}

.weeu830-carousel .carousel-button.button-secondary {
    background: rgba(255, 255, 255, 0.2);
    color: var(--color-text-on-dark);
    border: 2px solid #fff;
}

.weeu830-carousel .carousel-button.button-outline {
    background: transparent;
    color: var(--color-text-on-dark);
    border: 2px solid #fff;
}

.weeu830-carousel .carousel-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.weeu830-carousel .carousel-button.button-primary:hover {
    background: var(--color-primary-hover, #dc0000);
}

.weeu830-carousel .carousel-button.button-secondary:hover,
.weeu830-carousel .carousel-button.button-outline:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* ============================================
   LAYER ANIMATIONS
   ============================================ */
/* Entrance animations run on the layer's inner child (.layer-text / img /
   <a>), NOT on the .carousel-layer itself. The layer div carries its
   position anchor as an inline transform (translate(-50%,-50%) etc.);
   animating transform on the same element would overwrite that anchor and
   shove the layer out of position mid-animation — a visible glitch in the
   old system. The inline animation-delay / animation-duration set on the
   layer div are picked up by the child via `inherit`. */
.weeu830-carousel .carousel-layer.animated > * {
    animation-duration: inherit;
    animation-delay: inherit;
    animation-fill-mode: both;
}

.weeu830-carousel .carousel-layer.paused > * {
    animation-play-state: paused;
}

/* Hold layers invisible until .animated is (re)applied, so entrances replay
   each time a slide becomes active (carousel.js toggles .animated). Layers
   with animation 'none' never get .has-animation and are always visible. */
.weeu830-carousel .carousel-layer.fadeIn:not(.animated) > *,
.weeu830-carousel .carousel-layer.fadeInUp:not(.animated) > *,
.weeu830-carousel .carousel-layer.fadeInDown:not(.animated) > *,
.weeu830-carousel .carousel-layer.fadeInLeft:not(.animated) > *,
.weeu830-carousel .carousel-layer.fadeInRight:not(.animated) > *,
.weeu830-carousel .carousel-layer.slideInUp:not(.animated) > *,
.weeu830-carousel .carousel-layer.slideInDown:not(.animated) > *,
.weeu830-carousel .carousel-layer.slideInLeft:not(.animated) > *,
.weeu830-carousel .carousel-layer.slideInRight:not(.animated) > *,
.weeu830-carousel .carousel-layer.zoomIn:not(.animated) > *,
.weeu830-carousel .carousel-layer.bounceIn:not(.animated) > * {
    opacity: 0;
}

.weeu830-carousel .carousel-layer.fadeIn.animated > *       { animation-name: weeu-fadeIn; }
.weeu830-carousel .carousel-layer.fadeInUp.animated > *     { animation-name: weeu-fadeInUp; }
.weeu830-carousel .carousel-layer.fadeInDown.animated > *   { animation-name: weeu-fadeInDown; }
.weeu830-carousel .carousel-layer.fadeInLeft.animated > *   { animation-name: weeu-fadeInLeft; }
.weeu830-carousel .carousel-layer.fadeInRight.animated > *  { animation-name: weeu-fadeInRight; }
.weeu830-carousel .carousel-layer.slideInUp.animated > *    { animation-name: weeu-slideInUp; }
.weeu830-carousel .carousel-layer.slideInDown.animated > *  { animation-name: weeu-slideInDown; }
.weeu830-carousel .carousel-layer.slideInLeft.animated > *  { animation-name: weeu-slideInLeft; }
.weeu830-carousel .carousel-layer.slideInRight.animated > * { animation-name: weeu-slideInRight; }
.weeu830-carousel .carousel-layer.zoomIn.animated > *       { animation-name: weeu-zoomIn; }
.weeu830-carousel .carousel-layer.bounceIn.animated > *     { animation-name: weeu-bounceIn; }

@keyframes weeu-fadeIn       { from { opacity: 0; } to { opacity: 1; } }
@keyframes weeu-fadeInUp     { from { opacity: 0; transform: translateY(30px); }  to { opacity: 1; transform: translateY(0); } }
@keyframes weeu-fadeInDown   { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes weeu-fadeInLeft   { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } }
@keyframes weeu-fadeInRight  { from { opacity: 0; transform: translateX(30px); }  to { opacity: 1; transform: translateX(0); } }
@keyframes weeu-slideInUp    { from { opacity: 0; transform: translateY(60px); }  to { opacity: 1; transform: translateY(0); } }
@keyframes weeu-slideInDown  { from { opacity: 0; transform: translateY(-60px); } to { opacity: 1; transform: translateY(0); } }
@keyframes weeu-slideInLeft  { from { opacity: 0; transform: translateX(-60px); } to { opacity: 1; transform: translateX(0); } }
@keyframes weeu-slideInRight { from { opacity: 0; transform: translateX(60px); }  to { opacity: 1; transform: translateX(0); } }
@keyframes weeu-zoomIn       { from { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: scale(1); } }
@keyframes weeu-bounceIn {
    0%   { opacity: 0; transform: scale(0.3); }
    50%  { opacity: 1; transform: scale(1.05); }
    70%  { transform: scale(0.9); }
    100% { transform: scale(1); }
}

/* ============================================
   NAVIGATION ARROWS
   ============================================ */
.weeu830-carousel .carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
    z-index: 10;
    backdrop-filter: blur(5px);
    color: var(--color-text-on-dark);
    padding: 0;
}

.weeu830-carousel .carousel-prev { left: 16px; }
.weeu830-carousel .carousel-next { right: 16px; }

.weeu830-carousel .carousel-nav:hover {
    background: var(--color-primary, #F80000);
    border-color: var(--color-primary, #F80000);
    transform: translateY(-50%) scale(1.08);
}

.weeu830-carousel .carousel-nav:focus-visible {
    outline: 2px solid var(--color-primary, #F80000);
    outline-offset: 2px;
}

.weeu830-carousel .carousel-nav svg {
    width: 22px;
    height: 22px;
}

/* ============================================
   PAGINATION DOTS
   ============================================ */
.weeu830-carousel .carousel-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 10;
}

.weeu830-carousel .carousel-dot {
    width: 11px;
    height: 11px;
    background: rgba(255, 255, 255, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.3s ease;
    padding: 0;
}

.weeu830-carousel .carousel-dot.active {
    background: var(--color-primary, #F80000);
    border-color: var(--color-primary, #F80000);
    transform: scale(1.2);
}

.weeu830-carousel .carousel-dot:hover {
    background: rgba(255, 255, 255, 0.5);
}

.weeu830-carousel .carousel-dot:focus-visible {
    outline: 2px solid var(--color-primary, #F80000);
    outline-offset: 2px;
}

/* ============================================
   RESPONSIVE CHROME
   (slide content needs no breakpoints — the
   stage scale handles it at every width)
   ============================================ */
@media (max-width: 768px) {
    .weeu830-carousel .carousel-nav {
        width: 36px;
        height: 36px;
    }
    .weeu830-carousel .carousel-nav svg {
        width: 18px;
        height: 18px;
    }
    .weeu830-carousel .carousel-prev { left: 8px; }
    .weeu830-carousel .carousel-next { right: 8px; }

    .weeu830-carousel .carousel-dots { bottom: 10px; gap: 8px; }
    .weeu830-carousel .carousel-dot { width: 9px; height: 9px; }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .weeu830-carousel *,
    .weeu830-carousel *::before,
    .weeu830-carousel *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .weeu830-carousel .carousel-background {
        transform: scale(1) !important;
    }
}

/* ============================================
   PRINT
   ============================================ */
@media print {
    .weeu830-carousel-section {
        display: none;
    }
}

/* ============================================
   LOADING STATE
   ============================================ */
.weeu830-carousel.is-loading {
    background: var(--color-dark-surface);
}

.weeu830-carousel.is-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -20px 0 0 -20px;
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top-color: var(--color-primary, #F80000);
    border-radius: 50%;
    animation: weeu-spin 1s linear infinite;
    z-index: 20;
}

@keyframes weeu-spin {
    to { transform: rotate(360deg); }
}

/* ============================================
   SLIDE-WIDE CLICK-THROUGH (2.23.0)

   The anchor sits above the overlay but below the stage, because the stage
   is its own stacking context — an anchor placed over it would cover the
   buttons inside and swallow their clicks. Instead the stage is made
   click-through, and genuinely interactive layers re-enable pointer events
   so a button still beats the slide link.

   Scoped to .has-slide-link so slides without a link are untouched.
   ============================================ */

.weeu830-carousel .carousel-slide-link {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    /* No visual presence of its own — the slide is the affordance. */
    background: transparent;
    text-decoration: none;
}

.weeu830-carousel .carousel-slide.has-slide-link {
    cursor: pointer;
}

.weeu830-carousel .carousel-slide.has-slide-link .carousel-stage {
    pointer-events: none;
}

/* Anything a visitor can actually act on stays clickable and keeps its own
   destination. */
.weeu830-carousel .carousel-slide.has-slide-link .carousel-stage a,
.weeu830-carousel .carousel-slide.has-slide-link .carousel-stage button,
.weeu830-carousel .carousel-slide.has-slide-link .carousel-stage input,
.weeu830-carousel .carousel-slide.has-slide-link .carousel-stage select,
.weeu830-carousel .carousel-slide.has-slide-link .carousel-stage textarea,
.weeu830-carousel .carousel-slide.has-slide-link .carousel-stage [role="button"] {
    pointer-events: auto;
}

/* The slide link is a real, focusable, named link so keyboard and screen
   reader users can reach the destination even on a slide with no buttons.
   It needs a visible focus ring of its own, and a focused button inside
   must still paint above the link surface. */
.weeu830-carousel .carousel-slide-link:focus-visible {
    outline: 3px solid #fff;
    outline-offset: -6px;
}

.weeu830-carousel .carousel-slide.has-slide-link .carousel-stage a:focus-visible,
.weeu830-carousel .carousel-slide.has-slide-link .carousel-stage button:focus-visible {
    position: relative;
    z-index: 2;
}