/*
 * MFB Media Blocks Modern
 * Modernizes the Mad AI sidebar block and the Video carousel block
 * without touching headings, polls, header or News Tabs.
 */

/* ============================================================
   MAD AI / PHOTO SIDEBAR BLOCK
   Targets either the custom class .block-photos-slideshow or
   the default Drupal views block id for Photo (Content).
   ============================================================ */
.block-photos-slideshow,
#block-views-block-photo-block-1,
[id*="block-views-block-photo-block"] {
  background: #ffffff;
  border: 1px solid #e7e9ee;
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
  overflow: hidden;
}

.block-photos-slideshow > .content,
#block-views-block-photo-block-1 > .content,
[id*="block-views-block-photo-block"] > .content {
  padding: 14px;
}

.block-photos-slideshow .slick,
.block-photos-slideshow .slick--view,
.block-photos-slideshow .slick__slider,
.block-photos-slideshow .slick-list,
.block-photos-slideshow .slick-track,
#block-views-block-photo-block-1 .slick,
#block-views-block-photo-block-1 .slick--view,
#block-views-block-photo-block-1 .slick__slider,
#block-views-block-photo-block-1 .slick-list,
#block-views-block-photo-block-1 .slick-track,
[id*="block-views-block-photo-block"] .slick,
[id*="block-views-block-photo-block"] .slick--view,
[id*="block-views-block-photo-block"] .slick__slider,
[id*="block-views-block-photo-block"] .slick-list,
[id*="block-views-block-photo-block"] .slick-track {
  margin: 0;
}

.block-photos-slideshow .slick__slide,
#block-views-block-photo-block-1 .slick__slide,
[id*="block-views-block-photo-block"] .slick__slide {
  margin: 0;
}

.block-photos-slideshow .slide__content,
#block-views-block-photo-block-1 .slide__content,
[id*="block-views-block-photo-block"] .slide__content {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: #fff;
}

.block-photos-slideshow .views-field-field-image,
.block-photos-slideshow .views-field-images,
.block-photos-slideshow .field--name-field-image,
#block-views-block-photo-block-1 .views-field-field-image,
#block-views-block-photo-block-1 .views-field-images,
#block-views-block-photo-block-1 .field--name-field-image,
[id*="block-views-block-photo-block"] .views-field-field-image,
[id*="block-views-block-photo-block"] .views-field-images,
[id*="block-views-block-photo-block"] .field--name-field-image {
  line-height: 0;
}

.block-photos-slideshow img,
.block-photos-slideshow .slide__content img,
#block-views-block-photo-block-1 img,
#block-views-block-photo-block-1 .slide__content img,
[id*="block-views-block-photo-block"] img,
[id*="block-views-block-photo-block"] .slide__content img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 14px;
}

.block-photos-slideshow .slide__content .slide__caption,
#block-views-block-photo-block-1 .slide__content .slide__caption,
[id*="block-views-block-photo-block"] .slide__content .slide__caption {
  padding: 12px 2px 0;
  margin: 0;
}

.block-photos-slideshow .slide__content .slide__caption h2.slide__title,
#block-views-block-photo-block-1 .slide__content .slide__caption h2.slide__title,
[id*="block-views-block-photo-block"] .slide__content .slide__caption h2.slide__title {
  margin: 0;
  padding: 0;
  font-family: "Open Sans", Arial, Helvetica, Verdana, sans-serif;
  font-size: 17px;
  line-height: 1.35;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
}

.block-photos-slideshow h2.slide__title a,
#block-views-block-photo-block-1 h2.slide__title a,
[id*="block-views-block-photo-block"] h2.slide__title a {
  color: #263142;
  text-decoration: none;
}

.block-photos-slideshow h2.slide__title a:hover,
#block-views-block-photo-block-1 h2.slide__title a:hover,
[id*="block-views-block-photo-block"] h2.slide__title a:hover {
  color: #b70000;
}

.block-photos-slideshow ul.slick-dots,
#block-views-block-photo-block-1 ul.slick-dots,
[id*="block-views-block-photo-block"] ul.slick-dots {
  position: static;
  margin: 14px 0 0;
  padding: 0;
  text-align: center;
}

