/* Container keeps fixed height on desktop to prevent page jump */
.insight-slider-wrapper {
  max-width: 1200px;
  margin: 0px auto;
padding: 0 10px;
margin-bottom: 3em;

}
.insight-slider-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    min-height: 300px;
}

/* Each slide positioned absolute on desktop, stacked in same area */
.insight-slide {
    position: absolute;
    inset: 0;
    display: flex;
    gap: 0px;
    align-items: stretch;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
    padding: 10px 0;
}

/* active slide visible and interactive */
.insight-slide.active {
    opacity: 1;
    pointer-events: auto;
}

/* Text box on the left (desktop) */
.insight-slide-text {
    flex: 1;
    background: #f5f6f8;
    border: 1px solid rgba(31, 31, 31, 0.2);
    padding: 25px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 280px; /* ensure equal height to image */
    box-sizing: border-box;
}

/* Image on the right */
.insight-slide-image {
    flex: 0 0 50%;
    display: flex;
    align-items: center;
}
.insight-slide-image img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    display: block;
}

/* Titles */
.insight-title {
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    color: #a7188a;
    margin: 0 0 10px 0;
    line-height: 1.2;
}

/* meta/excerpt/readmore */
.insight-date { font-size: 14px; color: #777; margin-bottom: 10px; }
.insight-excerpt { font-size: 16px; line-height: 1.4; margin-bottom: 12px; }
.insight-readmore { margin-top: auto; font-weight: 700; text-decoration: none; }

/* slide variant for 'slide' animation (translate) */
.insight-slide.slide-out-left { transform: translateX(-100%); }
.insight-slide.slide-in-right { transform: translateX(100%); }
.insight-slide.slide-center { transform: translateX(0%); }

/* RESPONSIVE: on small screens, slides should stack (normal flow) and text above image */
@media (max-width: 900px) {
    .insight-slider-wrapper { min-height: auto; }
    .insight-slide {
        position: relative;
        opacity: 1 !important;
        pointer-events: auto;
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }
    .insight-slide:not(.active) { display: none; }
    .insight-slide-text { order: 0; min-height: auto; padding: 20px; text-align: center; }
    .insight-slide-image { order: 1; flex: none; width: 100%; }
    .insight-slide-image img { height: 240px; width: 100%; }
}