/* Bamya Vids: the video catalogue (templates/vids.bamya.co/welcome_panel.html, static/js/vids.js).
   panel.css tokens only. The modal follows the suite site's Demos window (sales.css .sl-demo-modal):
   centred with `margin: auto`, which panel.css's `* { margin: 0 }` would otherwise take away. */

/* ------------------------------------------------------------ the top */

/* Not a full screen: the catalogue is the page, so the heading sits just under the fixed header
   (140px clears it on every width, as on the Demos page). */
.vids-hero {
  min-height: 0;
  padding: 140px 0 0;
  border-bottom: 0;
}
.vids-hero h1 { margin-bottom: 0; }

.panel.short.vids {
  align-items: start;
  padding-top: 36px;
}

/* ------------------------------------------------------------ toggles */

.vid-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
  margin-bottom: 36px;
}
.vid-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.vid-toggles + .vid-toggles {
  padding-left: 28px;
  border-left: 1px solid var(--line-strong);
}
.vid-toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 40px;
  padding: 0 16px 0 13px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--dim);
  font: 500 14px/1 var(--sans);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
/* Off is an empty ring, on a filled one: the state reads without the colour. */
.vid-toggle::before {
  content: "";
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  box-sizing: border-box;
}
.vid-toggle[aria-pressed="true"] {
  color: var(--text);
  border-color: rgba(56, 217, 190, 0.55);
  background: rgba(56, 217, 190, 0.10);
}
.vid-toggle[aria-pressed="true"]::before {
  border-color: var(--you);
  background: var(--you);
  box-shadow: inset 0 0 0 2.5px #10201e;
}
.vid-toggle:hover { border-color: var(--you); }
.vid-toggle:focus-visible { outline: 2px solid var(--you); outline-offset: 2px; }

.vid-count {
  margin-left: auto;
  font: 12px/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}

/* ------------------------------------------------------------ the grid */

.vid-grid,
.vid-related-list {
  list-style: none;
  padding: 0;
}
.vid-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 36px 24px;
}
.vid-item[hidden] { display: none; }

.vid-empty {
  color: var(--dim);
  padding: 48px 0;
}

.vid-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: inherit;
  text-decoration: none;
}
.vid-card:focus-visible { outline: none; }
.vid-card:focus-visible .vid-thumb { outline: 2px solid var(--you); outline-offset: 3px; }

/* The name is written over the poster, and the poster blurred and darkened under it (owner, 2026-10-24:
   "the title should be on top of the thumbnail and thumbnail should be blurred"). The poster is scaled
   up a little so the blur's soft edge falls outside the frame. Pointing at a card lifts the blur. */
.vid-thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #000;
  transition: border-color 0.2s ease;
}
.vid-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(5px) brightness(0.5);
  transform: scale(1.08);
  transition: filter 0.3s ease, transform 0.35s ease;
}
.vid-card:hover .vid-thumb,
.vid-card:focus-visible .vid-thumb { border-color: rgba(56, 217, 190, 0.6); }
.vid-card:hover .vid-thumb img,
.vid-card:focus-visible .vid-thumb img { filter: blur(2px) brightness(0.6); transform: scale(1.12); }

.vid-length {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 4px 6px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font: 12px/1 var(--mono);
}

.vid-name {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 22px 28px;
  color: #fff;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-align: center;
  text-wrap: balance;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.6);
}

.vid-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--faint);
  font: 12px/1 var(--mono);
}
.vid-type {
  padding: 4px 8px;
  border: 1px solid;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.vid-type-short { color: var(--them); border-color: rgba(167, 139, 250, 0.4); }
.vid-type-long { color: var(--you); border-color: rgba(56, 217, 190, 0.4); }

/* ------------------------------------------------------------ the modal */

html:has(.vid-modal[open]) { overflow: hidden; }

/* Almost the whole screen (owner, 2026-10-24: "make the modal be almost full screen"), as the Demos
   window is. */
.vid-modal {
  margin: auto;
  width: 96vw;
  height: 96vh;
  max-width: none;
  max-height: none;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background: var(--bg);
  color: inherit;
  overflow: hidden;
}
.vid-modal[open] {
  display: flex;
  flex-direction: column;
}
.vid-modal::backdrop {
  background: rgba(4, 6, 8, 0.86);
  backdrop-filter: blur(4px);
}

.vid-modal-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 12px 12px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--raise);
}
.vid-modal-heading { min-width: 0; }
.vid-modal-title {
  margin: 0 0 8px;
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vid-modal-close {
  position: relative;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.vid-modal-close::before,
.vid-modal-close::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 2px;
  background: currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
}
.vid-modal-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.vid-modal-close:hover,
.vid-modal-close:focus-visible { border-color: var(--you); color: var(--you); }

/* The video takes all the height the related row leaves (a zero basis, so its own size never pushes the
   row out of the window), fitted at its own shape with black round it. */
.vid-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.vid-modal-video {
  display: block;
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  background: #000;
  object-fit: contain;
}

/* The related videos: one compact row under the video, each a small card (its name on its blurred
   poster) with the type and date beside it. */
.vid-related {
  flex: 0 0 auto;
  padding: 14px 20px 16px;
  border-top: 1px solid var(--line);
  background: var(--raise);
}
.vid-related[hidden] { display: none; }
.vid-related-title {
  margin: 0 0 12px;
  color: var(--dim);
  font: 12px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.vid-related-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
}
.vid-related-list > li {
  flex: 0 1 400px;
  min-width: 0;
}
.vid-card-small {
  flex-direction: row;
  align-items: center;
  gap: 14px;
}
.vid-card-small .vid-thumb {
  flex: 0 0 192px;
  border-radius: 8px;
}
.vid-card-small .vid-name {
  padding: 8px 12px 18px;
  font-size: 14px;
}
.vid-card-small .vid-meta {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.vid-card-small .vid-length { right: 5px; bottom: 5px; font-size: 11px; padding: 3px 5px; }

/* ------------------------------------------------------------ phones */

@media (max-width: 640px) {
  .vid-toggles + .vid-toggles { padding-left: 0; border-left: 0; }
  .vid-count { margin-left: 0; flex-basis: 100%; }
  /* A phone's window is tall and narrow: the video keeps its own shape at the top and the window
     scrolls to the related videos, one under the other. */
  .vid-modal-video { flex: 0 0 auto; aspect-ratio: 16 / 9; }
  .vid-related { flex: 1 0 auto; padding: 14px 14px 18px; }
  .vid-related-list > li { flex-basis: 100%; }
  .vid-card-small .vid-thumb { flex-basis: 168px; }
  .vid-modal-head { padding-left: 14px; }
  .vid-modal-title { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .vid-toggle,
  .vid-thumb,
  .vid-thumb img { transition: none; }
}