/* =============================================
   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;
}