/* =============================================
   COHSAR CONTENT SLIDER — frontend.css v3.0
   
   This file contains STRUCTURAL CSS only —
   things that must always load for the slider
   to function correctly.
   
   Visual/tweakable styles (colors, sizes,
   animations, hero template) are managed in:
   Admin → Sliders → Style Editor
   ============================================= */

/* OUTER WRAPPER */
.cohsar-slider-wrap {
    position: relative;
}

/* SWIPER CONTAINER — do not set overflow, Swiper owns it */
.cohsar-slider {
    opacity: 1;
    visibility: visible;
}

/* TWO-COLUMN STRUCTURAL */
.cohsar-two-col {
    display: flex;
    flex-direction: row;
    width: 100%;
    box-sizing: border-box;
}
.cohsar-col {
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
}

/* COLUMN ANIMATION STATE — opacity must always be managed here
   so columns don't flash before JS fires */
.cohsar-col[data-anim]:not([data-anim="none"]) {
    opacity: 0;
}
.cohsar-col.cohsar-anim-done {
    opacity: 1;
}

/* ANIMATION KEYFRAMES — structural, must always exist */
@keyframes cohsar-slide-left {
    from { opacity: 0; transform: translateX(-48px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes cohsar-slide-right {
    from { opacity: 0; transform: translateX(48px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes cohsar-fade-up {
    from { opacity: 0; transform: translateY(32px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes cohsar-zoom-in {
    from { opacity: 0; transform: scale(0.88); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes cohsar-kenburns {
    0%   { transform: scale(1.0)  translate(0,    0);    }
    50%  { transform: scale(1.08) translate(-1%,  0.5%); }
    100% { transform: scale(1.15) translate(1%,  -1%);   }
}

.cohsar-col.cohsar-anim-slide-left  { animation: cohsar-slide-left  0.65s cubic-bezier(0.22, 1, 0.36, 1) both; }
.cohsar-col.cohsar-anim-slide-right { animation: cohsar-slide-right 0.65s cubic-bezier(0.22, 1, 0.36, 1) both; }
.cohsar-col.cohsar-anim-fade-up     { animation: cohsar-fade-up     0.65s cubic-bezier(0.22, 1, 0.36, 1) both; }
.cohsar-col.cohsar-anim-zoom-in     { animation: cohsar-zoom-in     0.60s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.cohsar-two-col .cohsar-col-2.cohsar-anim-fade-up  { animation-delay: 0.12s; }
.cohsar-two-col .cohsar-col-2.cohsar-anim-zoom-in  { animation-delay: 0.10s; }

/* VISIBILITY HELPERS — functional, must always exist */
@media (max-width: 767px) { .cohsar-hide-on-mobile  { display: none !important; } }
@media (min-width: 768px) { .cohsar-hide-on-desktop { display: none !important; } }

/* AUTO CAROUSEL: slides have explicit width set via JS */
.cohsar-slider .swiper-slide[style*='width'] {
    flex-shrink: 0;
}

/* MULTI-SLIDE: equal height stretch */
.cohsar-slider[data-carousel] .swiper-slide {
    height: auto;
    align-self: stretch;
}

/* PRE-INIT: show only first slide before JS loads — prevents CLS */
.cohsar-slider:not(.swiper-initialized) .swiper-wrapper {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
}
.cohsar-slider:not(.swiper-initialized) .swiper-slide {
    width: 100%;
    flex-shrink: 0;
}
.cohsar-slider:not(.swiper-initialized) .swiper-slide:not(:first-child) {
    display: none !important;
}

/* ============================================================
   NATIVE LIGHTWEIGHT SLIDER STYLES (Zero Swiper CSS needed)
   ============================================================ */
.cohsar-slider {
    position: relative;
    overflow: hidden;
    width: 100%;
}
.cohsar-slider .swiper-wrapper {
    display: flex;
    position: relative;
    width: 100%;
    transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
}
.cohsar-slider .swiper-slide {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
.swiper-button-prev, .swiper-button-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.35);
    color: #fff;
    border-radius: 50%;
    border: none;
    user-select: none;
    transition: background 0.2s;
}
.swiper-button-prev:hover, .swiper-button-next:hover {
    background: rgba(0,0,0,0.65);
}
.swiper-button-prev { left: 16px; }
.swiper-button-next { right: 16px; }
.swiper-button-prev::after { content: '‹'; font-size: 32px; line-height: 1; margin-top: -3px; }
.swiper-button-next::after { content: '›'; font-size: 32px; line-height: 1; margin-top: -3px; }
.cohsar-slider-pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
}
.swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(0,0,0,0.25);
    cursor: pointer;
    transition: all 0.25s ease;
    display: inline-block;
}
.swiper-pagination-bullet-active {
    background: #2B6CB0;
    width: 26px;
    border-radius: 6px;
}


/* ============================================================
   HERO SLIDER ZERO-CLS & BACKGROUND DISPLAY OPTIMIZATIONS
   ============================================================ */

/* Full-width 100vw edge-to-edge breakout */
#cohsar-wrap-6017,
div[id^="cohsar-wrap-"],
.cohsar-full-width,
.cohsar-slider-wrap.cohsar-full-width,
div[id^="cohsar-wrap-"].cohsar-full-width {
    width: 100vw !important;
    max-width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    box-sizing: border-box !important;
}

/* Remove opaque background so wrapper background image displays clearly */
#cohsar-wrap-6017 #cohsar-slider-6017 .cohsar-slide,
#cohsar-wrap-6017 #cohsar-slider-6017 .swiper-slide,
#cohsar-wrap-6017 #cohsar-slider-6017 [class*="slide-"],
#cohsar-wrap-6017 #cohsar-slider-6017 .cohsar-hero-slide-text,
div[id^="cohsar-wrap-"] div[id^="cohsar-slider-"] .cohsar-slide,
div[id^="cohsar-wrap-"] div[id^="cohsar-slider-"] .swiper-slide,
div[id^="cohsar-wrap-"] div[id^="cohsar-slider-"] [class*="slide-"],
div[id^="cohsar-wrap-"] div[id^="cohsar-slider-"] .cohsar-hero-slide-text,
.cohsar-slider-wrap .cohsar-slider .swiper-slide,
.cohsar-slider-wrap .cohsar-slider [class*="slide-"],
.cohsar-slider-wrap .cohsar-slider .cohsar-hero-slide-text,
.cohsar-slider .swiper-slide,
.cohsar-slider [class*="slide-"],
.cohsar-slider .cohsar-hero-slide-text {
    background-color: transparent !important;
    background: transparent !important;
}

/* Contrast overlay so text is crisp and readable over background images */
.cohsar-hero-slide-text {
    position: relative !important;
}
.cohsar-hero-slide-text::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.42) !important;
    z-index: 1 !important;
}
.cohsar-hero-inner {
    position: relative !important;
    z-index: 2 !important;
}

/* Zero-CLS Hero Slider Dimension & Structure Reservation */
div[id^="cohsar-slider-"],
.cohsar-slider,
.cohsar-slider .swiper-wrapper {
    width: 100% !important;
    min-height: 400px !important;
    box-sizing: border-box !important;
}
@media (min-width: 768px) {
    div[id^="cohsar-slider-"],
    .cohsar-slider,
    .cohsar-slider .swiper-slide {
        min-height: 400px !important;
        max-height: 400px !important;
    }
    .cohsar-hero-slide-text {
        min-height: 400px !important;
        height: 400px !important;
        max-height: 400px !important;
    }
}
@media (max-width: 767px) {
    div[id^="cohsar-slider-"],
    .cohsar-slider,
    .cohsar-slider .swiper-slide {
        min-height: 420px !important;
        max-height: 520px !important;
    }
    .cohsar-hero-slide-text {
        min-height: 420px !important;
        height: auto !important;
        background-position: 65% center !important;
    }
    .cohsar-hero-slide-text::before {
        background: rgba(0, 0, 0, 0.58) !important;
    }
    .cohsar-hero-inner {
        padding: 22px 14px !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .cohsar-hero-title {
        font-size: clamp(1.2rem, 4.8vw, 1.55rem) !important;
        line-height: 1.25 !important;
        margin-bottom: 10px !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        text-shadow: 0 2px 6px rgba(0,0,0,0.95) !important;
    }
    .cohsar-hero-line {
        font-size: clamp(0.85rem, 3.4vw, 0.98rem) !important;
        line-height: 1.35 !important;
        margin-bottom: 14px !important;
        word-break: break-word !important;
        text-shadow: 0 1px 4px rgba(0,0,0,0.9) !important;
    }
    .cohsar-hero-buttons {
        margin-top: 14px !important;
    }
    .cohsar-hero-btn {
        padding: 11px 24px !important;
        font-size: 0.92rem !important;
        min-height: 44px !important;
    }
}