/*=- EXCEPTION: You are importing a file ending in .less that cannot be found [../../../../custom/FG/client/src/styles/_classes.less]. -=*/

/*=- /Content/Layouts/Clean/stylesheets/media-ad-list.less -=*/
@import (reference) "../../../../custom/FG/client/src/styles/_classes.less";

// .media-ad-list {
//     display: flex;

//     .media-ad-group-1 {
//         flex: 0 0 20em;
//         display: flex;
//         flex-wrap: wrap;

//         .media-ad-cell {
//             width: 10em;
//             height: 10em;
//             padding: .5em;

//             .media-ad .description { display: none; }
//         }
//     }

//     .media-ad-group-2 {
//         flex-grow: 1;
//         display: flex;

//         .media-ad-cell {
//             flex-basis: 60%;
//             width: 24.375em;
//             padding: .5em;

//             .media-ad .media-ad-details { flex-shrink: 0; }
//         }
//     }
// }
.media-ad-list {
    display: flex;
    gap: .5em;
}

/* GROUP 1 – BIG IMAGE */
.media-ad-group-1 {
     flex: 1.6;
background-size: cover;
    .media-ad-cell {
        height: 35rem;
        width: 100%;
      color:white;
    }
}

/* GROUP 2 – 4 STACKED IMAGES */
.media-ad-group-2 {
    flex:1.6;
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-rows:1fr 1fr;
    gap:10px;

    .media-ad-cell {
        width:100%;
        height:100%;
      color:white;
    }

    // .description {
    //     display: none;
    // }
}

// .media-ad {
//     width: 100%;
//     height: 100%;
//     background-size: cover;
//     background-position: center;
// }
// .media-ad {
//     display: flex;
//     // align-items: baseline;
//     // justify-content: baseline;
//     height: 100%;
//     background-size: cover;
//     background-repeat: no-repeat;
//     background-position: center;
//     position: relative;
//     .radius(5px);
    .media-ad-list{
    max-width:1200px;
    margin:auto;
}

//     .media-ad-content {
//         opacity: 0;
//         .trans(opacity);
//         margin: .5em;
//         color: @white;
//         position: relative;
//         z-index: 1;
//         display: contents;
//         // text-align: left;
//         // float: left;
//     }

//     .description {
//         font-size: .875em;
//         margin-right: 2em;
//     }

//     .media-ad-details {
//         text-align: right;
//         // align-self: baseline;

//         .title {
//             font-size: 1.25em;
//             font-weight: bold;
//             text-transform: capitalize;
//         }

//         .subtitle {

//             span { font-size: .75em; }

//             strong {
//                 display: block;
//                 font-weight: normal;
//             }
//         }

//         .action {
//             margin-top: .5em;

//             a.button { font-size: .75em; }
//         }
//     }

//     &::before {
//         display: block;
//         content: '';
//         position: absolute;
//         top: 0;
//         right: 0;
//         bottom: 0;
//         left: 0;
//         .trans(box-shadow);
//     }

//     &:hover {
//         .media-ad-content { opacity: 1; }
//         &::before { .shadow(-3em -10em 18em -5em, fade(@black, 60%) inset); }
//     }
// }

.media-ad {
    width: 100%;
    height: 100%;
    color:white;
    display: flex;
    align-items: flex-end;        /* bottom */
    justify-content: flex-start;  /* left */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    .radius(6px);
      border-radius: 3px;
    //  aspect-ratio:16/9;
}

/* Overlay container */
.media-ad-content {
    opacity: 1;                  /* ALWAYS visible */
    margin: .75em;
    color: @white;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;     /* left */
    text-align: left;
    max-width: 80%;
}

/* Description text (bottom-left) */
.media-ad .description {
    font-size: .875em;
    margin-bottom: .25em;
}

/* Details block */
.media-ad-details {
    text-align: left;
    list-style-type: none;

    .title {
        font-size: 30px;
        font-weight: 700;
        text-transform: capitalize;
    }

    .subtitle {
        span {
            font-size: 15px;
            font-weight: 400;
        }

        strong {
            margin-top: 4px;
            display: block;
            font-weight: 700;
            font-size: 30px;
        }
    }

    // .action {
    //    width: 134px;
    //     height: 42px;
    //     border-radius: 4px;
    //     border: 1px solid white;
    //     background: rgba(0, 32, 91, 1); 

    //     a.button {
    //         font-size: 15px;
    //     }
    // }
}

// #media_list_submit_button
// {
//         width: 94px;
//         height: 34px;
//         border-radius: 4px;
//         border: 1px solid white;
//         background: rgba(0, 32, 91, 1); 
//         font-size: 14px;
//         text-transform: capitalize;

// }
/* Button bottom-right */
.media-ad-button {
    // align-self: flex-end;
    white-space: nowrap;
    padding: .5em 1em;
    color: @white;
    width: 79px;
    height: 32px;
    border-radius: 4px;
    border: 1px solid white;
    background: rgba(0, 32, 91, 1); 
    font-size: 12px;
    text-transform: capitalize;
}

// .media-ad-button:hover {
//     background: fade(@black, 85%);
// }

/* Dark gradient for readability */
.media-ad::before {
    content: '';
    position: absolute;
    inset: 0;
    // background: linear-gradient(
    //     to top,
    //     fade(@black, 65%) 0%,
    //     fade(@black, 30%) 40%,
    //     transparent 70%
    // );
    z-index: 0;
}


*{
box-sizing:border-box;
}

img{
max-width:100%;
height:auto;
}


/* =========================
TABLET
========================= */
@media (max-width:1118px){

.media-ad-list{
    flex-direction:column;
        background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.media-ad-group-1 .media-ad-cell{
        background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height:26rem;
}

.media-ad-group-2{
    grid-template-columns:1fr 1fr;
    grid-template-rows:200px 200px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

}

/* =========================
MOBILE
========================= */
@media (max-width:470px){

.media-ad-group-1 .media-ad-cell{
        background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height:22rem;
}

.media-ad-group-2{
    grid-template-columns:1fr;
    grid-template-rows:auto;
}

.media-ad-group-2 .media-ad-cell{
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height:180px;
}

.media-ad-details .title{
    font-size:22px;
}

.media-ad-details .subtitle strong{
    font-size:22px;
}

}

/* =========================
SMALL MOBILE
========================= */
@media (max-width:480px){

.media-ad-group-1 .media-ad-cell{
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height:200px;
}

.media-ad-group-2 .media-ad-cell{
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height:160px;
}

}