/* TimelyChurch KB — video cards (YouTube facade + self-hosted Plyr player).
   Loaded by the article layout only when an article contains a .tc-video-card. */
.doc-section-content .tc-video-card {
  --tc-blue: #1470F2;
  --plyr-color-main: #1470F2;
  --plyr-font-family: inherit;
  --plyr-control-radius: 8px;
  --plyr-video-control-background-hover: #1470F2;
  --plyr-menu-radius: 10px;
  --plyr-tooltip-radius: 6px;
  --plyr-range-thumb-height: 14px;
  --plyr-range-track-height: 5px;
  margin: 24px 0;
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(17, 24, 39, .05), 0 12px 32px -12px rgba(17, 24, 39, .22);
  overflow: hidden;
}
.tc-video-card__head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
  padding: 12px 18px; font-size: 14px; line-height: 1.4; color: #4B5563;
}
.tc-video-card__eyebrow { color: #1470F2; font-weight: 600; }
.tc-video-card__title { color: #111827; font-weight: 600; }
.tc-video-card__time { margin-left: auto; font-variant-numeric: tabular-nums; color: #6B7280; }
.tc-video-card__eyebrow::after, .tc-video-card__title::after { content: "\00b7"; margin-left: 10px; color: #9CA3AF; font-weight: 400; }
.tc-video-card__time { margin-left: 0; }
.tc-video-card__player { position: relative; background: #0B1220; aspect-ratio: 16 / 9; }
.tc-video-card__player video { display: block; width: 100%; height: 100%; background: #0B1220; object-fit: cover; }
.doc-section .tc-video-card img { margin: 0; max-width: none; }
.tc-video-card figcaption { padding: 12px 18px 14px; font-size: 14px; color: #6B7280; border-top: 1px solid #F3F4F6; }

/* Shared branded play button */
.tc-video-card {
  /* one play-button look for both cards (owner's pick, 2026-10-10): frosted glass, a fine white
     edge, a soft shadow, and a rounded white triangle optically centred */
  --tc-play-size: 78px;
  --tc-play-bg: rgba(255, 255, 255, .18);
  --tc-play-bg-hover: rgba(255, 255, 255, .30);
  --tc-play-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .58), 0 10px 26px rgba(3, 8, 20, .35);
  --tc-play-blur: blur(10px) saturate(140%);
  --tc-poster-tint: radial-gradient(ellipse at center, rgba(6, 12, 26, .34) 0%, rgba(6, 12, 26, .18) 55%, rgba(6, 12, 26, .26) 100%);
}
.tc-video-card .tc-play {
  display: flex; align-items: center; justify-content: center;
  width: var(--tc-play-size); height: var(--tc-play-size); border-radius: 50%;
  background: var(--tc-play-bg); color: #fff;
  -webkit-backdrop-filter: var(--tc-play-blur); backdrop-filter: var(--tc-play-blur);
  box-shadow: var(--tc-play-shadow);
  transition: transform .18s ease, background-color .18s ease;
}
.tc-video-card .tc-play svg { display: block; width: 34%; height: 34%; margin: 0; fill: currentColor; filter: drop-shadow(0 1px 2px rgba(3, 8, 20, .35)); }

/* YouTube click-to-load facade */
.tc-video-card .tc-yt { position: absolute; inset: 0; }
.doc-section-content .tc-video-card a.tc-yt__facade {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  border: 0; text-decoration: none; cursor: pointer; color: #fff;
}
.tc-video-card .tc-yt__facade img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tc-video-card .tc-yt__facade::before {
  content: ""; position: absolute; inset: 0; background: var(--tc-poster-tint);
  transition: background-color .18s ease;
}
.tc-video-card .tc-yt__facade:hover::before { background-color: rgba(6, 12, 26, .08); }
.tc-video-card .tc-yt__facade .tc-play { position: relative; }
.tc-video-card .tc-yt__facade:hover .tc-play { transform: scale(1.05); background: var(--tc-play-bg-hover); }
.tc-video-card .tc-yt__facade:focus-visible { outline: 3px solid #fff; outline-offset: -6px; box-shadow: inset 0 0 0 6px #1470F2; }
.tc-video-card .tc-yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Plyr skin (brand) */
.tc-video-card .plyr { height: 100%; border-radius: 0; }
.tc-video-card .plyr--video .plyr__control--overlaid {
  display: flex; align-items: center; justify-content: center;
  width: var(--tc-play-size); height: var(--tc-play-size); padding: 0; background: var(--tc-play-bg); color: #fff; opacity: 1;
  -webkit-backdrop-filter: var(--tc-play-blur); backdrop-filter: var(--tc-play-blur);
  box-shadow: var(--tc-play-shadow);
  transition: transform .18s ease, background-color .18s ease;
}
.tc-video-card .plyr--video .plyr__control--overlaid svg { display: block; position: static; left: auto; width: 34%; height: 34%; margin: 0; fill: currentColor; filter: drop-shadow(0 1px 2px rgba(3, 8, 20, .35)); }
.tc-video-card .plyr--video .plyr__control--overlaid:hover,
.tc-video-card .plyr--video .plyr__control--overlaid:focus-visible { transform: translate(-50%, -50%) scale(1.05); background: var(--tc-play-bg-hover); }
.tc-video-card .plyr--video .plyr__control--overlaid:focus-visible { outline: 3px solid #1470F2; outline-offset: 3px; }
/* A light tint over the poster (and over a paused frame) so the button stands out; it lifts
   the moment the video plays. */
.tc-video-card .plyr__poster::after,
.tc-video-card .plyr--video.plyr--paused:not(.plyr--stopped) .plyr__video-wrapper::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--tc-poster-tint);
}
.tc-video-card .plyr--video.plyr--paused:not(.plyr--stopped) .plyr__video-wrapper::after { z-index: 1; }
.tc-video-card .plyr--video .plyr__controls {
  padding: 28px 14px 10px;
  background: linear-gradient(180deg, rgba(11, 18, 32, 0), rgba(11, 18, 32, .78));
}
.tc-video-card .plyr__control:focus-visible,
.tc-video-card .plyr input[type=range]:focus-visible + *,
.tc-video-card .plyr__menu__container .plyr__control:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px #1470F2; }
.tc-video-card .plyr input[type=range]:focus-visible { outline: 3px solid #fff; outline-offset: 3px; border-radius: 4px; }
.tc-video-card .plyr--full-ui input[type=range] { color: #1470F2; }
.tc-video-card .plyr__time + .plyr__time::before { content: "/"; margin-right: 6px; opacity: .7; }
.tc-video-card .plyr__tooltip { font-weight: 600; }
.tc-video-card .plyr__poster { background-size: cover; }

@media (max-width: 575.98px) {
  .doc-section-content .tc-video-card { margin: 18px 0; border-radius: 12px; }
  .tc-video-card__head { padding: 10px 14px; font-size: 13px; }
  .tc-video-card__eyebrow { flex-basis: 100%; }
  .tc-video-card__eyebrow::after { content: none; }
  .tc-video-card figcaption { padding: 10px 14px 12px; font-size: 13px; }
  .tc-video-card { --tc-play-size: 64px; }
  .tc-video-card .plyr--video .plyr__controls { padding: 20px 8px 6px; }
  /* volume slider is useless on touch; mute button stays */
  .tc-video-card .plyr__volume input[data-plyr=volume] { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tc-video-card .tc-play, .tc-video-card .plyr--video .plyr__control--overlaid { transition: none; }
}