/* public/videos-style.css */
/* Estilos para o carrossel de vídeos e modal do plugin Vídeos CEGOVBR */

/* Wrapper geral */
.videos-cegovbr-wrapper {
    margin: 1rem 0;
    /* só cria espaço acima e abaixo, se necessário */
}

/* Slides do Swiper */
.videos-swiper .swiper-slide {
    border-radius: .5rem;
    overflow: hidden;
    position: relative;
    margin-right: 10px;
    background-position: center;
    background-size: 600px;
    border-radius: 16px;
    transition: background-size 0.15s ease-in-out;
}

.videos-swiper .swiper-slide:hover { }

.video-thumb {
    width: 100%;
    height: 271px;
    background-color: transparent;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border-radius: 16px;
}

.video-thumb img {
position: absolute;
    top: 0;
    left: 0;
    width: 190px;
    height: 354px;
    object-fit: cover;
    object-position: center;
}


/* Legenda sobreposta */
.video-caption {
    transition: background 0.5s ease-in-out;
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 16px;
    font-size: .9rem;
    font-weight: 500;
    color: #fff;
    min-height: 50%;
    display: flex;
    align-items: end;
    background: #000000;
    background: -webkit-linear-gradient(0deg, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, 0) 100%);
    background: -moz-linear-gradient(0deg, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, 0) 100%);
    background: linear-gradient(0deg, rgba(0, 0, 0, 1) .8%, rgba(0, 0, 0, 0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000", endColorstr="#000000", GradientType=0);
}

/* Botões de navegação (classes + IDs para especificidade) */
.swiper-button-prev-custom,
.swiper-button-next-custom {
    border: none;
    border-radius: 50%;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Link “Ver mais conteúdo” */
.ver-mais-link {
    color: var(--color-primary-700);
    font-weight: 600;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-self: end;
    gap: 4px;
    outline-color: #545FFF;
}


.ver-mais-link:hover {
    color: var(--color-primary-600);
}


.ver-mais-link:focus,
.ver-mais-link:active {
    color: var(--color-primary-800);
}

.ver-mais-link span {
    text-decoration: underline;
}

/* Modal (Bootstrap 5) ajustes */
.modal-content.bg-transparent {
    background: transparent !important;
    border: none !important;
}

.modal-body.p-0 {
    position: relative;
    padding: 0 !important;
}

.modal-body.p-0 iframe {
    width: 100%;
    height: 60vh;
    border: 0;
}