/*
 * TYPO3 Slick Slider - custom styles
 * Goal: display up to 4 YouTube videos side-by-side (slidesToShow = 4)
 * Slider max-width: 1170px
 */

/* =====================================================================
   MAIN SLIDER
   ===================================================================== */
.frame-default {
  padding: 0 15px;
  margin: 0 auto;
  position: relative;
}

@media (min-width: 768px) {
  .frame-default {
      width: 750px;
  }
}
@media (min-width: 992px) {
  .frame-default {
      width: 970px;
  }
}
@media (min-width: 1200px) {
  .frame-default {
      width: 1170px;
  }
}


.slick-slider {
    max-width: 1070px;
    margin: 0 auto;
    position: relative;
}

/* =====================================================================
   SLIDES
   Slick sets an inline width on .slick-slide based on slidesToShow.
   We just need to make sure the Bootstrap .container inside does not
   override that width.
   ===================================================================== */

.slick-slider .slick-slide {
    box-sizing: border-box;
    padding: 0 10px;
}

/*
 * Override Bootstrap's fixed .container width (1170px @ >=1200px)
 * ONLY inside the Slick slider, so the rest of the site is untouched.
 */
.slick-slider .slick-slide div.container[id^="c"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-left: 0;
    padding-right: 0;
    margin: 0;
    display: block;
    position: relative;
}

/* TYPO3 content element wrappers (uid-xxxxx / csc-default) */
.slick-slider .slick-slide .csc-default,
.slick-slider .slick-slide [id^="uid-"] {
    width: 100%;
    max-width: 100%;
}

/* =====================================================================
   YOUTUBE IFRAMES
   Force iframes to fill the slide width and keep a portrait ratio
   (your source is 315x560 = 9/16). Change aspect-ratio if you switch
   to landscape (16/9).
   ===================================================================== */

.slick-slider .slick-slide iframe {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 9 / 16;
    border: 0;
}

/* =====================================================================
   ARROWS
   ===================================================================== */

.slick-slider .slick-prev,
.slick-slider .slick-next {
    display: block !important;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 10;
    font-size: 0;
    line-height: 0;
}

.slick-slider .slick-prev { left: -35px; }
.slick-slider .slick-next { right: -35px; }

.slick-slider .slick-prev:before,
.slick-slider .slick-next:before {
    font-family: 'slick';
    font-size: 30px;
    line-height: 1;
    color: #4a8a3f;
    opacity: 0.85;
    display: block;
}

.slick-slider .slick-prev:hover:before,
.slick-slider .slick-next:hover:before {
    opacity: 1;
}

/* =====================================================================
   DOTS
   ===================================================================== */

.slick-slider .slick-dots {
    bottom: -30px;
    text-align: center;
}

.slick-slider .slick-dots li button:before {
    color: #4a8a3f;
    font-size: 12px;
    opacity: 0.4;
}

.slick-slider .slick-dots li.slick-active button:before {
    opacity: 1;
}