/* 50, built in public (site/sections/50-public.html). Linked by
   scripts/build-home.mjs. Three video cards (.vs-card--media from
   css/components.css: lift, sweep and a 1.03 thumbnail zoom on hover) with
   a play badge and a duration tag on each thumbnail. Also styles the two
   dialogs js/video-dialog.js builds (.vs-video-dialog, .vs-original-dialog),
   since this is the homepage section that opens them. */

.vs-public { border-top: 1px solid var(--vs-line); }

.vs-public__head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--sc-3) var(--sc-6);
  margin-bottom: var(--vs-head-gap);
}
.vs-public__title {
  margin: 0;
  font-family: var(--sc-font-display); font-weight: var(--vs-display-weight);
  font-size: var(--vs-h2); line-height: var(--sc-leading-tight);
  letter-spacing: var(--vs-display-track);
}
.vs-public__stats {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--sc-2) var(--sc-5);
  margin: 0;
  font-size: var(--sc-t-sm); color: var(--sc-ink-soft);
}
.vs-public__num {
  margin-inline-end: 0.2em;
  font-family: var(--sc-font-display); font-weight: var(--vs-display-weight);
  font-size: var(--sc-t-lg); letter-spacing: -0.02em; color: var(--sc-ink);
  font-variant-numeric: tabular-nums;
}
.vs-public__channel {
  color: var(--vs-accent-text, var(--sc-ink)); font-weight: 600;
  text-decoration-thickness: 1px; text-underline-offset: 0.3em;
}
.vs-public__channel:hover { color: var(--sc-ink); }

.vs-public__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 1.8vw, 1.5rem);
  margin: 0; padding: 0; list-style: none;
}
.vs-public__item { display: flex; min-width: 0; }

.vs-video { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.vs-video__media { display: block; flex: none; }
.vs-video__thumb { display: block; }
.vs-video__play {
  position: absolute; left: 50%; top: 50%;
  display: grid; place-items: center;
  width: 3.25rem; height: 3.25rem; margin: -1.625rem 0 0 -1.625rem;
  border-radius: 50%;
  color: #F8F7F2;
  background: rgba(22, 23, 21, 0.8);
  box-shadow: 0 0 0 1.5px rgba(248, 247, 242, 0.7), 0 6px 18px -8px rgba(22, 23, 21, 0.6);
  transition: background-color 240ms var(--vs-ease-card, ease), color 240ms var(--vs-ease-card, ease), transform 240ms var(--vs-ease-card, ease);
}
.vs-video__play svg { width: 1.6rem; height: 1.6rem; }
.vs-video__time {
  position: absolute; right: 0.5rem; bottom: 0.5rem;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  font-family: var(--vs-mono); font-size: var(--sc-t-xs); line-height: 1.3;
  font-variant-numeric: tabular-nums;
  color: #F8F7F2; background: rgba(22, 23, 21, 0.84);
}
.vs-video__body {
  display: flex; flex-direction: column; justify-content: space-between; flex: 1;
  gap: var(--sc-3);
}
.vs-video__title {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  overflow: hidden;
  font-size: var(--sc-t-base);
}
.vs-video__meta { margin: 0; }

.vs-public__asof {
  margin: var(--sc-4) 0 0;
  font-family: var(--vs-mono); font-size: var(--sc-t-xs); color: var(--sc-ink-soft);
}

@media (hover: hover) and (pointer: fine) {
  .vs-video:hover .vs-video__play,
  .vs-video:focus-visible .vs-video__play {
    color: var(--sc-accent-ink); background: var(--sc-accent);
    transform: scale(1.06);
  }
}

@media (max-width: 1023px) {
  .vs-public__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vs-public__item:first-child { grid-column: 1 / -1; }
  .vs-public__item:first-child .vs-video { flex-direction: row; }
  .vs-public__item:first-child .vs-video__media { width: 55%; border-bottom: 0; border-right: 1px solid var(--vs-line); }
}

/* Phones: the newest video on top, the other two as compact rows. */
@media (max-width: 640px) {
  .vs-public__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sc-3); }
  .vs-public__item:first-child .vs-video { flex-direction: column; }
  .vs-public__item:first-child .vs-video__media { width: auto; border-right: 0; border-bottom: 1px solid var(--vs-line); }
  .vs-public__item:not(:first-child) .vs-video { flex-direction: row; }
  .vs-public__item:not(:first-child) .vs-video__media { width: 42%; border-bottom: 0; border-right: 1px solid var(--vs-line); }
  .vs-public__item:not(:first-child) .vs-video__body { padding: 0.7rem 0.8rem; gap: var(--sc-2); }
  .vs-public__item:not(:first-child) .vs-video__title { font-size: var(--sc-t-sm); }
  .vs-public__item:not(:first-child) .vs-video__play { width: 2.4rem; height: 2.4rem; margin: -1.2rem 0 0 -1.2rem; }
  .vs-public__item:not(:first-child) .vs-video__play svg { width: 1.2rem; height: 1.2rem; }
  .vs-public__item:not(:first-child) .vs-video__time { right: 0.3rem; bottom: 0.3rem; }
}

@media (prefers-reduced-motion: reduce) {
  .vs-video__play { transition: none; }
}

/* ============================================================ DIALOGS === */

.vs-video-dialog,
.vs-original-dialog {
  position: fixed; inset: 0;
  width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: var(--sc-gutter);
  align-items: center; justify-content: center;
  background: transparent; border: 0; color: var(--sc-ink);
}
/* Only an open dialog is laid out. A closed one must stay display: none, or
   this full-viewport fixed box sits over the page and eats every click. */
.vs-video-dialog[open],
.vs-original-dialog[open] { display: flex; }
.vs-video-dialog:not([open]),
.vs-original-dialog:not([open]) { display: none; }
.vs-video-dialog:focus,
.vs-original-dialog:focus { outline: none; }
.vs-video-dialog::backdrop,
.vs-original-dialog::backdrop { background: color-mix(in oklab, var(--sc-ink) 78%, transparent); }

.vs-video-dialog__frame { position: relative; width: min(100%, 64rem); }
.vs-video-dialog__media {
  width: 100%; aspect-ratio: 16 / 9;
  background: var(--vs-plate-3, #000);
  border-radius: 10px; overflow: hidden;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.55);
}
.vs-video-dialog__media iframe { width: 100%; height: 100%; border: 0; display: block; }

.vs-original-dialog__frame {
  position: relative; width: min(100%, 44rem);
  max-height: 90vh; max-height: 90svh;
  overflow: auto;
  background: var(--sc-surface); border-radius: 10px;
  padding: var(--sc-6) var(--sc-5) var(--sc-5);
}
.vs-original-dialog__media img { width: 100%; height: auto; border-radius: var(--sc-r-sm); }
.vs-original-dialog__caption { margin: var(--sc-3) 0 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }

.vs-video-dialog__close,
.vs-original-dialog__close {
  position: absolute; top: -3rem; right: 0;
  display: flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem;
  background: var(--sc-surface); border: 1px solid var(--vs-line-strong); border-radius: var(--sc-r-pill);
  color: var(--sc-ink); cursor: pointer;
}
.vs-original-dialog__close { top: var(--sc-3); right: var(--sc-3); }
.vs-video-dialog__close svg,
.vs-original-dialog__close svg { width: 1rem; height: 1rem; }
.vs-video-dialog__close:hover,
.vs-original-dialog__close:hover { background: var(--sc-canvas); }
.vs-video-dialog__close:focus-visible,
.vs-original-dialog__close:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; }