/**
 * Video Blog cards - inline video playback.
 * Reuses the existing .blog-two__slider-single / .blog__single-* card layout;
 * only the thumbnail area is enhanced with a play overlay + inline player.
 */

.video-blog__thumb {
  position: relative;
  overflow: hidden;
}

/* Hidden source holder - JS reads the video URL(s) from here. */
.video-blog__sources {
  display: none !important;
}

/* Poster/trigger fills the card and keeps a 16:9 frame. */
.video-blog__play {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.video-blog__play img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Centered play button over the poster. */
.video-blog__play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 24px;
  transition: background 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}

.video-blog__play:hover .video-blog__play-icon {
  background: rgba(0, 0, 0, 0.8);
  transform: translate(-50%, -50%) scale(1.08);
}

.video-blog__play-icon i {
  margin-left: 4px; /* optically center the triangle */
}

/* Inline player mount - hidden until a video is started. */
.video-blog__player {
  display: none;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}

.video-blog__thumb.is-playing .video-blog__play {
  display: none;
}

.video-blog__thumb.is-playing .video-blog__player {
  display: block;
}

.video-blog__video,
.video-blog__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #000;
}

/* --------------------------------------------------------------------------
 * Title + description shown BELOW the video (always visible).
 * Scoped to .video-blog-card so the real blog section (which uses the same
 * .blog-two__slider-single / .blog__single-content classes for its hover
 * overlay) is left untouched.
 * ------------------------------------------------------------------------ */

/* Kill the hover gradient overlay that would otherwise sit over the card. */
.video-blog-card::before {
  display: none !important;
}

/* Take the content out of the absolute hover-reveal and place it in normal
 * flow, directly under the video, always visible.
 * Selector matches the theme's own `.blog-two .blog-two__slider-single
 * .blog__single-content` (0,3,0) specificity so it reliably wins; `!important`
 * is belt-and-suspenders on the positioning props. */
.blog-two .video-blog-card .blog__single-content,
.video-blog-card.blog-two__slider-single .blog__single-content {
  position: static !important; /* override theme's absolute overlay */
  inset: auto !important;
  transform: none !important;
  width: 100%;
  padding: 24px 20px 0 !important;
  margin: 0 !important;
  color: #1a1a1a; /* readable on a light section bg; flip if bg is dark */
}

.blog-two .video-blog-card:hover .blog__single-content,
.video-blog-card.blog-two__slider-single:hover .blog__single-content {
  transform: none !important;
}

.video-blog-card .blog__single-content h4 {
  margin-bottom: 10px;
}

.video-blog-card .blog__single-content h4 a {
  color: #ffffff;      /* white title (needs a dark-enough section background) */
  font-size: 30px;     /* large; px to match the theme (which uses no rem/em) */
  line-height: 1.25;
  font-weight: 700;
  /* Clamp long titles to 2 lines for even card heights. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Extra horizontal spacing between cards in the Home Video Blog carousel only
   (scoped to .blog-two--video, so the regular blog carousel is untouched). */
.blog-two--video .blog-two__slider .slick-slide {
  box-sizing: border-box;
  padding-left: 15px;
  padding-right: 15px;
}

/* Description: clamp to 3 lines so every card is the same height in the
 * carousel regardless of copy length. */
.video-blog-card .blog__single-content-desc {
  color: inherit;
  opacity: 0.85;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.video-blog-card .blog__single-content-desc p:last-child {
  margin-bottom: 0;
}

/* Match the theme's responsive padding step-down on smaller screens. */
@media (max-width: 767px) {
  .video-blog-card .blog__single-content {
    padding: 20px 16px 0;
  }
}