.block-photos-slideshow ul.slick-dots li,
.block-photos-slideshow ul.slick-dots li button,
#block-views-block-photo-block-1 ul.slick-dots li,
#block-views-block-photo-block-1 ul.slick-dots li button,
[id*="block-views-block-photo-block"] ul.slick-dots li,
[id*="block-views-block-photo-block"] ul.slick-dots li button {
  width: 10px;
  height: 10px;
}

.block-photos-slideshow ul.slick-dots li,
#block-views-block-photo-block-1 ul.slick-dots li,
[id*="block-views-block-photo-block"] ul.slick-dots li {
  margin: 0 4px;
}

.block-photos-slideshow ul.slick-dots li button,
#block-views-block-photo-block-1 ul.slick-dots li button,
[id*="block-views-block-photo-block"] ul.slick-dots li button {
  border-radius: 50%;
  background: #1f2937;
  opacity: 0.28;
}

.block-photos-slideshow ul.slick-dots li.slick-active button,
#block-views-block-photo-block-1 ul.slick-dots li.slick-active button,
[id*="block-views-block-photo-block"] ul.slick-dots li.slick-active button {
  background: #b70000;
  opacity: 1;
}

/* ============================================================
   VIDEO BLOCK
   Targets the video view and its optional wrapper classes
   block-greyfull width shown in the block placement screenshot.
   ============================================================ */
.block-greyfull.width,
.block-list-videos,
#block-views-block-video-block-1,
[id*="block-views-block-video-block"] {
  position: relative;
}

.block-greyfull.width {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 22px;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
  padding: 22px;
}

.block-greyfull.width > .content {
  overflow: visible;
}

.block-greyfull.width .block-list-videos,
#block-views-block-video-block-1,
[id*="block-views-block-video-block"] {
  margin: 0;
}

.block-greyfull.width .slick-list,
#block-views-block-video-block-1 .slick-list,
[id*="block-views-block-video-block"] .slick-list {
  overflow: hidden;
}

.block-greyfull.width .slick__slide,
#block-views-block-video-block-1 .slick__slide,
[id*="block-views-block-video-block"] .slick__slide {
  padding: 0 10px;
  margin: 0;
  box-sizing: border-box;
}

.block-greyfull.width .slide__content,
#block-views-block-video-block-1 .slide__content,
[id*="block-views-block-video-block"] .slide__content {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: #111827;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.18);
}

.block-greyfull.width .views-field-video,
.block-greyfull.width .field--name-field-video,
#block-views-block-video-block-1 .views-field-video,
#block-views-block-video-block-1 .field--name-field-video,
[id*="block-views-block-video-block"] .views-field-video,
[id*="block-views-block-video-block"] .field--name-field-video {
  display: block;
  line-height: 0;
}

.block-greyfull.width .views-field-video img,
.block-greyfull.width .views-field-video iframe,
.block-greyfull.width .views-field-video video,
.block-greyfull.width .field--name-field-video img,
.block-greyfull.width .field--name-field-video iframe,
.block-greyfull.width .field--name-field-video video,
#block-views-block-video-block-1 .views-field-video img,
#block-views-block-video-block-1 .views-field-video iframe,
#block-views-block-video-block-1 .views-field-video video,
#block-views-block-video-block-1 .field--name-field-video img,
#block-views-block-video-block-1 .field--name-field-video iframe,
#block-views-block-video-block-1 .field--name-field-video video,
[id*="block-views-block-video-block"] .views-field-video img,
[id*="block-views-block-video-block"] .views-field-video iframe,
[id*="block-views-block-video-block"] .views-field-video video,
[id*="block-views-block-video-block"] .field--name-field-video img,
[id*="block-views-block-video-block"] .field--name-field-video iframe,
[id*="block-views-block-video-block"] .field--name-field-video video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 0;
}

.block-greyfull.width .slide__caption,
#block-views-block-video-block-1 .slide__caption,
[id*="block-views-block-video-block"] .slide__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  padding: 20px 18px 16px;
  background: linear-gradient(to top, rgba(7, 11, 22, 0.94) 0%, rgba(7, 11, 22, 0.66) 55%, rgba(7, 11, 22, 0.08) 100%);
  text-align: left;
  box-sizing: border-box;
  color: #fff;
}

