/* KBIBLE home featured CCM/video V10 — larger premium preview + stable controls */
.home-media-wrap {
  width:min(1500px,calc(100% - 2rem)) !important;
  margin:0 auto clamp(3rem,6vw,5.5rem) !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:clamp(1.3rem,2.2vw,1.8rem) !important;
}

.home-media-section {
  padding:clamp(1.25rem,2vw,1.6rem) !important;
  border-radius:30px !important;
  min-width:0;
}

.home-media-head {
  margin-bottom:1.15rem !important;
  align-items:center !important;
}
.home-media-head h2 {
  font-size:clamp(1.55rem,2.1vw,1.95rem) !important;
  line-height:1.15 !important;
}
.home-media-kicker {
  font-size:.72rem !important;
  letter-spacing:.17em !important;
  margin-bottom:.38rem !important;
}
.home-media-all {
  min-height:42px !important;
  padding:0 .95rem !important;
  font-size:.79rem !important;
}

/* Make the preview itself the visual focus. */
.home-media-card,
.home-media-card--empty {
  width:100% !important;
  min-width:0 !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) !important;
  gap:1rem !important;
  align-items:stretch !important;
  padding:.9rem !important;
  border-radius:24px !important;
  transform:none !important;
}
.home-media-card:hover,
.home-media-card:focus-within {
  transform:none !important;
  border-color:var(--border-glow) !important;
  box-shadow:0 18px 42px -28px var(--glow) !important;
}

.home-media-art,
.home-media-art--ccm,
.home-media-art--video {
  position:relative !important;
  width:100% !important;
  min-width:0 !important;
  min-height:clamp(290px,23vw,380px) !important;
  height:auto !important;
  aspect-ratio:16 / 9 !important;
  border-radius:20px !important;
  overflow:hidden !important;
}
.home-media-art img,
.home-media-art video {
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  object-fit:cover !important;
  display:block !important;
  transform:none !important;
  filter:none !important;
}
.home-media-card:hover .home-media-art img,
.home-media-card:focus-within .home-media-art img,
.home-media-player:hover .home-media-art img {
  transform:none !important;
  filter:none !important;
}

/* Stable play control: no scaling/movement on hover, focus or press. */
.home-media-play {
  left:50% !important;
  top:50% !important;
  width:64px !important;
  height:64px !important;
  min-width:64px !important;
  min-height:64px !important;
  transform:translate(-50%,-50%) !important;
  transition:background-color .18s ease,box-shadow .18s ease,border-color .18s ease !important;
  backface-visibility:hidden;
  -webkit-font-smoothing:antialiased;
  touch-action:manipulation;
  user-select:none;
  outline-offset:4px;
}
.home-media-play:hover,
.home-media-play:focus-visible,
.home-media-play:active {
  transform:translate(-50%,-50%) !important;
}
.home-media-play:hover {
  box-shadow:0 14px 32px rgba(0,0,0,.34),0 0 34px color-mix(in srgb,var(--glow) 34%,transparent) !important;
}
.home-media-play:active {
  box-shadow:0 8px 20px rgba(0,0,0,.28),0 0 24px color-mix(in srgb,var(--glow) 24%,transparent) !important;
}

.home-media-copy {
  padding:.2rem .2rem .1rem !important;
  min-width:0 !important;
}
.home-media-copy>span {
  font-size:.74rem !important;
  margin-bottom:.42rem !important;
}
.home-media-copy strong {
  font-size:clamp(1.28rem,1.75vw,1.62rem) !important;
  line-height:1.28 !important;
}
.home-media-copy p {
  font-size:.88rem !important;
  line-height:1.55 !important;
  white-space:normal !important;
  display:-webkit-box !important;
  -webkit-line-clamp:2 !important;
  -webkit-box-orient:vertical !important;
}
.home-media-mini {
  margin-top:.9rem !important;
  min-height:26px;
  font-size:.74rem !important;
  gap:.65rem !important;
}
.home-media-mini-track { height:5px !important; }

@media (max-width:1180px) {
  .home-media-wrap {
    width:min(920px,calc(100% - 1.5rem)) !important;
    grid-template-columns:minmax(0,1fr) !important;
  }
  .home-media-art,
  .home-media-art--ccm,
  .home-media-art--video {
    min-height:0 !important;
    aspect-ratio:16/9 !important;
  }
}

