/**
 * Team Video slider.
 *
 * Scoped to `.team-video-section` so the existing people team slider
 * (`.team-slider-s` without this class) is left completely untouched.
 *
 * Layout model — "reserved panel", no reflow
 * -------------------------------------------
 * Every card is the SAME fixed width: [ 16:9 poster | info panel ]. The panel's
 * width is ALWAYS reserved, so a card never changes width when it focuses —
 * Slick never reflows and the carousel never recenters.
 *
 * Every card shows its title + description. Focus is conveyed by shade, not by
 * hiding: non-focused panels use a darker backdrop (#050505) with a muted-white
 * title; the centered card (Slick's native `.slick-center`) gets a lighter
 * backdrop (#131313) and a brighter white title.
 *
 * IMPORTANT: the base theme sets `opacity: 0` on `.content`, so we force
 * `opacity: 1 !important` here — otherwise the whole panel (background + text)
 * stays invisible even though it's in the DOM.
 *
 * Pairs with assets/js/plugins.js ("15b. team video slider"): variableWidth (so
 * Slick honours the fixed card width) + centerMode, and NO setPosition (no
 * reflow, and none of the init-timing crashes that call caused).
 *
 * Tunables: --tv-poster-w, --tv-panel-w (card width is their sum), --tv-gap.
 */

.team-video-section {
  --tv-poster-w: 460px;
  --tv-panel-w: 340px;
  --tv-gap: 20px;        /* side margin per card */
}

/* Fixed-width card = poster + reserved panel. Same width in every state, so
   Slick never has to reflow/recenter when a card focuses. */
.team-video-section .team-s__slider-single {
  width: calc(var(--tv-poster-w) + var(--tv-panel-w));
  margin: 0 var(--tv-gap);
  overflow: hidden;
}

/* Card is a flex row in BOTH states (theme only flexes the active one and adds
   dark padding/bg around the portrait — neutralised here). */
.team-video-section .team-wrap,
.team-video-section .slick-center .team-wrap {
  display: flex !important;
  flex-direction: row;
  align-items: stretch;      /* panel matches the poster's height */
  gap: 0;                    /* panel sits flush against the poster */
  height: auto;
  padding: 0;
  background-color: transparent;
}

/* --- Poster: fixed 16:9, identical focused or not (no height/width shift) --- */
.team-video-section .team-wrap .thumb,
.team-video-section .slick-center .team-wrap .thumb {
  flex: 0 0 var(--tv-poster-w);
  width: var(--tv-poster-w);
  min-width: var(--tv-poster-w);
  max-width: var(--tv-poster-w);
  overflow: hidden;
}

.team-video-section .video-blog__play {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;      /* also in video-blog.css; restated to be safe */
}

/* Show the play button only on the centered card: non-centered cards are
   "click to center", the centered card is "click to play". */
.team-video-section .video-blog__play-icon {
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* On the centered card the button is visible AND clickable: it captures the
   click (pointer-events:auto) and video-blog.js treats a click on the button as
   an explicit "play this card", so it always starts playback (no reliance on
   click-through, which was unreliable). Non-centered icons stay pointer-events:
   none (from video-blog.css), so clicks there pass through to center the card. */
.team-video-section .slick-center .video-blog__play-icon {
  opacity: 1;
  pointer-events: auto;
  cursor: pointer;
}

/* The arrows container (.slide-group) is an absolutely-positioned FULL-WIDTH
   band pinned across the vertical center at z-index:9. Its empty middle sits
   directly over the centered card's play button and swallows the click (it
   reports as a click on DIV.slide-group, never reaching the button). Let the
   band pass clicks through, but keep the arrow buttons themselves clickable. */
.team-video-section .slide-group {
  pointer-events: none;
}

.team-video-section .slide-group .slide-btn {
  pointer-events: auto;
}

.team-video-section .team-wrap .thumb img,
.team-video-section .slick-center .team-wrap .thumb img {
  width: 100%;
  height: 100%;
  min-height: 0 !important;  /* theme forces min-height:500px on the focused thumb */
  object-fit: cover;
  display: block;
}

/* --- Panel: width is always reserved (no reflow); reveal is a pure opacity
       fade. Note the explicit `opacity: 0` + override on `.slick-center` — the
       base theme sets `opacity:0` on `.content`, so we MUST set it ourselves or
       the whole panel (background + text) stays invisible. --- */
.team-video-section .team-s__slider-single .content {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;         /* always visible (base theme sets opacity:0) */
  position: static !important;   /* undo theme + our old absolute positioning */
  transform: none !important;    /* kill theme translateY(100%) */
  animation: none !important;    /* kill theme 'fde' keyframe pop */
  overflow: hidden;
  box-sizing: border-box;
  background-color: #050505;     /* darker backdrop on non-focused cards */
  flex: 0 0 var(--tv-panel-w);
  width: var(--tv-panel-w);
  transition: background-color 0.4s ease;
}

.team-video-section .slick-center .content {
  background-color: #131313;     /* lighter forefront backdrop when centered */
}

/* Fixed-width inner (so text never reflows). It's ALWAYS rendered — the panel
   is hidden only by `.content`'s width:0 + overflow:hidden when not centered.
   We add a `transform` slide-in for polish only; a transform can't hide the
   text even if the class churns, so text is always visible once the panel has
   width. (Do NOT gate the text on opacity/visibility — those get out of sync
   with Slick's class updates and leave the panel blank.) */
.team-video-section .content__inner {
  width: var(--tv-panel-w);
  height: 100%;
  box-sizing: border-box;
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Title: large, white, brighter when the card is centered. */
.team-video-section .content__inner .intro h5,
.team-video-section .content__inner .intro h5 a {
  color: rgba(255, 255, 255, 0.7);   /* muted white on non-focused cards */
  margin: 0;
  font-size: 26px;
  line-height: 1.25;
  font-weight: 700;
  transition: color 0.4s ease;
  /* clamp long titles so card height stays stable */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.team-video-section .slick-center .content__inner .intro h5,
.team-video-section .slick-center .content__inner .intro h5 a {
  color: #ffffff;                    /* brighter title on the focused card */
}

.team-video-section .content hr {
  background-color: #414141;
  height: 1px;
  border: 0;
  margin: 16px 0;
  opacity: 1;
}

.team-video-section .content .inner,
.team-video-section .content .inner p {
  color: #cfcfcf;
  font-size: 14px;
  margin-bottom: 0;
}

/* Clamp a long description so the focused card never grows taller than the
   16:9 poster. */
.team-video-section .content .inner {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- Mobile: no room to fan out, so stack the panel under the poster ------- */
@media (max-width: 991px) {
  .team-video-section {
    --tv-gap: 12px;
  }

  .team-video-section .team-s__slider-single {
    width: 88vw;
    max-width: 520px;
  }

  .team-video-section .team-wrap,
  .team-video-section .slick-center .team-wrap {
    flex-direction: column;
    align-items: center;
  }

  .team-video-section .team-wrap .thumb,
  .team-video-section .slick-center .team-wrap .thumb {
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
    min-width: 0;
  }

  .team-video-section .team-s__slider-single .content {
    width: 100%;
    flex-basis: auto;
    max-height: 0;
    transition: max-height 0.5s ease, opacity 0.4s ease;
  }

  .team-video-section .slick-center .content {
    max-height: 640px;
  }

  .team-video-section .content__inner {
    width: 100%;
    transform: none;
  }

  .team-video-section .content .inner {
    -webkit-line-clamp: 8;
  }
}