/* =====================
   VIDEO BLOCK
   ===================== */

/* The heading block above the video: eyebrow + title + copy, always LEFT aligned (James,
   2026-07-14). It used to be centred, which left the "Latest Episode / Episode 8" heading on
   born-to-lead floating mid-column while every other block's heading ran off the left edge. */
.block-video .header {
    margin-bottom: var(--space-5);
    text-align: left;
}
.block-video .header__copy {
    margin-top: var(--space-3);
}
.block-video .header__copy p:last-child {
    margin-bottom: 0;
}

.block-video .video-wrap {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    align-items: center;
}

.block-video .video-wrap.has-graphic {
    grid-template-columns: 1fr 3fr;
}

/* Graphic column */
.block-video .video-graphic {
    display: flex;
    align-items: center;
    justify-content: center;
    max-height: 400px;
}

.block-video .video-graphic svg {
    width: 100%;
    height: 100%;
    max-height: 400px;
}

/* 16:9 responsive iframe wrapper */
.block-video .video-embed {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    overflow: hidden;
    background: #000;
}

.block-video .video-embed iframe,
.block-video .video-embed video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

@media (max-width: 991.98px) {
    .block-video .video-wrap.has-graphic {
        grid-template-columns: 1fr;
    }
    .block-video .video-graphic {
        display: none;
    }
}


/* Narrow container — when extra videos are listed the whole block is boxed in, mirroring the
   content block's "Narrow" option. Live's column is col-md-12 col-md-offset-2 of a 16-col 1248px
   container = a 930px content width (James, 2026-07-14: "when set to is narrow, container width is
   at 930px"). Cap the CONTENT at 930px and centre it; the container keeps its own gutters so the
   block still breathes on small screens. */
section.block-video > .container.is-narrow {
	max-width: calc(930px + (var(--container-px) * 2));
	margin-left: auto;
	margin-right: auto;
}

/* ── Extra videos (grid under the main frame) ───────────────────────────────
   Live's "Access is no joke" runs one feature video plus a 3-column grid of
   more, each with a title + description. */
.block-video .video-more {
	list-style: none;
	margin: var(--space-6) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6) var(--space-5);
}
@media (min-width: 768px) {
	.block-video .video-more { grid-template-columns: repeat(3, 1fr); }
}
.block-video .video-more__btn {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	text-align: left;
	cursor: pointer;
	color: inherit;
	font: inherit;
}
.block-video .video-more__thumb {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--color-light-grey, #f1f1f3);
}
.block-video .video-more__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .3s ease;
}
.block-video .video-more__btn:hover .video-more__thumb img,
.block-video .video-more__btn:focus-visible .video-more__thumb img { transform: scale(1.04); }
/* Dark overlay — same as the main video poster (.video-poster__image::after). */
.block-video .video-more__thumb::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .35);
	pointer-events: none;
	transition: background .3s ease;
	z-index: 0;
}
.block-video .video-more__btn:hover .video-more__thumb::after,
.block-video .video-more__btn:focus-visible .video-more__thumb::after {
	background: rgba(0, 0, 0, .45);
}
.block-video .video-more__play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
}
/* Orange circle with a white play glyph (matches live). */
.block-video .video-more__play svg {
	width: 56px;
	height: 56px;
	padding: 16px;
	border-radius: 50%;
	background: var(--color-p, #ff6e33);
	color: #fff;
}
.block-video .video-more__title {
	display: block;
	margin-top: 16px;
	font-size: 22px;
	font-weight: 700;
	text-decoration: none;
}
.block-video .video-more__desc {
	display: block;
	margin-top: 8px;
	font-size: 16px;
	line-height: 1.5;
	color: inherit;
}

/* ── Poster + modal playback (as live) ──────────────────────────────────────
   Live never embeds a player in the page: the feature video and every extra are
   poster images with a play button that open the video in a popup. */
.block-video .video-poster {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	color: inherit;
}
.block-video .video-poster__image {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--color-light-grey, #f1f1f3);
}
/* Dark overlay over the poster (live's `c-video-toggle--overlay`) — keeps the white play pill
   readable on a bright frame (James, 2026-07-14). */
.block-video .video-poster__image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .35);
	pointer-events: none;
	transition: background .3s ease;
}
.block-video .video-poster:hover .video-poster__image::after,
.block-video .video-poster:focus-visible .video-poster__image::after {
	background: rgba(0, 0, 0, .45);
}
.block-video .video-poster__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .4s ease;
}
.block-video .video-poster:hover .video-poster__image img,
.block-video .video-poster:focus-visible .video-poster__image img { transform: scale(1.03); }
/* White pill (orange icon circle + "Play Video" label), centred on the poster —
   matches live. */
.block-video .video-poster__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 8px 28px 8px 8px;
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 4px 24px rgba(0, 0, 0, .18);
}
.block-video .video-poster__play-label {
	color: #282829;
	font-size: 18px;
	font-weight: 700;
}
.block-video .video-poster__play-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--color-p, #ff6e33);
	color: #fff;
	flex-shrink: 0;
}
.block-video .video-poster__play-icon svg {
	width: 22px;
	height: 22px;
	margin-left: 2px;
}

/* caption under the feature video */
.block-video .video-caption { margin-top: 32px; }
/* Accent bar above the caption title — live's `u-pre-title--border-orange`: same 8.3rem x .5rem bar
   the top-title uses, in the PRIMARY colour (James, 2026-07-14). */
.block-video .video-caption__accent {
	background-color: var(--color-p);
	content: "";
	display: block;
	height: .5rem;
	width: 8.3rem;
	margin: 0 0 1em;
}
.block-video .video-caption__title { margin: 0 0 32px; }
.block-video .video-caption__copy p:last-child { margin-bottom: 0; }

/* modal */
.block-video .video-modal {
	position: fixed;
	inset: 0;
	z-index: 999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}
.block-video .video-modal[hidden] { display: none; }
.block-video .video-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(20, 20, 21, .85);
}
.block-video .video-modal__dialog {
	position: relative;
	width: min(1100px, 100%);
}
.block-video .video-modal__frame {
	position: relative;
	aspect-ratio: 16 / 9;
	background: #000;
}
.block-video .video-modal__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.block-video .video-modal__close {
	position: absolute;
	top: -52px;
	right: 0;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: #282829;
	cursor: pointer;
}
.block-video .video-modal__close svg { width: 20px; height: 20px; }