@media (max-width:760px) {
  .home-media-wrap {
    width:min(calc(100% - 20px),920px) !important;
    gap:20px !important;
  }
  .home-media-section {
    padding:16px !important;
    border-radius:24px !important;
  }
  .home-media-head {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    gap:12px !important;
    margin-bottom:16px !important;
  }
  .home-media-head h2 { font-size:clamp(1.42rem,7vw,1.72rem) !important; }
  .home-media-all { min-height:42px !important; padding:0 14px !important; font-size:.78rem !important; }
  .home-media-card,
  .home-media-card--empty { gap:14px !important; padding:14px !important; border-radius:22px !important; }
  .home-media-art,
  .home-media-art--ccm,
  .home-media-art--video { min-height:0 !important; aspect-ratio:16/9 !important; border-radius:18px !important; }
  .home-media-play { width:58px !important; height:58px !important; min-width:58px !important; min-height:58px !important; }
  .home-media-copy { padding:2px 3px 4px !important; }
  .home-media-copy strong { font-size:clamp(1.16rem,5.6vw,1.42rem) !important; }
  .home-media-copy p { font-size:.82rem !important; }
  .home-media-mini { grid-template-columns:auto minmax(0,1fr) auto !important; gap:9px !important; }
}

@media (max-width:390px) {
  .home-media-section { padding:13px !important; }
  .home-media-head { grid-template-columns:minmax(0,1fr) !important; }
  .home-media-all { justify-self:start !important; min-height:38px !important; font-size:.74rem !important; }
  .home-media-card,
  .home-media-card--empty { padding:11px !important; }
  .home-media-play { width:54px !important; height:54px !important; min-width:54px !important; min-height:54px !important; }
  .home-media-mini { grid-template-columns:auto minmax(0,1fr) !important; }
  .home-media-mini [data-home-media-time] { display:none !important; }
}

@media (prefers-reduced-motion:reduce) {
  .home-media-card,
  .home-media-art img,
  .home-media-play { transition:none !important; animation:none !important; }
}

/* V41 — live CCM lyrics, fullscreen video, clean playback surface, bottom-right fullscreen control. */
.home-media-art {
  cursor:pointer;
  outline:none;
}
.home-media-art:focus-visible {
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 55%,transparent),0 0 0 7px color-mix(in srgb,var(--bg) 88%,transparent) !important;
}

