/**
 * CLM Hero Stats Rotator + Video Lightbox
 * - Centers + evenly spreads the 4 stat tiles
 * - Adds rotating-value animation
 * - Adds video ad lightbox styling
 */

/* ============ STATS ROW: center + even spread ============ */
.clm-hero-rotator .clm-hr-stats{
    display:flex !important;
    justify-content:center !important;
    align-items:stretch !important;
    gap:clamp(24px, 5vw, 88px) !important;
    width:100% !important;
    max-width:1180px !important;
    margin:32px auto 0 auto !important;
    padding:0 24px !important;
    text-align:center !important;
    flex-wrap:wrap !important;
}

.clm-hero-rotator .clm-hr-stat{
    flex:1 1 0 !important;
    min-width:140px !important;
    max-width:280px !important;
    text-align:center !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    position:relative;
    padding:8px 4px !important;
}

/* Divider dots between tiles */
.clm-hero-rotator .clm-hr-stat + .clm-hr-stat::before{
    content:'';
    position:absolute;
    left:-.5em;
    top:50%;
    transform:translateY(-50%);
    width:4px; height:4px;
    border-radius:50%;
    background:rgba(255,255,255,.35);
}

/* Value + label sizing */
.clm-hero-rotator .clm-hr-stat .val{
    font-size:clamp(28px, 3vw, 44px) !important;
    line-height:1 !important;
    font-weight:700 !important;
    color:#fff !important;
    font-variant-numeric:tabular-nums lining-nums !important;
    letter-spacing:-.01em !important;
    text-align:center !important;
    transition:opacity .35s ease, transform .35s ease;
    will-change:opacity, transform;
}
.clm-hero-rotator .clm-hr-stat .lbl{
    font-size:clamp(11px, 1vw, 13px) !important;
    line-height:1.3 !important;
    font-weight:500 !important;
    color:rgba(255,255,255,.72) !important;
    text-transform:uppercase !important;
    letter-spacing:.08em !important;
    margin-top:8px !important;
    text-align:center !important;
    transition:opacity .35s ease, transform .35s ease;
    will-change:opacity, transform;
}

/* Cycling animation */
.clm-hero-rotator .clm-hr-stat.is-swap .val,
.clm-hero-rotator .clm-hr-stat.is-swap .lbl{
    opacity:0;
    transform:translateY(-8px);
}

@media (max-width:720px){
    .clm-hero-rotator .clm-hr-stats{
        gap:16px !important;
        margin-top:20px !important;
    }
    .clm-hero-rotator .clm-hr-stat + .clm-hr-stat::before{ display:none; }
    .clm-hero-rotator .clm-hr-stat{ flex:1 1 45%; min-width:auto; }
    .clm-hero-rotator .clm-hr-stat .val{ font-size:clamp(22px,7vw,32px) !important; }
    .clm-hero-rotator .clm-hr-stat .lbl{ font-size:10px !important; }
}

/* ============ VIDEO SLIDE — click to open lightbox ============ */
.clm-hero-rotator .clm-hr-slide-bg[data-video-ad]{
    cursor:zoom-in;
}
.clm-hero-rotator .clm-hr-video-badge{
    position:absolute;
    top:14px; left:14px;
    z-index:5;
    background:rgba(0,0,0,.62);
    color:#fff;
    padding:6px 12px 6px 10px;
    border-radius:999px;
    font-size:12px;
    font-weight:600;
    letter-spacing:.04em;
    display:flex; align-items:center; gap:6px;
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    pointer-events:none;
}
.clm-hero-rotator .clm-hr-video-badge svg{ width:12px; height:12px; }

/* Play-CTA overlay on video slides */
.clm-hero-rotator .clm-hr-play-cta{
    position:absolute;
    right:20px; bottom:120px;
    z-index:6;
    background:rgba(255,255,255,.98);
    color:#0A2540;
    border:0;
    border-radius:999px;
    padding:12px 20px 12px 16px;
    font-size:14px; font-weight:600;
    display:flex; align-items:center; gap:8px;
    cursor:pointer;
    box-shadow:0 10px 30px rgba(0,0,0,.4);
    transition:transform .2s ease, box-shadow .2s ease;
}
.clm-hero-rotator .clm-hr-play-cta:hover{
    transform:translateY(-2px);
    box-shadow:0 14px 40px rgba(0,0,0,.5);
}

/* ============ LIGHTBOX ============ */
.clm-hr-lightbox{
    position:fixed; inset:0;
    z-index:99999;
    background:rgba(6,10,20,.92);
    display:none;
    align-items:center; justify-content:center;
    padding:24px;
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    opacity:0;
    transition:opacity .25s ease;
}
.clm-hr-lightbox.is-open{
    display:flex;
    opacity:1;
}
.clm-hr-lightbox-inner{
    position:relative;
    width:100%;
    max-width:1100px;
    aspect-ratio:16/9;
    background:#000;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.clm-hr-lightbox video,
.clm-hr-lightbox iframe{
    width:100%; height:100%;
    border:0;
    background:#000;
}
.clm-hr-lightbox-close{
    position:absolute;
    top:-52px; right:0;
    background:rgba(255,255,255,.12);
    color:#fff;
    border:1px solid rgba(255,255,255,.24);
    width:40px; height:40px;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    transition:background .2s ease;
}
.clm-hr-lightbox-close:hover{ background:rgba(255,255,255,.24); }
.clm-hr-lightbox-caption{
    position:absolute;
    bottom:-40px; left:0;
    color:rgba(255,255,255,.7);
    font-size:13px;
    letter-spacing:.02em;
}

@media (max-width:720px){
    .clm-hr-lightbox{ padding:12px; }
    .clm-hr-lightbox-inner{ aspect-ratio:16/9; }
    .clm-hr-lightbox-close{ top:12px; right:12px; }
}