/*
 * Article page — hero (first block).
 * Reuses the Home animated video stage frame from layout/header.php and
 * places a compact "Back" button card inside it.
 *
 * Container math: site-shell = min(1348px, 100%) with 16px side padding,
 * which yields a 1316px inner content width on wide screens.
 */

/* Match Home page top alignment / borderless header inside the stage. */
.page-template-page-article .site-header,
.page-slug-article .site-header,
.page-template-page-article2 .site-header,
.page-slug-article2 .site-header,
.page-template-page-article3 .site-header,
.page-slug-article3 .site-header,
.page-template-page-article4 .site-header,
.page-slug-article4 .site-header,
.page-template-page-article5 .site-header,
.page-slug-article5 .site-header,
.page-template-page-article6 .site-header,
.page-slug-article6 .site-header,
.page-template-page-privacy-policy .site-header,
.page-slug-privacy-policy-2 .site-header,
.page-template-page-terms-and-conditions .site-header,
.page-template-page-terms-conditions .site-header,
.page-slug-terms-and-conditions .site-header,
.page-slug-terms-conditions .site-header,
.page-template-page-cookie-policy .site-header,
.page-slug-cookie-policy .site-header,
.page-template-page-refund-policy .site-header,
.page-slug-refund-policy .site-header {
	padding: 0;
}

/*
 * Keep site-main transparent inside the home-stage frame so the hero video
 * and overlay stay visible behind the title (opaque main would paint over them).
 * Page body is #000; sections below the stage read the same as before.
 */
.page-template-page-article .site-main,
.page-slug-article .site-main,
.page-template-page-article2 .site-main,
.page-slug-article2 .site-main,
.page-template-page-article3 .site-main,
.page-slug-article3 .site-main,
.page-template-page-article4 .site-main,
.page-slug-article4 .site-main,
.page-template-page-article5 .site-main,
.page-slug-article5 .site-main,
.page-template-page-article6 .site-main,
.page-slug-article6 .site-main,
.page-template-page-privacy-policy .site-main,
.page-slug-privacy-policy-2 .site-main,
.page-template-page-terms-and-conditions .site-main,
.page-template-page-terms-conditions .site-main,
.page-slug-terms-and-conditions .site-main,
.page-slug-terms-conditions .site-main,
.page-template-page-cookie-policy .site-main,
.page-slug-cookie-policy .site-main,
.page-template-page-refund-policy .site-main,
.page-slug-refund-policy .site-main {
	padding: 0;
	max-width: 100%;
	background-color: transparent;
}

.page-template-page-article .home-stage__frame,
.page-slug-article .home-stage__frame,
.page-template-page-article2 .home-stage__frame,
.page-slug-article2 .home-stage__frame,
.page-template-page-article3 .home-stage__frame,
.page-slug-article3 .home-stage__frame,
.page-template-page-article4 .home-stage__frame,
.page-slug-article4 .home-stage__frame,
.page-template-page-article5 .home-stage__frame,
.page-slug-article5 .home-stage__frame,
.page-template-page-article6 .home-stage__frame,
.page-slug-article6 .home-stage__frame,
.page-template-page-privacy-policy .home-stage__frame,
.page-slug-privacy-policy .home-stage__frame,
.page-slug-privacy-policy-2 .home-stage__frame,
.page-template-page-terms-and-conditions .home-stage__frame,
.page-template-page-terms-conditions .home-stage__frame,
.page-slug-terms-and-conditions .home-stage__frame,
.page-slug-terms-conditions .home-stage__frame,
.page-template-page-cookie-policy .home-stage__frame,
.page-slug-cookie-policy .home-stage__frame,
.page-template-page-refund-policy .home-stage__frame,
.page-slug-refund-policy .home-stage__frame {
	border: 1px solid rgba(100, 100, 102, 0.5);
}

.article-hero {
	/*
	 * margin-bottom is 0 on purpose: the home-stage frame already adds
	 * 32px of bottom padding, which becomes the requested 32px gap
	 * between the title and the bottom edge of the main block.
	 */
	margin-top: clamp(72px, 17vw, 290px);
	margin-bottom: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}

.article-hero__back {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	width: auto;
	max-width: 100%;
	padding: clamp(10px, 1vw, 14px) clamp(14px, 1.4vw, 18px);
	border-radius: clamp(14px, 1.4vw, 18px);
	border: 1px solid rgba(189, 211, 250, 0.34);
	background: linear-gradient(180deg, rgba(20, 28, 43, 0.2) 0%, rgba(6, 10, 18, 0.14) 100%);
	backdrop-filter: blur(4px) saturate(118%);
	-webkit-backdrop-filter: blur(4px) saturate(118%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.15),
		inset 0 -1px 0 rgba(255, 255, 255, 0.05),
		0 6px 18px rgba(0, 0, 0, 0.2);
	color: #bdd3fa;
	text-decoration: none;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, transform 0.12s ease;
}

.article-hero__back:hover,
.article-hero__back:focus-visible {
	border-color: rgba(189, 211, 250, 0.6);
	background: linear-gradient(180deg, rgba(28, 38, 58, 0.28) 0%, rgba(8, 12, 22, 0.18) 100%);
	outline: none;
}

.article-hero__back:active {
	transform: translateY(1px);
}

.article-hero__back-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
}

.article-hero__back-icon img {
	display: block;
	width: 24px;
	height: 24px;
	object-fit: contain;
}

.article-hero__back-label {
	display: inline-block;
	font-size: 16px;
	line-height: 1;
	color: #bdd3fa;
}

.article-hero__title {
	margin: 0;
	max-width: 100%;
	background-image: linear-gradient(90deg, #e6e7eb 0%, #bdd3fa 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	font-size: clamp(30px, 5vw, 56px);
	font-weight: 700;
	line-height: 1.08;
}