/**
 * @file
 * Video section sidebar — 2 rows of banners, scroll by column (native Slick).
 */

.mod-video-sidebar-block .mod-block__title,
.mod-view--video-sidebar .mod-block__title {
  display: none;
}

.mod-video-section__sidebar .mod-video-sidebar-block,
.mod-video-section__sidebar .mod-view--video-sidebar,
.mod-video-section__sidebar .banner-bottom {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  padding: 0 32px;
}

.mod-video-sidebar-block .mod-block__content,
.mod-video-section__sidebar .views-element-container {
  width: 100%;
}

.mod-video-sidebar-block .slick,
.mod-view--video-sidebar .slick,
.mod-video-sidebar-block .slick__slider,
.mod-view--video-sidebar .slick__slider {
  position: relative;
  margin: 0;
}

.mod-video-sidebar-block .slick-list,
.mod-view--video-sidebar .slick-list {
  margin: 0;
  overflow: hidden;
}

/* Native Slick grid (rows:2, slidesToShow:2): each cell gets a small gutter so
   the 2x2 layout has consistent spacing like the source carousel's margin:10. */
.mod-video-sidebar-block .slide__content,
.mod-view--video-sidebar .slide__content {
  margin: 0;
  padding: 5px;
  box-sizing: border-box;
}

.mod-video-sidebar-block .slide--link,
.mod-view--video-sidebar .slide--link,
.mod-video-sidebar-block .slide__link,
.mod-view--video-sidebar .slide__link {
  display: block;
}

.mod-video-sidebar-block .slide__caption,
.mod-view--video-sidebar .slide__caption {
  margin: 0;
  padding: 0;
}

.mod-video-sidebar-block .slide__overlay,
.mod-view--video-sidebar .slide__overlay {
  display: block;
  overflow: hidden;
  aspect-ratio: 17 / 7;
  background-color: #fff;
}

.mod-video-sidebar-block .slide__overlay a.mod-video-sidebar__link,
.mod-view--video-sidebar .slide__overlay a.mod-video-sidebar__link {
  display: block;
  width: 100%;
  height: 100%;
}

/* The video_sidebar_banner image style normalises every banner to 364x150
   (~2.43:1), matching the tile aspect-ratio, so cover fills edge to edge and
   all tiles look uniform like the source carousel (no white bars). */
.mod-video-sidebar-block .slide__overlay img,
.mod-view--video-sidebar .slide__overlay img {
  display: block;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center center;
}

/* field_link renders as a visible URL below the image; hide it (the image is
   wrapped in the link via JS instead) so it never inflates the tile height. */
.mod-video-sidebar-block .slide__data,
.mod-view--video-sidebar .slide__data {
  display: none !important;
}

.mod-video-sidebar-block .slide__media,
.mod-view--video-sidebar .slide__media {
  display: none !important;
}

.mod-video-sidebar-block .slick-dots,
.mod-view--video-sidebar .slick-dots {
  display: none !important;
}

.mod-video-sidebar-block .slick-arrow,
.mod-view--video-sidebar .slick-arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 28px;
  height: 72px;
  padding: 0;
  border: 0;
  background: none;
  color: #555;
  font-size: 0;
  line-height: 0;
  cursor: pointer;
  transform: translateY(-50%);
}

.mod-video-sidebar-block .slick-prev,
.mod-view--video-sidebar .slick-prev {
  left: -32px;
}

.mod-video-sidebar-block .slick-next,
.mod-view--video-sidebar .slick-next {
  right: -32px;
}

.mod-video-sidebar-block .slick-prev::before,
.mod-video-sidebar-block .slick-next::before,
.mod-view--video-sidebar .slick-prev::before,
.mod-view--video-sidebar .slick-next::before {
  display: block;
  font-size: 42px;
  font-weight: 300;
  line-height: 1;
  color: #555;
  opacity: 1;
}

.mod-video-sidebar-block .slick-prev::before,
.mod-view--video-sidebar .slick-prev::before {
  content: '‹';
}

.mod-video-sidebar-block .slick-next::before,
.mod-view--video-sidebar .slick-next::before {
  content: '›';
}

@media (max-width: 991px) {
  .mod-video-section__sidebar .mod-video-sidebar-block,
  .mod-video-section__sidebar .mod-view--video-sidebar {
    padding: 0 28px;
  }

  .mod-video-sidebar-block .slick-prev,
  .mod-view--video-sidebar .slick-prev {
    left: -28px;
  }

  .mod-video-sidebar-block .slick-next,
  .mod-view--video-sidebar .slick-next {
    right: -28px;
  }

  .mod-video-sidebar-block .slick-arrow,
  .mod-view--video-sidebar .slick-arrow {
    width: 24px;
    height: 48px;
  }

  .mod-video-sidebar-block .slick-prev::before,
  .mod-video-sidebar-block .slick-next::before,
  .mod-view--video-sidebar .slick-prev::before,
  .mod-view--video-sidebar .slick-next::before {
    font-size: 32px;
  }
}