/* ================================================
   TAB1 SLIDE12 - CLICKABLE VIDEO BANNER - 2880x960 video + clickable hotspots
   ================================================ */
.pt-vh { position: relative; overflow: hidden; background: #7f1b13; container-type: size; height: 60vh; }
.pt-vh__video, .pt-vh__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.pt-vh picture { display: contents; }
.pt-vh__bg { display: none; }
/* the hotspot layer is the video's own box (3:1, cover-cropped, centred) so % positions match the picture */
.pt-vh__spots { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: max(100cqw, 300cqh); height: max(100cqh, 33.3333cqw); container-type: size; }
.pt-vh__spot { position: absolute; display: block; pointer-events: none; cursor: pointer; z-index: 1;
   background: radial-gradient(ellipse at 50% 40%, rgba(255, 190, 170, 0), rgba(255, 190, 170, 0) 70%);
   box-shadow: 0 0 0 0 rgba(255, 90, 60, 0);
   transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease, backdrop-filter .35s ease, background .35s ease; }
.pt-vh__spot.is-active { pointer-events: auto; }
.pt-vh__spot.is-active:hover, .pt-vh__spot.is-active:focus-visible { z-index: 2; outline: none;
   -webkit-backdrop-filter: brightness(1.12); backdrop-filter: brightness(1.12);
   background: radial-gradient(ellipse at 50% 40%, rgba(255, 190, 170, .22), rgba(255, 190, 170, 0) 70%);
   box-shadow: 0 0 60px 6px rgba(255, 90, 60, .45); }

/* Mobile: the whole 3:1 frame stays visible (no side crop); the tall box around it is filled with a blurred copy of the picture.
   Heights equal the other banners' (banner11), so no #0007 bands show above/below. */
@media (max-width: 899px) {
    .pt-vh { height: 60vh; }
    .pt-vh__bg { display: block; position: absolute; inset: -20px; width: calc(100% + 40px); height: calc(100% + 40px); object-fit: cover; filter: blur(16px) saturate(1.1); }
    .pt-vh__video, .pt-vh__poster { object-fit: contain; }
    .pt-vh__spots { width: 100cqw; height: 33.3333cqw; }
}
@media (max-width: 767px) {
    .pt-vh { height: 34vh; }
}