/* Category-builder blocks butt straight up against the next one — the
   full-width variant gets no .section-space-y to space it out. */
.cb-block.ho-video-section { margin-bottom: 5rem; }

@media (max-width: 991px) {
	.cb-block.ho-video-section { margin-bottom: 3rem; }
}

/* Full bleed widens only the SECTION to the viewport edge — the inner
   .container-lg keeps the content (title + player) at 1560px, centred. The
   section always sits inside a constrained parent (the module lands in
   Bootstrap's .container-xxl = 1320px; the builder block in .container-builder),
   so break out with a viewport-width span regardless of that parent's cap. */
.ho-video-section--full {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding-left: 0;
	padding-right: 0;
	/* The whole point of the bleed: a full-width band behind the player. Without
	   a fill the 100vw box is invisible. Vertical padding gives the band height
	   around the content so it doesn't hug the title/video edges. */
	background: #edebef;
	padding-top: 3.5rem;
	padding-bottom: 3.5rem;
}

/* The homepage wraps every module in .container-home, which has overflow-x:clip
   (custom.css) to kill horizontal scroll — that also chops our 100vw band back
   to the container width. Move the clip up to the full-viewport #common-home so
   the band reaches the edges while scroll is still contained. Higher specificity
   than custom.css's rule because ho-video.css loads first. Scoped to this file,
   so it only kicks in on pages that actually carry a video. */
#common-home > .container-xxl.container-home { overflow-x: visible; }
#common-home { overflow-x: clip; }

/* Narrow variant — the glow follows the player in, otherwise it pokes out
   from under both sides. */
.ho-video-section--small .ho-video { max-width: 80%; margin: 0 auto; }
.ho-video-section--small .ho-video-frame::before { inset: auto 18% -26px 18%; }

.ho-video-section .ho-video-title { margin: 0; }

.ho-video-section .ho-video-title::after {
	content: "";
	display: block;
	width: 56px;
	height: 4px;
	margin: 1rem auto 0;
	border-radius: 4px;
	background: #e62128;
}

.ho-video-section .ho-video-sub { max-width: 720px; margin: 1rem auto 0; color: #5b5b5b; }
.ho-video-section .ho-video-sub p:last-child { margin-bottom: 0; }

.ho-video-frame { position: relative; margin-top: 2.5rem; }

/* Heading is optional — with nothing above it the player needs no top gap. */
.ho-video-frame:first-child { margin-top: 0; }

/* Soft drop glow behind the card, so the video reads as a designed element
   rather than a pasted-in iframe. */
.ho-video-frame::before {
	content: "";
	position: absolute;
	inset: auto 8% -26px 8%;
	height: 60px;
	border-radius: 50%;
	background: rgba(20, 20, 28, .32);
	filter: blur(46px);
	z-index: 0;
	pointer-events: none;
}

.ho-video {
	position: relative;
	z-index: 1;
	width: 100%;
	overflow: hidden;
	background: #000;
	border-radius: 18px;
	/* Crisp contact shadow hugging the edge + a wide, light ambient one. The
	   contrast between the two is what lifts the card off the page; both being
	   dark just muddies the area under it. */
	box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}

.ho-video--16x9 { aspect-ratio: 16 / 9; }
.ho-video--4x3  { aspect-ratio: 4 / 3; }
.ho-video--1x1  { aspect-ratio: 1 / 1; }
.ho-video--21x9 { aspect-ratio: 21 / 9; }

.ho-video iframe,
.ho-video .ho-video-facade { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.ho-video .ho-video-facade { padding: 0; background: none; cursor: pointer; display: block; }

.ho-video .ho-video-facade img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .5s ease;
}

/* Dark scrim keeps the play button legible over bright thumbnails. */
.ho-video .ho-video-facade::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, .05) 0%, rgba(0, 0, 0, .35) 100%);
	transition: opacity .3s ease;
}

.ho-video .ho-video-facade:hover img,
.ho-video .ho-video-facade:focus-visible img { transform: scale(1.03); }
.ho-video .ho-video-facade:hover::after { opacity: .75; }

.ho-video .ho-video-play {
	position: absolute; top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	width: 84px; height: 84px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .16) no-repeat center / 26px 30px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28' fill='%23fff'%3E%3Cpath d='M0 0l24 14L0 28z'/%3E%3C/svg%3E");
	backdrop-filter: blur(4px);
	border: 2px solid rgba(255, 255, 255, .75);
	transition: background-color .25s ease, border-color .25s ease, transform .25s ease;
}

.ho-video .ho-video-facade:hover .ho-video-play,
.ho-video .ho-video-facade:focus-visible .ho-video-play {
	background-color: #e62128;
	border-color: #e62128;
	transform: translate(-50%, -50%) scale(1.08);
}

.ho-video .ho-video-facade:focus-visible { outline: 3px solid #e62128; outline-offset: 3px; }

@media (max-width: 991px) {
	.ho-video-frame { margin-top: 1.75rem; }
	/* The narrow (80%) variant is a desktop framing device — on mobile the
	   player should use the full column width. */
	.ho-video-section--small .ho-video { max-width: 100%; }
	.ho-video-section--small .ho-video-frame::before { inset: auto 8% -26px 8%; }
}

@media (max-width: 700px) {
	.ho-video { border-radius: 12px; }
	.ho-video .ho-video-play { width: 62px; height: 62px; background-size: 20px 23px; border-width: 1.5px; }
	.ho-video-section .ho-video-title::after { width: 44px; height: 3px; margin-top: .75rem; }
}

@media (prefers-reduced-motion: reduce) {
	.ho-video .ho-video-facade img,
	.ho-video .ho-video-play { transition: none; }
	.ho-video .ho-video-facade:hover img { transform: none; }
}