/* ===================================================================
   Digital Futurist — Video & Audio hub (637) + its two collection pages
   (Personal Videos, Industry Videos, via video-collection.php). The
   shared page layout (.df-simple-page) lives in homepage-redesign.css;
   this file is only the parts unique to video pages - the hub's
   row list, the collection pages' breadcrumb, the video-entry headings,
   and the youtube-embed-plus-pro facade overrides.
   =================================================================== */

/* Breadcrumb on the two collection pages, linking back to the hub -
   same look as .df-photo-crumb (photo-collection.css/book-reader.css),
   duplicated here rather than shared since video and photo pages never
   load at the same time. */
.df-photo-crumb {
  font-family:'IBM Plex Mono', monospace; font-size:.74rem; letter-spacing:.04em;
  color:var(--df-muted); margin-bottom:20px;
}
.df-shell .df-photo-crumb a { color:var(--df-muted); text-decoration:none; }
.df-photo-crumb a:hover { color:var(--df-accent); }

/* Cross-link from one collection page to the other, at the bottom of the
   page's own content - structural nav, styled like the AI-assisted badge
   (quiet, mono, top-bordered) rather than a loud callout. */
.df-video-crosslink {
  margin-top:2.4rem; padding-top:1.6rem; border-top:1px solid var(--df-border);
  font-family:'IBM Plex Mono', monospace; font-size:.8rem; letter-spacing:.03em;
  display:flex; flex-direction:column; gap:.6rem;
}
.df-video-crosslink a { color:var(--df-accent); text-decoration:none; }
.df-video-crosslink a:hover { text-decoration:underline; }

/* Hub row list - same shape as .df-photo-row (photo-hub.css), duplicated
   under df-video-row names since only 2 rows here (no per-item photo,
   just a static YouTube thumbnail). */
.df-video-rows { margin-top:8px; border-top:1px solid var(--df-border); }
.df-video-row {
  display:flex; align-items:center; gap:20px;
  padding:20px 2px; border-bottom:1px solid var(--df-border);
  text-decoration:none; color:var(--df-text);
}
.df-shell .df-video-row { color:var(--df-text); }
.df-video-row:hover .df-video-row-title { color:var(--df-accent); }
.df-video-row-thumb {
  width:96px; height:96px; flex-shrink:0; border-radius:4px; overflow:hidden;
  background:var(--df-panel); border:1px solid var(--df-border);
}
.df-video-row-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.df-video-row-body { min-width:0; }
.df-video-row-title { font-size:1.05rem; font-weight:600; margin:0 0 4px; }
.df-video-row-teaser {
  font-size:.85rem; line-height:1.5; color:var(--df-muted2);
  overflow:hidden; text-overflow:ellipsis; display:-webkit-box;
  -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.df-video-row-arrow { color:var(--df-accent); font-size:.85rem; margin-left:auto; flex-shrink:0; padding-left:12px; }
@media (max-width:600px) {
  .df-video-row { gap:14px; }
  .df-video-row-thumb { width:68px; height:68px; }
  .df-video-row-teaser { display:none; }
}

.df-video-page .df-page-intro ol { padding-left:1.3rem; margin:0 0 1rem; }
.df-video-page .df-page-intro li { margin-bottom:.5rem; }

.df-video-page .df-page-intro h3 {
  font-size:1.25rem; font-weight:700; color:var(--df-text); letter-spacing:-.005em;
  margin:2.4rem 0 .8rem; padding-top:1.6rem; border-top:1px solid var(--df-border);
}
.df-video-page .df-page-intro h3:first-of-type { border-top:none; padding-top:0; }

/* youtube-embed-plus-pro renders a click-to-play facade (.epyt-video-wrapper,
   fixed width/height inline attributes) instead of a raw iframe - override
   those to stay responsive, same treatment either way. */
.df-video-page .df-page-intro iframe,
.df-video-page .df-page-intro .epyt-video-wrapper {
  display:block; width:100% !important; aspect-ratio:16/9; height:auto !important; max-width:100%;
  border:1px solid var(--df-border); border-radius:4px; margin:1rem 0 0; overflow:hidden;
}
.df-video-page .df-page-intro .epyt-video-wrapper > div {
  width:100% !important; height:100% !important; aspect-ratio:16/9;
}
.df-video-page .df-page-intro .epyt-facade-poster {
  width:100%; height:100%; object-fit:cover; display:block;
}