.block-greyfull.width .slide__caption h2.slide__title,
#block-views-block-video-block-1 .slide__caption h2.slide__title,
[id*="block-views-block-video-block"] .slide__caption h2.slide__title {
  margin: 0;
  font-family: "Open Sans Condensed", Arial, Helvetica, Verdana, sans-serif;
  font-size: 18px;
  line-height: 1.18;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
}

.block-greyfull.width .slide__caption h2.slide__title a,
#block-views-block-video-block-1 .slide__caption h2.slide__title a,
[id*="block-views-block-video-block"] .slide__caption h2.slide__title a {
  color: #fff;
  text-decoration: none;
}

.block-greyfull.width .slide__caption h2.slide__title a:hover,
#block-views-block-video-block-1 .slide__caption h2.slide__title a:hover,
[id*="block-views-block-video-block"] .slide__caption h2.slide__title a:hover {
  color: #fff;
}

.block-greyfull.width .slick__arrow button,
#block-views-block-video-block-1 .slick__arrow button,
[id*="block-views-block-video-block"] .slick__arrow button {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.58);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.18);
  backdrop-filter: blur(6px);
  opacity: 1;
}

.block-greyfull.width .slick__arrow button:hover,
#block-views-block-video-block-1 .slick__arrow button:hover,
[id*="block-views-block-video-block"] .slick__arrow button:hover {
  background: rgba(17, 24, 39, 0.82);
}

.block-greyfull.width .slick__arrow button:before,
#block-views-block-video-block-1 .slick__arrow button:before,
[id*="block-views-block-video-block"] .slick__arrow button:before {
  color: #ffffff;
  font-size: 22px;
  line-height: 1;
}

.block-greyfull.width .slick__arrow button.slick-prev,
#block-views-block-video-block-1 .slick__arrow button.slick-prev,
[id*="block-views-block-video-block"] .slick__arrow button.slick-prev {
  left: 14px;
}

.block-greyfull.width .slick__arrow button.slick-next,
#block-views-block-video-block-1 .slick__arrow button.slick-next,
[id*="block-views-block-video-block"] .slick__arrow button.slick-next {
  right: 14px;
}

/* Compact the footer/menu spacer if the video block is used there. */
.block-greyfull.width + .footer-menu,
.block-greyfull.width + .region-footer,
.block-greyfull.width + #footer {
  margin-top: 18px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 991px) {
  .block-greyfull.width {
    padding: 16px;
    border-radius: 18px;
  }

  .block-greyfull.width .slick__slide,
  #block-views-block-video-block-1 .slick__slide,
  [id*="block-views-block-video-block"] .slick__slide {
    padding: 0 8px;
  }

  .block-greyfull.width .slide__caption h2.slide__title,
  #block-views-block-video-block-1 .slide__caption h2.slide__title,
  [id*="block-views-block-video-block"] .slide__caption h2.slide__title {
    font-size: 16px;
  }
}

@media (max-width: 767px) {
  .block-photos-slideshow > .content,
  #block-views-block-photo-block-1 > .content,
  [id*="block-views-block-photo-block"] > .content {
    padding: 12px;
  }

  .block-photos-slideshow .slide__content .slide__caption h2.slide__title,
  #block-views-block-photo-block-1 .slide__content .slide__caption h2.slide__title,
  [id*="block-views-block-photo-block"] .slide__content .slide__caption h2.slide__title {
    font-size: 16px;
  }

  .block-greyfull.width {
    padding: 12px;
    border-radius: 16px;
  }

  .block-greyfull.width .slide__caption,
  #block-views-block-video-block-1 .slide__caption,
  [id*="block-views-block-video-block"] .slide__caption {
    padding: 16px 14px 13px;
  }

  .block-greyfull.width .slide__caption h2.slide__title,
  #block-views-block-video-block-1 .slide__caption h2.slide__title,
  [id*="block-views-block-video-block"] .slide__caption h2.slide__title {
    font-size: 15px;
  }

  .block-greyfull.width .slick__arrow button,
  #block-views-block-video-block-1 .slick__arrow button,
  [id*="block-views-block-video-block"] .slick__arrow button {
    width: 36px;
    height: 36px;
  }

  .block-greyfull.width .slick__arrow button:before,
  #block-views-block-video-block-1 .slick__arrow button:before,
  [id*="block-views-block-video-block"] .slick__arrow button:before {
    font-size: 18px;
  }
}