/* STYLES FOR THE VIDEO LAYOUT GOES HERE */


/* ============================== */
/*        LAYOUT CARDS            */

.component-video { --grid-gap: 1px }
.component-video.layout-cards .item { --size: 100% }
.component-video.layout-cards .sm .item { --size: 50% }
.component-video.layout-cards .md .item { --size: 33.33% }

.component-video.layout-cards .items { 
    padding-right: var(--grid-gap);
    padding-bottom: var(--grid-gap);
}

.component-video.layout-cards .item {
	display:none;
    padding-top: var(--grid-gap);
    padding-left: var(--grid-gap);
    width: var(--size);
}

.component-video.layout-cards .ready .item {
	display:block;
}

.component-video.layout-cards .card {
    --bs-card-height: 100%;
    --bs-card-border-width: 0;
    --bs-card-bg: #000;
    --bs-card-border-radius: 0;
}

.component-video.layout-cards .video-btn-overlay {
    box-sizing: border-box;
    font-size: 3rem;
    z-index: 2;
}


/* ============================== */
/*        LAYOUT CAROUSEL         */
/* ============================== */

.component-video .slick-slider {
    flex-direction: column;
}

.component-video.layout-slider .item {
    width: 33%;
    padding: 0 1rem;
}

.component-video.layout-slider .video-btn-overlay {
    font-size: 2.5rem;
    padding: 5px;
    line-height:1;
    left: auto;
    bottom: auto;
    z-index: 2;
}

.component-video.layout-slider .slick-list {
    width: 100%;
    margin: 0 -0.5rem;
}

.component-video.layout-slider .slick-dots {
    position: static;
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    max-width: 440px;
    margin: 0 auto;
}

.component-video.layout-slider .slick-dots li {
    height: auto;
    padding: 1rem 0;
    margin: 0;
    flex: 1;
}

.component-video.layout-slider .slick-dots button {
    padding: 0;
    width: 100%;
    height: 4px;
    background: #ccc;
}

.component-video.layout-slider li.slick-active button {
    background-color: rgb(var(--bs-primary-rgb));
}

.component-video.layout-slider .slick-dots button:before {
    content: none;
}

/* =============================== */

/* ============================== */
/*        LAYOUT STANDARD         */
/* ============================== */

.component-video.layout-standard .item {
    width: 25%;
    padding: 0 0.5rem;
}

.component-video.layout-standard .slick-list {
    display: flex !important;
}

.component-video.layout-standard .slick-track {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 0;
}
.component-video.layout-standard .slick-track .slick-slide {
    float: none;
    box-sizing: border-box;
}

.component-video.layout-standard .item .card{
    height:100%;
    width:100%;
}

.component-video.layout-standard .video-btn-overlay {
    font-size: 2.5rem;
    line-height:1;
    left: 0;
    bottom: 0;
    right: auto;
    top: auto;
    z-index: 2;
}

.component-video.layout-standard .slick-list {
    margin: 0 -0.5rem;
}

.component-video.layout-standard .slick-dots {
    position: static;
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    max-width: 100%;
    margin: 0 auto;
}

.component-video.layout-standard .slick-dots li {
    height: auto;
    padding: 1rem 0;
    margin: 0;
    flex: 1;
}

.component-video.layout-standard .slick-dots button {
    padding: 0;
    width: 100%;
    height: 4px;
    background: #ccc;
}

.component-video.layout-standard li.slick-active button {
    background-color: rgb(var(--bs-primary-rgb));
}

.component-video.layout-standard .slick-dots button:before {
    content: none;
}

@media only screen and (min-width:768px) {
    .component-video.layout-standard .slick-dots {
        max-width: 50%;
    }
}
@media only screen and (min-width:1200px) {
    .component-video.layout-standard .slick-dots {
        max-width: 25%;
    }
}

/* =============================== */

/* Layout Carousel */
.component-video.layout-carousel .layout-wrapper > div { display:flex; flex-direction:column; gap:1rem }
.component-video.layout-carousel .layout-wrapper .playlist { display:flex; flex-direction:column; gap:1rem }
.component-video.layout-carousel .layout-wrapper .playlist .item { display:flex; flex-direction:row }
.component-video.layout-carousel .layout-wrapper .playlist .item .video-thumbnail { position:relative; min-width:33.33%; max-width:33.33% }
.component-video.layout-carousel .layout-wrapper .playlist .item .video-thumbnail-inner img { height:100%; object-fit:cover; border-radius:var(--bs-card-inner-border-radius) 0 0 var(--bs-card-inner-border-radius) }
.component-video.layout-carousel .layout-wrapper .playlist .item .video-thumbnail-inner span { position:absolute; left:50%; top:50%; font-size:2rem; transform:translate(-50%, -50%) }
.component-video.layout-carousel .layout-wrapper .playlist .item .card-body-inner { display:flex; flex-direction:column-reverse }

@media only screen and (min-width:992px) {
    .component-video.layout-carousel .layout-wrapper .playlist { flex-direction:row }
    .component-video.layout-carousel .layout-wrapper .playlist .item { flex-direction:column; flex:1 }
    .component-video.layout-carousel .layout-wrapper .playlist .item .video-thumbnail { display:block; overflow:hidden; min-width:none; max-width:none; padding-top:56.25% }
    .component-video.layout-carousel .layout-wrapper .playlist .item .video-thumbnail-inner { position:absolute; left:0; top:0; right:0; bottom:0 }
    .component-video.layout-carousel .layout-wrapper .playlist .item .video-thumbnail-inner img { border-radius:var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius) 0 0 }
}

/* Layout Stacked */
.component-video.layout-stacked .video-btn-overlay { box-sizing: border-box; font-size: 2.5rem; z-index: 2 }

@media only screen and (min-width:768px) {
    .component-video.layout-stacked .left-col .video-btn-overlay { font-size: 4rem }
}