/* ANS Magazine Slider: Layout 2 and Layout 3 styles */

/* Shared slider card foundation */
.ans-mag-slider.ans-layout-2 .mag-item,
.ans-mag-slider.ans-layout-3 .mag-item,
.ans-mag-slider.ans-layout-4 .mag-item,
.ans-mag-slider.ans-layout-5 .mag-item {
    position: relative;
    overflow: hidden;
    border: 1px solid #fff;
    background: #000;
}

.ans-mag-slider.ans-layout-2 .mag-link,
.ans-mag-slider.ans-layout-3 .mag-link,
.ans-mag-slider.ans-layout-4 .mag-link,
.ans-mag-slider.ans-layout-5 .mag-link {    
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    text-decoration: none !important;
}

.ans-mag-slider.ans-layout-2 .mag-thumb,
.ans-mag-slider.ans-layout-3 .mag-thumb,
.ans-mag-slider.ans-layout-4 .mag-thumb,
.ans-mag-slider.ans-layout-5 .mag-thumb {
    width: 100%;
    height: 100%;
}

.ans-mag-slider.ans-layout-2 .mag-thumb img,
.ans-mag-slider.ans-layout-3 .mag-thumb img,
.ans-mag-slider.ans-layout-4 .mag-thumb img,
.ans-mag-slider.ans-layout-5 .mag-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


.ans-mag-slider.ans-layout-2 .mag-overlay:hover,
.ans-mag-slider.ans-layout-3 .mag-overlay:hover,
.ans-mag-slider.ans-layout-4 .mag-overlay:hover,
.ans-mag-slider.ans-layout-5 .mag-overlay:hover {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 13px 12px;
    background: linear-gradient(180deg,rgb(9 9 0) 0%, rgb(5, 5, 5) 100%);
   
}
.ans-mag-slider.ans-layout-2 .mag-overlay,
.ans-mag-slider.ans-layout-3 .mag-overlay,
.ans-mag-slider.ans-layout-4 .mag-overlay,
.ans-mag-slider.ans-layout-5 .mag-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 13px 12px;
    background: linear-gradient(180deg, rgb(0 0 0) 0%, rgb(76 61 61) 100%);
}

.ans-mag-slider.ans-layout-2 .mag-title,
.ans-mag-slider.ans-layout-3 .mag-title,
.ans-mag-slider.ans-layout-4 .mag-title,
.ans-mag-slider.ans-layout-5 .mag-title {
    margin: 0 !important;
    color: #fff !important;
    font-size: 16px !important;
    line-height: 1.25 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: "Montserrat", sans-serif;
    letter-spacing:0.5px;
        font-weight: 400;
}

/* =========================================
   LAYOUT 2
   ========================================= */

.ans-mag-layout2 {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: 10px;
    background-color: #e1e1e1 !important;
}

/* Featured left slide */
.ans-mag-layout2 .mag-featured {
    height: 510px;
}

/* Featured title */
.ans-mag-layout2 .mag-featured .mag-title {
    font-size: 20px !important;
}

/* Right grid */
.ans-mag-layout2-list {
    display: grid;
    grid-template-columns: repeat(var(--ans-mag-columns, 3), minmax(0, 1fr));
    gap: 10px;
}

/* Grid cards */
.ans-mag-layout2-list .mag-item {
    height: 250px;
}

/* =========================================
   LAYOUT 3
   ========================================= */

.ans-mag-layout3 {
    display: grid;
    grid-template-rows: auto auto;
    gap: 10px;
}

.ans-mag-layout3-top {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    background-color: #efefef !important;
}

.ans-mag-layout3-top .mag-top {
    height: 300px;
}

.ans-mag-layout3-top .mag-title {
    font-size: 19px !important;
}

.ans-mag-layout3-bottom {
    display: grid;
    grid-template-columns: repeat(var(--ans-mag-columns, 4), minmax(0, 1fr));
    gap: 10px;
}

.ans-mag-layout3-bottom .mag-item {
    height: 190px;
}

/* Layout 4: wide hero on top + three supporting stories */
.ans-mag-layout4 {
    display: grid;
    grid-template-rows: auto auto;
    gap: 10px;
    background-color: #efefef;
}

.ans-mag-layout4 .mag-featured {
    max-height: 450px;
}

.ans-mag-layout4 .mag-featured .mag-title {
    font-size: 22px !important;
}

.ans-mag-layout4-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.ans-mag-layout4-list .mag-item {
    max-height: 230px;
}

/* Layout 5: stacked support cards + tall hero */
.ans-mag-layout5 {
    display: grid;
    grid-template-columns: 1fr 1.35fr;
    gap: 10px;
    background-color: #efefef;
}

.ans-mag-layout5-stack {
    display: grid;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.ans-mag-layout5-stack .mag-item {
    min-height: 200px;
}

.ans-mag-layout5 .mag-featured {
    min-height: 745px;
}

.ans-mag-layout5 .mag-featured .mag-title {
    font-size: 21px !important;
}

/* =========================================
   TABLET
   ========================================= */

@media (max-width: 1023px) {

    .ans-mag-layout2 {
        grid-template-columns: 1fr;
    }

    .ans-mag-layout2 .mag-featured {
        height: 360px;
    }

    .ans-mag-layout2-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ans-mag-layout3-top {
        grid-template-columns: 1fr;
    }

    .ans-mag-layout3-top .mag-top {
        height: 300px;
    }

    .ans-mag-layout3-bottom {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 767px) {

    .ans-mag-layout2 .mag-featured,
    .ans-mag-layout3-top .mag-top {
        height: 240px;
    }

    .ans-mag-layout2-list,
    .ans-mag-layout3-bottom {
        grid-template-columns: 1fr;
    }

    .ans-mag-layout2-list .mag-item,
    .ans-mag-layout3-bottom .mag-item {
        height: 170px;
    }

    .ans-mag-slider.ans-layout-2 .mag-title,
    .ans-mag-slider.ans-layout-3 .mag-title {
        font-size: 13px !important;
    }
}

/* Slider container fix */
#ans-mag-slider-1{
    height:auto !important;
}