/* ──────────────────────────────────────────────────────────────────────────
   EmbedPlus / "YouTube Gallery" — static reconstruction.

   The original homepage "Video Lessons" widget was rendered by the WordPress
   youtube-embed-plus plugin, whose CSS + JS did not migrate. Without them the
   thumbnail divs (background-image only) had zero height and the player wrapper
   collapsed, so the whole gallery rendered as a blank gap. This file restores
   the layout self-contained (no plugin, no admin-ajax). Click-to-play is wired
   by the small shim in Base.astro; server-side pagination is removed (it relied
   on a WordPress AJAX endpoint that no longer exists — all available thumbnails
   are shown at once instead).
   ────────────────────────────────────────────────────────────────────────── */

.epyt-gallery {
  margin: 0 0 1.2em;
}

/* Main player — responsive 16:9 box, iframe fills it. */
.epyt-video-wrapper {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  overflow: hidden;
  margin-bottom: 14px;
  background: #000;
  border-radius: 3px;
}
.epyt-video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  border: 0;
}

/* Subscribe button. */
.epyt-gallery-subscribe {
  text-align: center;
  margin: 6px 0 16px;
}
.epyt-gallery-subbutton {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #c4302b;
  color: #fff;
  padding: 7px 15px;
  border-radius: 3px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
}
.epyt-gallery-subbutton:hover {
  background: #a52722;
  color: #fff;
}
.epyt-gallery-subbutton img {
  width: auto;
  height: 16px;
  margin: 0;
}

/* Thumbnail list — single column, full-width cards (image on top, title below).
   Full-width title avoids the cramped word-per-line wrapping of a side-by-side
   layout in the narrow sidebar. */
.epyt-gallery-allthumbs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
.epyt-gallery-thumb {
  cursor: pointer;
}
.epyt-gallery-thumb {
  cursor: pointer;
  outline: none;
}
.epyt-gallery-img-box {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  overflow: hidden;
  border-radius: 3px;
  background: #e9e9e9;
}
.epyt-gallery-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.25s ease;
}
.epyt-gallery-thumb:hover .epyt-gallery-img {
  transform: scale(1.04);
}
.epyt-gallery-playhover {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.18);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.epyt-gallery-thumb:hover .epyt-gallery-playhover,
.epyt-gallery-thumb:focus .epyt-gallery-playhover {
  opacity: 1;
}
.epyt-play-img {
  width: 30px;
  height: auto;
}
.epyt-gallery-title {
  margin-top: 7px;
  font-size: 13px;
  line-height: 1.35;
  color: #333;
}

/* Layout helpers from the plugin markup — the CSS grid handles wrapping, so the
   row-break / clear spacers must be removed from the grid flow. */
.epyt-gallery-rowbreak,
.epyt-gallery-clear {
  display: none;
}

/* Server-side pagination relied on WordPress AJAX (gone on the static site). */
.epyt-pagination {
  display: none;
}

@media (max-width: 480px) {
  .epyt-gallery-allthumbs {
    grid-template-columns: 1fr;
  }
}