/* Zoho in a Minute - video series hub.
   Default markup (no JS, or the API key in main.js isn't set yet) is the single live
   playlist embed below - it already contains every video, it just doesn't show them as a
   browsable list. When main.js's YOUTUBE_DATA_API_KEY is configured, JS replaces #zimPlaylist
   with .zim-grid: one real card per video, fetched live, so a new episode shows up here the
   next time a visitor loads the page - no edit to this page ever needed either way. */

.zim-player {
  margin-block-start: 30px;
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  background: #000;
  aspect-ratio: 16/9;
  max-width: 860px;
}
.zim-player iframe {
  width: 100%; height: 100%; display: block; border: 0;
}
.zim-yt-link { margin-block-start: 12px; font-size: .9rem; }
.zim-yt-link a { color: var(--muted); }

/* ---- JS-enhanced state: one card per video ---- */
.zim-grid {
  margin-block-start: 30px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px;
}
.zim-card {
  display: block; width: 100%; padding: 0; text-align: start;
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  background: var(--white); cursor: pointer; font: inherit;
}
.zim-card:hover .zim-play { background: rgba(0,0,0,.55); }
.zim-thumb {
  position: relative; display: block; aspect-ratio: 16/10; background: #000; overflow: hidden;
}
.zim-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.zim-play {
  position: absolute; inset: 0; margin: auto; width: 46px; height: 46px; border-radius: 50%;
  background: rgba(0,0,0,.4); border: 1.5px solid rgba(255,255,255,.7);
}
.zim-play::before {
  /* Play triangle is a fixed media-control glyph, not text-flow direction - physical
     border-left on purpose, same reasoning used on the home hero's video link. */
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 0; height: 0;
  border-top: 9px solid transparent; border-bottom: 9px solid transparent;
  border-left: 14px solid #fff;
  left: 4px;
}
.zim-thumb-playing { aspect-ratio: 16/10; }
.zim-thumb-playing iframe { width: 100%; height: 100%; border: 0; display: block; }
.zim-topic { display: block; margin: 14px 16px 16px; font-weight: 800; font-size: .95rem; color: var(--ink); line-height: 1.4; }