﻿
/* linktextpanel styles */

.imgtxtpnlwrp{
    padding-bottom: 20px;
    display: inline-flex;
}

.imgtxtpnl.two-col {
    display: flex;
    max-width: 1000px;
    margin: 0 auto;
    align-items: center;
    float: left;
}

    .imgtxtpnl.two-col.left {
        flex-direction: row-reverse;
    }

    .imgtxtpnl.two-col.right {
        flex-direction: row;
    }

.imgtxtpnl > .col {
    min-width: 0;
    padding: 20px;
}

.imgtxtpnl > .col-text {
    flex: 0 0 40%;
    align-self: normal;
}

.imgtxtpnl > .col-slider {
    flex: 0 0 60%;
    padding: 30px;
 /*   height: 400px;*/
}

.imgtxtpnl h2 {
    color: var( --e-global-color-primary );
}


/* Slider styling with fixed-height, cropped images */
.slider img {
    width: 100%;
    object-fit: cover; /* crop to fill, preserving aspect ratio */
    object-position: center;
    display: block;
}

/* Make slick arrows visible against images */
.slick-prev:before,
.slick-next:before {
    color: #333;
}

.slick-slider.slick-dotted {
    margin-bottom: 0px;
}

.slick-dots {
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    text-align: center;
    width: 100%;
    bottom: 1em
}

    .slick-dots li button {
        -webkit-appearance: none;
        appearance: none;
        background: #1266ae;
        border: 2px solid #1266ae;
        display: block;
        height: 11px;
        margin: 0;
        padding: 0;
        text-indent: -9999px;
        width: 11px;
        cursor: pointer
    }

        .slick-dots li button:active, .slick-dots li button:focus {
            outline: 0
        }

    .slick-dots li.slick-active button {
        background: #fff;
        cursor: auto
    }

@media(max-width:767px) {
    /* linktextpanel styles */

    .imgtxtpnlwrp {
        padding-bottom: 20px;
        display: inline-flex;
    }


    .imgtxtpnl.two-col,
    .imgtxtpnl.two-col.right,
    .imgtxtpnl.two-col.left {
        flex-direction: column; /* always stack on mobile, regardless of reverse */
        gap: 24px;
        padding: 0px;
        max-width: 90vw;
    }

    .imgtxtpnl > .col-text,
    .imgtxtpnl > .col-slider {
        flex-basis: auto;
        height: unset;
    }

    .imgtxtpnl > .col-text {
        order: 1; /* text first */
        padding-right: 5em
    }

        .imgtxtpnl > .col-text a {
            color: unset;
        }

    .imgtxtpnl > .col-slider {
        order: 2; /* slider below */
        width: 100%;
    }

    .slider img {
        height: unset;
    }
}
