/* Video Gallery Style for YotuWP — card design based on Folks & Facts v5.
   Scope: .vgs-gallery, legacy .ff-video-gallery, or enabled sitewide mode. */

:is(.vgs-gallery, .ff-video-gallery, body.vgs-sitewide) {
  --vgs-navy: #10243a;
  --vgs-blue: #2469c7;
  --vgs-border: #e5ebf2;
}
:is(.vgs-gallery, .ff-video-gallery) {
  width: 100%;
  max-width: var(--vgs-max-width, 1200px);
  margin-inline: auto;
}

/* Center the gallery; two videos stay centered, three fit per row. */
:is(.vgs-gallery, .ff-video-gallery, body.vgs-sitewide) .yotu-videos {
  width: 100% !important;
  max-width: 100% !important;
  padding-top: 8px !important;
  float: none !important;
}
:is(.vgs-gallery, .ff-video-gallery, body.vgs-sitewide) .yotu-videos > ul {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 24px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  list-style: none !important;
}

/* Individual white card: stops at three columns on desktop. */
:is(.vgs-gallery, .ff-video-gallery, body.vgs-sitewide) .yotu-videos > ul > li {
  box-sizing: border-box !important;
  float: none !important;
  flex: 0 1 calc((100% - 48px) / 3) !important;
  width: calc((100% - 48px) / 3) !important;
  max-width: 390px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--vgs-border) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  background: #fff !important;
  box-shadow: 0 5px 16px rgba(12, 33, 54, .09) !important;
  text-align: left !important;
  transition: transform .22s ease, box-shadow .22s ease;
}

/* Image and title are the entire clickable card — no redundant CTA. */
:is(.vgs-gallery, .ff-video-gallery, body.vgs-sitewide) .yotu-videos > ul > li > a.yotu-video {
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  width: 100% !important;
  float: none !important;
  border: 0 !important;
  color: var(--vgs-navy) !important;
  text-decoration: none !important;
  background: #fff !important;
  overflow: hidden !important;
}

/* Crop the *actual* YotuWP thumbnail; no top/bottom black bars. */
:is(.vgs-gallery, .ff-video-gallery, body.vgs-sitewide) .yotu-videos .yotu-video-thumb-wrp {
  width: 100% !important;
  display: block !important;
  position: relative !important;
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  flex: none !important;
  margin: 0 !important;
  overflow: hidden !important;
  background: #eef2f6 !important;
}
:is(.vgs-gallery, .ff-video-gallery, body.vgs-sitewide) .yotu-videos .yotu-video-thumb-wrp > div,
:is(.vgs-gallery, .ff-video-gallery, body.vgs-sitewide) .yotu-thumb-169 .yotu-video-thumb-wrp > div {
  position: absolute !important;
  inset: 0 !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}
:is(.vgs-gallery, .ff-video-gallery, body.vgs-sitewide) .yotu-videos .yotu-video-thumb-wrp img.yotu-video-thumb {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
  object-position: center center !important;
  transform: none !important;
  transition: transform .28s ease;
}

/* KEY FIX: Undo Gplus preset's absolute title overlay.
   In the real YotuWP grid template, the <h3> comes AFTER
   the thumbnail wrapper within the video anchor. */
:is(.vgs-gallery, .ff-video-gallery, body.vgs-sitewide) .yotu-videos h3.yotu-video-title,
:is(.vgs-gallery, .ff-video-gallery, body.vgs-sitewide) .yotu-videos.yotu-preset-gplus h3.yotu-video-title,
body [data-showdesc="off"] :is(.vgs-gallery, .ff-video-gallery, body.vgs-sitewide) .yotu-videos.yotu-preset-gplus h3.yotu-video-title {
  box-sizing: border-box !important;
  position: static !important;
  inset: auto !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  float: none !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  flex: 1 0 auto;
  margin: 0 !important;
  padding: 19px 18px 12px !important;
  color: var(--vgs-navy) !important;
  background: #fff !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  text-align: left !important;
  font-size: 16px !important;
  font-weight: 750 !important;
  line-height: 1.4 !important;
  letter-spacing: -.01em !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
  overflow: visible !important;
  text-overflow: clip !important;
  -webkit-line-clamp: unset !important;
}

/* Editorial label above each episode name, no new WP blocks needed. */
:is(.vgs-gallery, .ff-video-gallery, body.vgs-sitewide) .yotu-videos h3.yotu-video-title::before {
  content: var(--vgs-card-label, "VIDEO PODCAST");
  display: block;
  margin: 0 0 7px;
  color: var(--vgs-blue);
  font-family: inherit;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.3;
}

