/* Prophecius "What we're working on" video slider - homepage and gallery.
   Markup is written by the admin panel (Homepage work). */
.p-vt{
  --vt-per-view:4; --vt-gap:24px;
  padding-block:var(--spacing-fluid-2xl,3.5rem) var(--spacing-fluid-lg,2rem);
  background:var(--color-beige-400,#f5f1e4);
  color:var(--color-charcoal,#2c2e2a);
}
.p-vt_head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--spacing-fluid-md,1.5rem); margin-bottom:var(--spacing-fluid-lg,2rem);
}
.p-vt_eyebrow{
  font-size:.8125rem; letter-spacing:.14em; text-transform:uppercase;
  font-weight:600; color:#7a000e; margin:0 0 .5rem;
}
.p-vt_title{margin:0; letter-spacing:-.04em;}
.p-vt_intro{margin:.75rem 0 0; max-width:52ch; font-size:clamp(1rem,.95rem + .25vw,1.125rem); line-height:1.5; opacity:.8;}
.p-vt_nav{display:flex; gap:.625rem; flex:0 0 auto;}
.p-vt_arrow{
  inline-size:44px; block-size:44px; border-radius:999px; cursor:pointer;
  display:grid; place-items:center; color:#f5f1e4; background:#7a000e;
  border:0; padding:0; transition:transform .2s ease, background-color .2s ease, opacity .2s ease;
}
.p-vt_arrow svg{inline-size:20px; block-size:20px;}
.p-vt_arrow:hover{background:#5c000a; transform:translateY(-2px);}
.p-vt_arrow:focus-visible{outline:3px solid #7a000e; outline-offset:3px;}

.p-vt_viewport{overflow:hidden; cursor:grab; touch-action:pan-y;}
.p-vt_viewport.is-dragging{cursor:grabbing;}
.p-vt_track{
  display:flex; gap:var(--vt-gap); margin:0; padding:0; list-style:none;
  will-change:transform;
  transition:transform .55s cubic-bezier(.22,.61,.36,1);
}
.p-vt_viewport.is-dragging .p-vt_track{transition:none;}
.p-vt_slide{
  flex:0 0 calc((100% - (var(--vt-per-view) - 1) * var(--vt-gap)) / var(--vt-per-view));
}
.p-vt_card{
  position:relative; display:block; overflow:hidden; margin:0;
  border-radius:var(--radius-md,20px); aspect-ratio:9/16;
  background:linear-gradient(150deg,#7a000e 0%,#4d0008 60%,#2c2e2a 100%);
}
.p-vt_card video{
  position:absolute; inset:0; inline-size:100%; block-size:100%;
  object-fit:cover; display:block;
}
.p-vt_tag::before{content:attr(data-label);}   /* text lives in data-label, out of the indexable content */
.p-vt_tag{
  position:absolute; inset-block-start:.85rem; inset-inline-start:.85rem;
  padding:.3rem .7rem; border-radius:999px; background:#f5f1e4; color:#7a000e;
  font-size:.75rem; font-weight:600; letter-spacing:.02em; line-height:1.2;
}
.p-vt_meta{
  position:absolute; inset-inline:0; inset-block-end:0; padding:1.25rem 1rem .95rem;
  background:linear-gradient(to top,rgba(20,0,3,.82),rgba(20,0,3,0));
  color:#f5f1e4; pointer-events:none;
}
/* monogram square in the bottom-right corner, over the video generator's watermark */
.p-vt_brand{
  position:absolute; inset-inline-end:.6rem; inset-block-end:.6rem; z-index:1;
  inline-size:16%; min-inline-size:40px; max-inline-size:60px; aspect-ratio:1;
  display:grid; place-items:center; border-radius:10px; background:#f5f1e4;
  box-shadow:0 2px 10px rgba(20,0,3,.25);
}
.p-vt_brand img{inline-size:62%; block-size:auto; display:block;}
.p-vt_card .p-vt_meta{padding-inline-end:calc(16% + 1.4rem);}
.p-vt_name{display:block; font-weight:600; font-size:.95rem; line-height:1.25;}
.p-vt_role{display:block; font-size:.8rem; opacity:.8; margin-block-start:.15rem;}

.p-vt_dots{display:none; justify-content:center; gap:.4rem; margin-block-start:1.25rem;}
.p-vt_dot{
  inline-size:7px; block-size:7px; border-radius:999px; border:0; padding:0;
  background:rgba(44,46,42,.25); cursor:pointer;
}
.p-vt_dot.is-active{background:#7a000e; inline-size:20px;}

/* sits above any absolutely positioned illustration in the section before it */
.p-vt{position:relative; z-index:5;}

@media (max-width:1279px){ .p-vt{--vt-per-view:3;} }
@media (max-width:1023px){ .p-vt{--vt-per-view:2; --vt-gap:18px;} }
@media (max-width:639px){
  .p-vt{--vt-per-view:1.15; --vt-gap:14px;}
  .p-vt_head{align-items:flex-start; flex-direction:column;}
  .p-vt_nav{display:none;}          /* swipe instead of arrows on phones */
  .p-vt_dots{display:flex;}
}
@media (prefers-reduced-motion:reduce){
  .p-vt_track{transition:none;}
  .p-vt_arrow{transition:none;}
}