﻿/* CONTAINER FOR SINGLE SLIDE */
.slider-item-1 .slide,
.slider-item-2 .slide,
.slider-item-3 .slide,
.slider-item-4 .slide,
.slider-item-5 .slide {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 1170px !important;
    height: 400px !important;
    margin: auto !important;
    font-family: Arial, sans-serif !important;
}

/* TOP HALF: fixed width 1170px, fixed 240px height, stretch children */
.slider-item-1 .slide-top,
.slider-item-2 .slide-top,
.slider-item-3 .slide-top,
.slider-item-4 .slide-top,
.slider-item-5 .slide-top {
    display: flex !important;
    width: 1170px !important; /* full slider width */
    height: 240px !important; /* 60% of 400px */
    margin: 0 auto !important; /* center horizontally */
    align-items: stretch !important;
}

/* Both image panel and header fill the 240px */
.slider-item-1 .slide-image,
.slider-item-2 .slide-image,
.slider-item-3 .slide-image,
.slider-item-4 .slide-image,
.slider-item-5 .slide-image,
.slider-item-1 .slide-header,
.slider-item-2 .slide-header,
.slider-item-3 .slide-header,
.slider-item-4 .slide-header,
.slider-item-5 .slide-header {
    height: 100% !important;
}

/* LEFT: image container auto-width (fits image), full height */
.slider-item-1 .slide-image,
.slider-item-2 .slide-image,
.slider-item-3 .slide-image,
.slider-item-4 .slide-image,
.slider-item-5 .slide-image {
    flex: none !important; /* width = image width */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #fff !important;
}

    /* Ensure the <img> covers the full 240px height */
    .slider-item-1 .slide-image img,
    .slider-item-2 .slide-image img,
    .slider-item-3 .slide-image img,
    .slider-item-4 .slide-image img,
    .slider-item-5 .slide-image img {
        height: 100% !important;
        width: auto !important;
        object-fit: cover !important;
    }

/* RIGHT: header flexes to remaining width, full height */
.slider-item-1 .slide-header,
.slider-item-2 .slide-header,
.slider-item-3 .slide-header,
.slider-item-4 .slide-header,
.slider-item-5 .slide-header {
    flex: 1 !important;
    background: #1F652E !important;
    color: #F4E467 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: 0 20px !important;
}

/* BOTTOM HALF */
.slider-item-1 .slide-bottom,
.slider-item-2 .slide-bottom,
.slider-item-3 .slide-bottom,
.slider-item-4 .slide-bottom,
.slider-item-5 .slide-bottom {
    flex: 1 !important;
    display: flex !important;
    background: #F2F2BE !important;
}

.slider-item-1 .slide-col,
.slider-item-2 .slide-col,
.slider-item-3 .slide-col,
.slider-item-4 .slide-col,
.slider-item-5 .slide-col {
    flex: 1 !important;
    padding: 10px 15px !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
}

    .slider-item-1 .slide-col strong,
    .slider-item-2 .slide-col strong,
    .slider-item-3 .slide-col strong,
    .slider-item-4 .slide-col strong,
    .slider-item-5 .slide-col strong {
        display: block !important;
        margin: 6px 0 4px !important;
        font-weight: bold !important;
    }


/* Make all bottom‐panel text dark so it’s readable */
.slider-item-1 .slide-col,
.slider-item-2 .slide-col,
.slider-item-3 .slide-col,
.slider-item-4 .slide-col,
.slider-item-5 .slide-col {
    color: #333 !important; /* or #000, whichever you prefer */
}

    /* If you want your <strong> labels to be a different shade */
    .slider-item-1 .slide-col strong,
    .slider-item-2 .slide-col strong,
    .slider-item-3 .slide-col strong,
    .slider-item-4 .slide-col strong,
    .slider-item-5 .slide-col strong {
        color: #000 !important;
    }