/* The center button is only an entry control. Once playback starts the media stays unobstructed. */
.home-media-play {
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  transition:opacity .14s ease,visibility .14s ease,background-color .18s ease,box-shadow .18s ease !important;
}
.home-media-player.is-playing .home-media-play {
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

/* Fullscreen control stays small and out of the content's center. */
.home-media-fullscreen {
  position:absolute;
  z-index:5;
  right:14px;
  bottom:14px;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid rgba(255,255,255,.26);
  border-radius:13px;
  background:rgba(5,12,10,.72);
  color:#fff8df;
  box-shadow:0 10px 28px rgba(0,0,0,.28);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  cursor:pointer;
  font-size:1.35rem;
  line-height:1;
  transition:background-color .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.home-media-fullscreen:hover,
.home-media-fullscreen:focus-visible {
  background:color-mix(in srgb,var(--accent) 82%,#07110e 18%);
  color:#07110e;
  border-color:color-mix(in srgb,var(--accent) 70%,white 30%);
  box-shadow:0 12px 30px rgba(0,0,0,.3),0 0 20px color-mix(in srgb,var(--glow) 24%,transparent);
  outline:none;
}
.home-media-art:fullscreen,
.home-media-art:-webkit-full-screen {
  width:100vw !important;
  height:100vh !important;
  aspect-ratio:auto !important;
  border-radius:0 !important;
  background:#000 !important;
}
.home-media-art:fullscreen video,
.home-media-art:-webkit-full-screen video {
  object-fit:contain !important;
}
.home-media-art:fullscreen .home-media-fullscreen,
.home-media-art:-webkit-full-screen .home-media-fullscreen {
  right:max(18px,env(safe-area-inset-right));
  bottom:max(18px,env(safe-area-inset-bottom));
}

/* Synchronized lyrics are directly under the CCM visual, never over the cover. */
.home-media-live-lyrics {
  position:relative;
  overflow:hidden;
  min-height:118px;
  padding:17px 20px 16px;
  border:1px solid color-mix(in srgb,var(--accent) 28%,var(--border) 72%);
  border-radius:18px;
  background:
    linear-gradient(135deg,color-mix(in srgb,var(--accent) 9%,transparent),transparent 48%),
    color-mix(in srgb,var(--bg-raised) 86%,#06120e 14%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.home-media-live-lyrics::before {
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:3px;
  background:linear-gradient(180deg,var(--accent),var(--accent-soft));
  box-shadow:0 0 18px color-mix(in srgb,var(--glow) 40%,transparent);
}
.home-media-live-lyrics__head {
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
  color:var(--accent);
  font-size:.68rem;
  font-weight:900;
  letter-spacing:.12em;
}
.home-media-live-lyrics__head > span:last-child {
  margin-left:auto;
  color:var(--muted);
  font-size:.67rem;
  font-weight:750;
  letter-spacing:0;
}
.home-media-live-dot {
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 12px color-mix(in srgb,var(--glow) 64%,transparent);
}
.home-media-player.is-playing .home-media-live-dot {
  animation:kbHomeLivePulse 1.3s ease-in-out infinite;
}
.home-media-live-lyrics__current {
  margin:0;
  color:var(--text);
  font-size:clamp(1rem,1.45vw,1.22rem);
  line-height:1.55;
  font-weight:850;
  letter-spacing:-.025em;
  overflow-wrap:anywhere;
}
.home-media-live-lyrics__next {
  margin:7px 0 0;
  color:color-mix(in srgb,var(--muted) 88%,var(--accent) 12%);
  font-size:.78rem;
  line-height:1.45;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
@keyframes kbHomeLivePulse {
  50% { opacity:.45; box-shadow:0 0 22px color-mix(in srgb,var(--glow) 82%,transparent); }
}

@media (max-width:760px) {
  .home-media-fullscreen { right:10px; bottom:10px; width:42px; height:42px; border-radius:12px; }
  .home-media-live-lyrics { min-height:108px; padding:15px 16px 14px; border-radius:16px; }
  .home-media-live-lyrics__current { font-size:clamp(.95rem,4.7vw,1.1rem); }
  .home-media-live-lyrics__next { font-size:.74rem; }
}
@media (max-width:390px) {
  .home-media-fullscreen { width:39px; height:39px; font-size:1.18rem; }
  .home-media-live-lyrics { min-height:104px; padding:14px 14px 13px; }
  .home-media-live-lyrics__head { font-size:.63rem; }
  .home-media-live-lyrics__head > span:last-child { font-size:.62rem; }
}
@media (prefers-reduced-motion:reduce) {
  .home-media-player.is-playing .home-media-live-dot { animation:none !important; }
}


/* V41 exact placement: fullscreen is anchored inside the VIDEO SCREEN bottom-right. */
.home-media-art--video .home-media-fullscreen {
  top:auto !important;
  right:14px !important;
  bottom:14px !important;
  left:auto !important;
}
.home-media-art--video:fullscreen .home-media-fullscreen,
.home-media-art--video:-webkit-full-screen .home-media-fullscreen {
  top:auto !important;
  right:max(18px,env(safe-area-inset-right)) !important;
  bottom:max(18px,env(safe-area-inset-bottom)) !important;
}
@media (max-width:760px) {
  .home-media-art--video .home-media-fullscreen { right:10px !important; bottom:10px !important; }
}


/* V91 — home video fullscreen fills landscape mobile screens and keeps controls usable. */
.home-media-art--video:fullscreen,
.home-media-art--video:-webkit-full-screen {
  width:100vw !important;
  width:100dvw !important;
  height:100vh !important;
  height:100dvh !important;
  min-width:100vw !important;
  min-width:100dvw !important;
  min-height:100vh !important;
  min-height:100dvh !important;
  max-width:none !important;
  max-height:none !important;
  aspect-ratio:auto !important;
  border-radius:0 !important;
  background:#000 !important;
  overflow:hidden !important;
  touch-action:manipulation !important;
}
.home-media-art--video:fullscreen video,
.home-media-art--video:-webkit-full-screen video {
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
  background:#000 !important;
}
.home-media-art--video:fullscreen::after,
.home-media-art--video:-webkit-full-screen::after { display:none !important; }
.home-media-art--video:fullscreen .home-media-play,
.home-media-art--video:-webkit-full-screen .home-media-play { display:none !important; }
.home-media-art--video:fullscreen .home-media-fullscreen,
.home-media-art--video:-webkit-full-screen .home-media-fullscreen {
  top:auto !important;
  right:max(12px,env(safe-area-inset-right)) !important;
  bottom:max(12px,env(safe-area-inset-bottom)) !important;
  left:auto !important;
  transform:none !important;
}
.home-media-art--video:fullscreen .home-media-fullscreen:hover,
.home-media-art--video:fullscreen .home-media-fullscreen:active,
.home-media-art--video:fullscreen .home-media-fullscreen:focus-visible,
.home-media-art--video:-webkit-full-screen .home-media-fullscreen:hover,
.home-media-art--video:-webkit-full-screen .home-media-fullscreen:active,
.home-media-art--video:-webkit-full-screen .home-media-fullscreen:focus-visible { transform:none !important; }
@media (orientation:landscape) and (max-height:520px) {
  .home-media-art--video:fullscreen,
  .home-media-art--video:-webkit-full-screen { width:100dvw !important; height:100dvh !important; }
  .home-media-art--video:fullscreen video,
  .home-media-art--video:-webkit-full-screen video { object-fit:cover !important; }
}