/*
---------------------------------------------------
YouTube Playlist Gallery
Drupal 11
---------------------------------------------------
*/

.youtube-playlist-wrapper{
    width:100%;
    margin:40px auto;
}

/*==========================
GRID
==========================*/

.youtube-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
    gap:30px;
}

/*==========================
CARD
==========================*/

.youtube-card{
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 10px 35px rgba(0,0,0,.08);
    transition:.35s;
    position:relative;
}

.youtube-card:hover{
    transform:translateY(-8px);
    box-shadow:0 18px 45px rgba(0,0,0,.15);
}

/*==========================
IMAGE
==========================*/

.youtube-thumb{
    position:relative;
    overflow:hidden;
    aspect-ratio:16/9;
    background:#eee;
}

.youtube-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.5s;
    display:block;
}

.youtube-card:hover img{
    transform:scale(1.08);
}

/*==========================
PLAY BUTTON
==========================*/

.play-icon{

    position:absolute;

    left:50%;
    top:50%;

    transform:translate(-50%,-50%);

    width:70px;
    height:70px;

    border-radius:50%;

    background:#d71920;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;

    transition:.35s;

    box-shadow:0 10px 25px rgba(0,0,0,.35);

}

.youtube-card:hover .play-icon{

    background:#005baa;

    transform:translate(-50%,-50%) scale(1.15);

}

/*==========================
CONTENT
==========================*/

.youtube-content{

    padding:20px;

}

.youtube-title{

    margin:0;

    font-size:18px;

    font-weight:700;

    color:#222;

    line-height:1.5;

    min-height:54px;

}

.youtube-date{

    margin-top:12px;

    font-size:14px;

    color:#777;

}

/*==========================
LINK
==========================*/

.youtube-popup{

    text-decoration:none;

    color:inherit;

}

/*==========================
MODAL
==========================*/

.youtube-modal{

    display:none;

    position:fixed;

    left:0;

    top:0;

    width:100%;

    height:100%;

    background:rgba(0,0,0,.88);

    z-index:99999;

}

.youtube-modal-content{

    position:absolute;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    width:90%;

    max-width:960px;

}

.youtube-modal iframe{

    width:100%;

    aspect-ratio:16/9;

    border:none;

    border-radius:10px;

    background:#000;

}

.youtube-close{

    position:absolute;

    top:-45px;

    right:0;

    color:#fff;

    font-size:38px;

    cursor:pointer;

}

/*==========================
EMPTY
==========================*/

.youtube-empty{

    padding:80px;

    text-align:center;

    border:2px dashed #ddd;

    border-radius:12px;

    color:#888;

    font-size:18px;

}

/*==========================
RESPONSIVE
==========================*/

@media(max-width:1200px){

.youtube-grid{

grid-template-columns:repeat(3,1fr);

}

}

@media(max-width:991px){

.youtube-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:767px){

.youtube-grid{

grid-template-columns:1fr;

}

.youtube-title{

font-size:16px;

min-height:auto;

}

.play-icon{

width:58px;
height:58px;
font-size:22px;

}

.youtube-modal-content{

width:95%;

}

}