/* ====== Layout (grid 12 cols, gap 20) ====== */
.th-video-block {}

.th-video-block__wrapper {
	display: grid;
	gap: 60px;
}

.th-video-block__content {
	order: -1;
}

.th-video-block__player {
	order: 0;
}

/* Tablet ≥768px: 12 columns, player 6, content 6 */
@media (min-width: 768px) {
	.th-video-block__wrapper {
		grid-template-columns: repeat(12, 1fr);
		align-items: start;
		gap: 20px;
	}
	.th-video-block__player {
		grid-column: span 6;
		order: 0;
	}
	.th-video-block__content {
		grid-column: span 6;
		order: 0;
	}
}

/* Desktop ≥1024px: player 8, content 4 */
@media (min-width: 1024px) {
	.th-video-block__player {
		grid-column: span 8;
	}
	.th-video-block__content {
		grid-column: span 4;
	}
}

/* ====== Player & media ====== */
.th-video-block__player {
	position: relative;
	width: calc(100% + 20px);
	aspect-ratio: 16 / 9;
	max-height: 646px;
	overflow: hidden;
	margin: 0 -10px;
}

@media (min-width: 768px) {
	.th-video-block__player {
		margin: 0;
		max-height: 646px;
		width: 100%;
		aspect-ratio: 16 / 9;
	}
}

/* video & embed share same visual frame */
.th-video-block__video,
.th-video-block__embed iframe {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	object-position: center;
	border: 0;
}

/* make iframe behave responsively */
.th-video-block__embed {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.th-video-block__embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* video opacity animation */
.th-video-block__video {
	opacity: 0;
	transition: opacity 0.3s ease;
}
.th-video-block__video.shown {
	opacity: 1;
}

/* Poster */
.th-video-block__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: grid;
	place-items: center;
	pointer-events: auto;
}

.th-video-block__poster--wrapper {
	position: relative;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.th-video-block__poster--wrapper::before {
	content: '';
	position: absolute;
	inset: 0;
	background-color: #00000033;
	z-index: 1;
}

.th-video-block__poster--wrapper button {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	border: none;
	background: transparent;
	color: #f2eee6;
	cursor: pointer;
	font-family: var(--font-primary);
	font-weight: 400;
	font-size: 60px;
	line-height: 90%;
	text-align: center;
	text-transform: uppercase;
	z-index: 2;
}

.th-video-block__poster.is-hidden {
	display: none !important;
}

/* Content */
.th-video-block__content > *:first-child {
	margin-top: 0;
}

.th-video-block__content {
	border-top: 1px solid rgba(13, 13, 13, 0.12);
	padding-top: 30px;
}

@media (min-width: 768px) {
	.th-video-block__content {
		padding-top: 20px;
	}
}
