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

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

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

.youtube-grid{
    display:grid;
    grid-template-columns:repeat(var(--yt-cols,4),minmax(0,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;

}

/*==========================
COLUMNS (set per block / playlist)
==========================*/

.youtube-cols-1{--yt-cols:1}
.youtube-cols-2{--yt-cols:2}
.youtube-cols-3{--yt-cols:3}
.youtube-cols-4{--yt-cols:4}
.youtube-cols-5{--yt-cols:5}
.youtube-cols-6{--yt-cols:6}

.youtube-card[hidden]{display:none}

/*==========================
LOAD MORE
==========================*/

.youtube-more-wrap{
    text-align:center;
    margin-top:30px;
}

.youtube-more{
    background:#d71920;
    color:#fff;
    border:0;
    border-radius:999px;
    padding:12px 34px;
    font-size:16px;
    font-weight:600;
    cursor:pointer;
    transition:.3s;
}

.youtube-more:hover,
.youtube-more:focus-visible{
    background:#005baa;
}

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

.youtube-modal{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.88);
    z-index:99999;
}

.youtube-modal.is-open{
    display:block;
}

.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;
    display:block;
}

.youtube-close{
    position:absolute;
    top:-48px;
    right:0;
    background:none;
    border:0;
    color:#fff;
    font-size:38px;
    line-height:1;
    cursor:pointer;
}

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

.youtube-empty{
    padding:80px;
    text-align:center;
    border:2px dashed #ddd;
    border-radius:12px;
    color:#888;
    font-size:18px;
}

/*==========================
RESPONSIVE
(configured columns apply on large screens; they step down on smaller ones)
==========================*/

@media(max-width:1200px){
    .youtube-cols-4,.youtube-cols-5,.youtube-cols-6{--yt-cols:3}
}

@media(max-width:991px){
    .youtube-cols-3,.youtube-cols-4,.youtube-cols-5,.youtube-cols-6{--yt-cols:2}
}

@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%}
}