/**
 * Reusable mid-article video/story presentation for native Blog posts.
 * Loaded only when post content contains the data-blog-video-story signature.
 */

.blog-detail-page .post-entry .blog-video-story {
	margin: clamp(42px, 6vw, 76px) 0;
	padding: clamp(18px, 3.2vw, 42px);
	border: 1px solid rgb(27 46 63 / 13%);
	border-radius: 22px;
	background: linear-gradient(145deg, #faf7f2 0%, #f0ebe3 100%);
}

/* Match the hero-to-frame gap to the frame's own top inset only when the story opens the article. */
.blog-detail-page .page-single-post:has(.post-entry > .blog-video-story:first-child) {
	padding-top: calc(clamp(18px, 3.2vw, 42px) + clamp(22px, 3.4vw, 42px) + 1px);
}

.blog-detail-page .post-entry > .blog-video-story:first-child {
	margin-top: 0;
}

.blog-detail-page .post-entry .blog-video-story__inner {
	display: grid;
	grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr);
	gap: clamp(28px, 3.4vw, 46px);
	align-items: start;
	max-width: 1180px;
	margin: 0 auto;
	padding: clamp(22px, 3.4vw, 42px);
	border-radius: 18px;
	background: transparent;
	box-shadow: none;
}

.blog-detail-page .post-entry .blog-video-story__media {
	display: flex;
	justify-content: center;
	min-width: 0;
}

.blog-detail-page .post-entry .blog-video-story__card {
	position: relative;
	width: min(100%, 510px);
	aspect-ratio: 9 / 16;
	overflow: hidden;
	box-sizing: border-box;
	border: 10px solid #fff;
	border-radius: 30px;
	background: #171b15;
	box-shadow: none;
	isolation: isolate;
}

.blog-detail-page .post-entry .blog-video-story__card::after {
	position: absolute;
	z-index: 2;
	right: 0;
	bottom: 0;
	left: 0;
	height: 34%;
	background: linear-gradient(180deg, transparent, rgb(13 18 13 / 72%));
	pointer-events: none;
	content: "";
}

.blog-detail-page .post-entry .blog-video-story__viewport {
	position: absolute;
	z-index: 1;
	inset: 0;
	overflow: hidden;
	background: #171b15;
}

.blog-detail-page .post-entry .blog-video-story__embed {
	position: absolute;
	top: -54px;
	left: -23.5%;
	display: block;
	width: 147%;
	height: 1000px;
	margin: 0;
	border: 0;
	background: #171b15;
}

.blog-detail-page .post-entry .blog-video-story__cta {
	position: absolute;
	z-index: 3;
	right: 16px;
	bottom: 16px;
	left: 16px;
	display: flex;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	min-height: 54px;
	padding: 11px 13px 11px 20px;
	border: 1px solid rgb(255 255 255 / 46%);
	border-radius: 999px;
	color: var(--primary-color);
	font-size: clamp(13px, 1.15vw, 16px);
	font-weight: 750;
	line-height: 1.2;
	text-decoration: none;
	background: rgb(247 242 236 / 96%);
	box-shadow: 0 8px 24px rgb(13 18 13 / 18%);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.blog-detail-page .post-entry .blog-video-story__cta-mark {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	color: #fff;
	font-size: 19px;
	background: var(--accent-color);
}

.blog-detail-page .post-entry .blog-video-story__cta:hover {
	color: var(--primary-color);
	background: #fff;
}

.blog-detail-page .post-entry .blog-video-story__cta:focus-visible {
	outline: 3px solid color-mix(in srgb, var(--accent-color) 55%, transparent);
	outline-offset: 4px;
}

.blog-detail-page .post-entry .blog-video-story__copy {
	min-width: 0;
}

.blog-detail-page .post-entry .blog-video-story__copy h2 {
	margin-top: 1.08em;
	font-size: clamp(24px, 2.1vw, 31px);
}

.blog-detail-page .post-entry .blog-video-story__copy h2:first-child {
	margin-top: 0;
}

.blog-detail-page .post-entry .blog-video-story__copy p:last-child {
	margin-bottom: 0;
}

.blog-detail-page .post-entry .blog-video-story--structured + .blog-video-story__continuation {
	margin-top: 0;
}

.blog-detail-page .post-entry .blog-video-story__continuation > :first-child {
	margin-top: 0;
}

@media (min-width: 992px) {
	.blog-detail-page .page-single-post:has(.post-entry > .blog-video-story:first-child) {
		padding-top: calc(clamp(18px, 3.2vw, 42px) + clamp(28px, 2.8vw, 36px) + 1px);
	}

	.blog-detail-page .post-entry .blog-video-story__inner {
		grid-template-columns: minmax(320px, 390px) minmax(0, 1fr);
		gap: clamp(32px, 3vw, 40px);
		padding: clamp(28px, 2.8vw, 36px);
	}

	.blog-detail-page .post-entry .blog-video-story__copy {
		font-size: 17px;
		line-height: 1.62;
	}

	.blog-detail-page .post-entry .blog-video-story__copy h2 {
		font-size: clamp(24px, 2vw, 28px);
	}
}

@media (max-width: 991px) {
	.blog-detail-page .post-entry .blog-video-story__inner {
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
	}

	.blog-detail-page .post-entry .blog-video-story__card {
		width: min(100%, 430px);
	}
}

@media (max-width: 575px) {
	.blog-detail-page .page-single-post:has(.post-entry > .blog-video-story:first-child) {
		padding-top: 30px;
	}

	.blog-detail-page .post-entry .blog-video-story {
		margin-inline: -4px;
		padding: 14px;
		border-radius: 18px;
	}

	.blog-detail-page .post-entry .blog-video-story__inner {
		gap: 28px;
		padding: 15px;
		border-radius: 14px;
	}

	.blog-detail-page .post-entry .blog-video-story__card {
		border-radius: 24px;
	}

	.blog-detail-page .post-entry .blog-video-story__cta {
		right: 11px;
		bottom: 11px;
		left: 11px;
		min-height: 48px;
		padding: 9px 10px 9px 15px;
	}

	.blog-detail-page .post-entry .blog-video-story__cta-mark {
		width: 30px;
		height: 30px;
		font-size: 17px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.blog-detail-page .post-entry .blog-video-story__cta {
		scroll-behavior: auto;
	}
}