/* ─────────────────────────────────────────────── vids.bamya.co/blog

   Bamya Vids' blog is crm.bamya.co's blog (sales-blog.css) with videos in it:
   the catalogue's categories as the dots and tags, and a post's video, or
   its two versions side by side, above the article (templates/vids.bamya.co/blog.html, blog_post.html).
   crm.bamya.co's blog loads it too, for the same posts among its News
   (templates/vids_video_stage.html draws the video on both). Every colour is
   a panel.css token. */

/* ───────────────────────────────────────────── the categories

   Theory violet (--them), Examples a teal ring (--live), Bamya CRM teal
   (--you), as the CRM's own dot on crm.bamya.co's blog. */
.bl-dot-theory,
.bl-dot-examples,
.bl-dot-bamya-crm {
  display: inline-block;
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  vertical-align: 0.05em;
}

.bl-dot-theory, .bl-tag-theory i { background: var(--them); box-shadow: 0 0 8px rgba(167, 139, 250, 0.5); }
.bl-dot-examples, .bl-tag-examples i { background: transparent; border: 2px solid var(--live); }
.bl-dot-bamya-crm, .bl-tag-bamya-crm i { background: var(--you); box-shadow: 0 0 8px rgba(56, 217, 190, 0.5); }

.bl-tag-theory { border-color: rgba(167, 139, 250, 0.38); }
.bl-tag-examples { border-color: rgba(69, 236, 208, 0.35); }
.bl-tag-bamya-crm { border-color: rgba(56, 217, 190, 0.35); }

/* crm.bamya.co's blog, where the videos sit among the News as one more part, "Video": a violet ring, apart
   from Leads' filled violet and Bamya Call's teal ring. */
.bl-dot-video {
  display: inline-block;
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  vertical-align: 0.05em;
}

.bl-dot-video, .bl-tag-video i { background: transparent; border: 2px solid var(--them); }
.bl-tag-video { border-color: rgba(167, 139, 250, 0.38); }

/* ───────────────────────────────────────────── the list

   With no "Latest" card above it (owner, 2026-10-27: "remove the latest
   card"), the filter opens the list, so it takes no extra space on top. */
.bl-list .bl-filter:first-child { margin-top: 0; }

/* ───────────────────────────────────────────── a post's video

   One video centred, as tall as the screen allows; two side by side at one
   height: each figure's share of the row is its picture's width / height,
   set by vids-blog.js once the video's size is known (until then, equal
   halves). On a phone they stack. */
.panel.short.vb-watch { padding-top: clamp(24px, 3.5vw, 40px); padding-bottom: 0; border-bottom: 0; }
.panel.short.vb-watch + .bl-article { padding-top: clamp(36px, 5vw, 56px); }

.vb-stage {
  display: flex;
  justify-content: center;
  gap: 18px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--raise);
}

.vb-video { display: block; max-width: 100%; max-height: 78vh; border-radius: 10px; background: #000; }

.vb-version { flex: 1 1 0; min-width: 0; margin: 0; }
.vb-version .vb-video { width: 100%; height: auto; }

.vb-version figcaption {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
}

.vb-version figcaption span { color: var(--faint); }

/* An article's own subheadings (vids_articles' "## "): a reading size, not the landing's section titles, and
   without their scroll split. News posts have none, so crm.bamya.co's blog never needed this. */
.bl-prose h2 {
  margin-top: 1.9em;
  margin-bottom: 0;
  font-size: clamp(1.3rem, 2vw, 1.55rem);
  line-height: 1.25;
  letter-spacing: -0.015em;
  font-weight: 700;
  color: var(--text);
  text-shadow: none;
}

@media (max-width: 760px) {
  .vb-pair { flex-direction: column; }
  .vb-pair .vb-version { flex: 0 0 auto !important; }
  .vb-pair .vb-video { max-height: 75vh; width: auto; margin-inline: auto; }
}