/* Customer video testimonials - shared by customer-video-testimonials.html and the homepage
   testimonials section. Everything is under the vt- prefix. Card text uses div, not p/span, because
   styles-et-site.css has blanket p/span font-size rules that would otherwise restyle it. */
.vt-intro { max-width: 760px; margin: 0 auto 2.5rem; text-align: center; }
.vt-pills { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: 1rem; }
.vt-pills > div { font-size: .85rem; padding: .35rem .8rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); color: #d6dcef; }
.vt-pills i { margin-right: .35rem; color: #a78bfa; }
/* Small portrait cards: six in one row on desktop (992px+), three on tablet, two on phones.
   The photo is a 4:5 crop of the 9:16 poster, which keeps 70% of the frame
   height. Speakers stand at very different heights (face centres 25% to 52% of the frame), so each
   <img> sets its own focal point in --vt-y; the full frame plays in the popup. The whole card plays
   the video on click (js/et-video-testimonials.js); the button inside stays the keyboard target. */
.vt-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; max-width: 1280px; margin: 0 auto; }
@media (max-width: 991.98px) { .vt-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 720px; } }
@media (max-width: 575.98px) { .vt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; } }
.vt-card { position: relative; display: flex; flex-direction: column; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 1rem; overflow: hidden; min-width: 0; text-align: left; cursor: pointer; transition: transform .2s ease, border-color .2s ease; }
.vt-card:hover { transform: translateY(-3px); border-color: rgba(167,139,250,.55); }
.vt-thumb { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; padding: 0; border: 0; background: #0b0a1a; cursor: pointer; overflow: hidden; }
.vt-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: 50% var(--vt-y, 30%); transition: transform .4s ease; }
.vt-thumb::after { content: ""; position: absolute; inset: auto 0 0 0; height: 30%; background: linear-gradient(to top, rgba(8,7,22,.8), rgba(8,7,22,0)); pointer-events: none; }
.vt-card:hover .vt-thumb img, .vt-thumb:focus-visible img { transform: scale(1.03); }
.vt-thumb:focus-visible { outline: 3px solid #a78bfa; outline-offset: -3px; }
/* font-size is !important on these three spans because common-site.css sets `span, p, a { font-size: ... !important }` below 1400px. */
.vt-play { position: absolute; left: .6rem; bottom: .6rem; z-index: 1; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #7c3aed; border: 2px solid rgba(255,255,255,.9); color: #fff; font-size: 1.25rem !important; box-shadow: 0 4px 14px rgba(0,0,0,.35); transition: transform .2s ease, background .2s ease; }
.vt-card:hover .vt-play, .vt-thumb:focus-visible .vt-play { transform: scale(1.1); background: #8b5cf6; }
.vt-dur { position: absolute; right: .6rem; bottom: .8rem; z-index: 1; font-size: .72rem !important; line-height: 1.4; font-weight: 600; padding: .1rem .45rem; border-radius: .35rem; background: rgba(0,0,0,.65); color: #fff; font-variant-numeric: tabular-nums; }
/* Basic info first (who, organisation), then a two-line excerpt; the full transcript is in the popup.
   The event chip rides on the photo's top-left corner, above every speaker's head. */
.vt-body { padding: .7rem .8rem .85rem; display: flex; flex-direction: column; gap: .2rem; flex: 1; }
.vt-event { position: absolute; top: .55rem; left: .55rem; z-index: 1; max-width: calc(100% - 1.1rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .62rem !important; line-height: 1.4; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: rgba(15,14,34,.78); padding: .18rem .5rem; border-radius: 999px; }
.vt-who { order: 1; font-size: .95rem; font-weight: 700; line-height: 1.3; color: #fff; }
.vt-role { order: 2; font-size: .76rem; line-height: 1.35; color: #a9b0c8; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vt-quote { order: 3; margin: .3rem 0 0; font-size: .8rem; line-height: 1.45; font-style: italic; color: #d6dcef; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vt-home { margin-top: 3.5rem; }
.vt-home-title { font-size: 1.5rem; font-weight: 700; color: #fff; text-align: center; margin-bottom: .4rem; }
.vt-home-sub { text-align: center; color: #a9b0c8; margin: 0 auto 1.8rem; max-width: 640px; }
/* margin/inset restate the UA centring that the site's global reset removes */
/* Large popup: the portrait video takes the full popup height (92vh); transcript alongside. */
.vt-dialog { position: fixed; inset: 0; margin: auto; height: fit-content; width: min(1180px, calc(100vw - 24px)); max-height: calc(100vh - 24px); padding: 0; border: 1px solid rgba(255,255,255,.15); border-radius: 1.25rem; background: #0f0e22; color: #eef1fb; overflow: hidden; }
.vt-dialog::backdrop { background: rgba(4,4,12,.85); }
.vt-dialog-inner { display: grid; grid-template-columns: auto minmax(0, 1fr); height: min(92vh, 900px); }
/* explicit height (not 100%): a grid item would otherwise size to the file's intrinsic 854px and clip the controls */
.vt-dialog video { height: min(92vh, 900px); width: auto; max-width: 60vw; aspect-ratio: 9 / 16; background: #000; display: block; object-fit: contain; }
@media (max-width: 767.98px) {
    .vt-dialog-inner { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; height: auto; max-height: calc(100vh - 26px); overflow-y: auto; }
    .vt-dialog video { width: 100%; height: auto; max-width: none; max-height: 78vh; }
}
.vt-side { padding: 1.4rem 1.5rem; overflow-y: auto; min-width: 0; text-align: left; }
.vt-dialog-title { font-size: 1.15rem; font-weight: 700; margin: 0 2.5rem .4rem 0; color: #fff; }
.vt-side .vt-note { font-size: .8rem; color: #a9b0c8; margin-bottom: 1rem; }
.vt-side .vt-transcript { font-size: .95rem; line-height: 1.65; color: #d6dcef; white-space: pre-line; }
.vt-close { position: absolute; top: .6rem; right: .6rem; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255,255,255,.12); color: #fff; font-size: 1.1rem; z-index: 2; }
.vt-close:hover, .vt-close:focus-visible { background: #7c3aed; }
@media (prefers-reduced-motion: reduce) { .vt-thumb img, .vt-play { transition: none; } }