:is(.vgs-gallery, .ff-video-gallery, body.vgs-sitewide) .yotu-videos .yotu-video-description {
  display: none !important;
}

:is(.vgs-gallery, .ff-video-gallery, body.vgs-sitewide) .yotu-videos a.yotu-video:hover h3.yotu-video-title {
  text-decoration: none !important;
  color: var(--vgs-blue) !important;
}
@media (hover: hover) {
  :is(.vgs-gallery, .ff-video-gallery, body.vgs-sitewide) .yotu-videos > ul > li:hover {
    transform: translateY(-4px);
    box-shadow: 0 13px 30px rgba(12, 33, 54, .14) !important;
  }
  :is(.vgs-gallery, .ff-video-gallery, body.vgs-sitewide) .yotu-videos > ul > li:hover img.yotu-video-thumb {
    transform: scale(1.03) !important;
  }
}
:is(.vgs-gallery, .ff-video-gallery, body.vgs-sitewide) a:focus-visible {
  outline: 3px solid #72acff !important;
  outline-offset: -3px;
}

@media (max-width: 900px) {
  :is(.vgs-gallery, .ff-video-gallery, body.vgs-sitewide) .yotu-videos > ul > li {
    flex-basis: calc((100% - 24px) / 2) !important;
    width: calc((100% - 24px) / 2) !important;
  }
}
@media (max-width: 600px) {
  :is(.vgs-gallery, .ff-video-gallery, body.vgs-sitewide) .yotu-videos > ul {
    gap: 18px !important;
  }
  :is(.vgs-gallery, .ff-video-gallery, body.vgs-sitewide) .yotu-videos > ul > li {
    flex-basis: 100% !important;
    width: 100% !important;
    max-width: 500px !important;
    border-radius: 15px !important;
  }
  :is(.vgs-gallery, .ff-video-gallery, body.vgs-sitewide) .yotu-videos h3.yotu-video-title {
    font-size: 16px !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  :is(.vgs-gallery, .ff-video-gallery, body.vgs-sitewide) * { transition: none !important; }
}

/* In automatic sitewide mode, constrain the gallery without constraining <body>. */
body.vgs-sitewide .yotu-videos {
  max-width: var(--vgs-max-width, 1200px) !important;
  margin-inline: auto !important;
}

/* Folks & Facts verified button styling (source: consolidated CSS v1.1).
   YotuWP itself chooses the paging MODE; choose "Load More" in YotuWP
   settings to append videos rather than navigate forward one page. */
:is(.vgs-gallery, .ff-video-gallery, body.vgs-sitewide) .yotu-pagination {
  text-align: center !important;
}
:is(.vgs-gallery, .ff-video-gallery, body.vgs-sitewide) .yotu-pagination a,
:is(.vgs-gallery, .ff-video-gallery, body.vgs-sitewide) .yotu-pagination button,
:is(.vgs-gallery, .ff-video-gallery, body.vgs-sitewide) .yotu-pagination-more {
  box-sizing: border-box !important;
  width: 220px !important;
  max-width: 100% !important;
  padding: 12px 20px !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
  border-radius: 8px !important;
  color: #fff !important;
  background-color: var(--vgs-navy, #10243a) !important;
  border: 1px solid var(--vgs-navy, #10243a) !important;
  font-weight: 700 !important;
  text-align: center !important;
  text-decoration: none !important;
  transition: background-color .2s ease, color .2s ease !important;
}
:is(.vgs-gallery, .ff-video-gallery, body.vgs-sitewide) .yotu-pagination a:hover,
:is(.vgs-gallery, .ff-video-gallery, body.vgs-sitewide) .yotu-pagination button:hover,
:is(.vgs-gallery, .ff-video-gallery, body.vgs-sitewide) .yotu-pagination-more:hover {
  color: #fff !important;
  background-color: var(--vgs-blue, #2469c7) !important;
  border-color: var(--vgs-blue, #2469c7) !important;
}

/* If modal fallback is enabled, remove YotuWP's unused inline/large player
   from *selected* galleries. The native YotuWP lightbox is mounted under body
   and is not inside the scoped gallery, so it is unaffected. */
body.vgs-force-popup :is(.vgs-gallery, .ff-video-gallery) :is(.yotu-player, .yotu-player-wrapper, .yotu-player-wrap, .yotu-player-container) {
  display: none !important;
}

/* Optional sitewide rule; explicitly excludes the popup's own player. */
body.vgs-sitewide.vgs-force-popup :is(.yotu-player, .yotu-player-wrapper, .yotu-player-wrap, .yotu-player-container):not(.yotu-lightbox *) {
  display: none !important;
}