.tabsv__rating { display: flex; justify-content: center; align-items: center; gap: .5rem; margin: 0; font-weight: 600; }
.tabsv__list {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem;
  margin: 0 auto clamp(1.5rem, 3vw, 2.25rem);
  color: var(--color-controls);
}
.tabsv__tab {
  min-height: 2.75rem; padding: .4rem 1.6rem; min-width: 8rem;
  border-radius: 999px; border: 1.5px solid currentColor;
  background: var(--color-surface); color: inherit; font-weight: 700;
  transition: background-color .25s ease, color .25s ease;
}
.tabsv__tab:hover { background: color-mix(in srgb, var(--color-accent) 35%, var(--color-surface)); }
.tabsv__tab[aria-selected="true"] { background: var(--color-controls-active); border-color: var(--color-controls-active); color: var(--color-surface); }
.tabsv__panel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 2.5rem); max-width: 64rem; margin: 0 auto; text-align: center; }
.tabsv__panel:focus-visible { outline-offset: 8px; }
.tabsv__col { display: grid; justify-items: center; align-content: start; gap: .45rem; animation: tab-in .35s ease; }
.tabsv__col-title { margin: 0; font-size: 1.15rem; }
.tabsv__col-text { margin: 0; line-height: 1.6; }
.tabsv__col-name { margin: 0; font-weight: 800; font-size: .9rem; color: var(--color-heading); }
@keyframes tab-in { from { opacity: 0; transform: translateY(6px); } }
@media (max-width: 749px) { .tabsv__panel { grid-template-columns: minmax(0, 1fr); } .tabsv__list { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: .25rem; } .tabsv__tab { flex: none; } }
@media (prefers-reduced-motion: reduce) { .tabsv__col { animation: none; } }

.tabsv__videos { display: block; margin-top: clamp(2rem, 4vw, 3rem); }
.tabsv__video-track {
  --gap: clamp(.75rem, 1.5vw, 1.1rem);
  grid-auto-columns: calc((min(100vw - var(--edge) * 2, var(--page-width)) - var(--gap) * (var(--video-cols, 4) - 1)) / var(--video-cols, 4));
  padding-inline: var(--edge);
  scroll-padding-inline: var(--edge);
}
@media (max-width: 989px) { .tabsv__video-track { grid-auto-columns: 42%; } }
@media (max-width: 599px) { .tabsv__video-track { grid-auto-columns: 70%; } }
.vcard__inner {
  position: relative; display: block; aspect-ratio: 9 / 16; overflow: hidden;
  border-radius: var(--radius); background: var(--color-heading);
}
.vcard__poster, .vcard__inner video, .vcard__inner iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.vcard__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 4rem; height: 4rem; border-radius: 50%; border: 0;
  display: grid; place-items: center;
  background: var(--color-surface); color: var(--color-heading);
  box-shadow: 0 10px 26px -10px rgba(0, 0, 0, .45);
  transition: transform .25s ease, background-color .25s ease;
}
.vcard__play .icon { width: 1.5rem; height: 1.5rem; fill: currentColor; margin-left: 3px; }
.vcard__play:hover { transform: translate(-50%, -50%) scale(1.07); background: var(--color-accent); }
.vcard__caption { position: absolute; left: .75rem; right: .75rem; bottom: .75rem; color: #fff; font-weight: 700; font-size: .9rem; text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.vcard__inner.is-playing .vcard__play, .vcard__inner.is-playing .vcard__caption, .vcard__inner.is-playing .vcard__poster { display: none; }

/* ---------- Icon badges under each tab column ---------- */
.tabsv__badge { display: grid; justify-items: center; gap: .55rem; margin-top: 1.1rem; }
.tabsv__col--badge-top .tabsv__badge { margin: 0 0 .35rem; }
.tabsv__badge-circle {
  display: grid; place-items: center;
  width: var(--badge-size, 60px); height: var(--badge-size, 60px); border-radius: 50%;
  background: var(--badge-bg, color-mix(in srgb, var(--color-accent) 28%, var(--color-surface)));
  color: var(--badge-icon, var(--color-heading));
}
.tabsv__badge-circle .icon { width: 46%; height: 46%; stroke-width: 1.6; }
.tabsv__badge-circle img { width: 62%; height: 62%; object-fit: contain; }
.tabsv__badge-label { font-weight: 800; font-size: 1rem; line-height: 1.2; color: var(--badge-label, var(--color-heading)); }

/* ---------- Centered video row ----------
   Desktop: the visible window is exactly one page wide and centered; fewer videos than a full row sit in the middle.
   Tablet / mobile: each video snaps to the center of the screen with the neighbours peeking on both sides. */
.tabsv__video-track {
  width: min(100% - var(--edge) * 2, var(--page-width));
  margin-inline: auto; padding-inline: 0; scroll-padding-inline: 0;
  grid-auto-columns: calc((100% - var(--gap) * (var(--video-cols, 4) - 1)) / var(--video-cols, 4));
  justify-content: safe center;
}
@media (max-width: 989px) {
  .tabsv__video-track { width: 100%; grid-auto-columns: 42vw; padding-inline: 29vw; }
  .tabsv__video-track > * { scroll-snap-align: center; }
}
@media (max-width: 599px) { .tabsv__video-track { grid-auto-columns: 70vw; padding-inline: 15vw; } }