/*
 * Article page — overview / table-of-contents card.
 * Sits 80px below the home-stage video frame.
 *
 * Card spec:
 *   width: 436px (max 100%)
 *   height: 516px on desktop (auto/min on mobile so content never clips)
 *   border-radius: 24px
 *   border: 1px solid rgba(100, 100, 102, 0.25)  // = #64646640 (25%)
 *   semi-transparent glass fill, top spot+glow, bottom-left cyan glow
 */

.article-overview {
	margin-top: 80px;
}

.article-overview__layout {
	display: grid;
	grid-template-columns: 436px minmax(0, 1fr);
	column-gap: clamp(36px, 5.2vw, 80px);
	align-items: start;
}

.article-overview__card {
	position: relative;
	box-sizing: border-box;
	width: 436px;
	max-width: 100%;
	height: auto;
	min-height: 516px;
	padding: 24px;
	border-radius: 24px;
	border: 1px solid rgba(100, 100, 102, 0.25);
	background:
		radial-gradient(circle at 6% 94%, rgba(115, 172, 203, 0.24) 0%, rgba(115, 172, 203, 0.1) 18%, rgba(115, 172, 203, 0.03) 34%, rgba(115, 172, 203, 0) 52%),
		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);
	overflow: hidden;
	isolation: isolate;
	display: flex;
	flex-direction: column;
}

/* Sticky TOC needs a non-clipping ancestor; .home-stage__frame defaults to overflow:hidden. */
body:is(
	.page-template-page-privacy-policy,
	.page-slug-privacy-policy,
	.page-slug-privacy-policy-2,
	.page-template-page-cookie-policy,
	.page-slug-cookie-policy,
	.page-template-page-refund-policy,
	.page-slug-refund-policy,
	.page-template-page-terms-and-conditions,
	.page-template-page-terms-conditions,
	.page-slug-terms-and-conditions,
	.page-slug-terms-conditions
) .home-stage__frame {
	overflow-x: clip;
	overflow-y: visible;
}

body:is(
	.page-template-page-privacy-policy,
	.page-slug-privacy-policy,
	.page-slug-privacy-policy-2,
	.page-template-page-cookie-policy,
	.page-slug-cookie-policy,
	.page-template-page-refund-policy,
	.page-slug-refund-policy,
	.page-template-page-terms-and-conditions,
	.page-template-page-terms-conditions,
	.page-slug-terms-and-conditions,
	.page-slug-terms-conditions
) .article-overview__layout {
	align-items: start;
}

body:is(
	.page-template-page-privacy-policy,
	.page-slug-privacy-policy,
	.page-slug-privacy-policy-2,
	.page-template-page-cookie-policy,
	.page-slug-cookie-policy,
	.page-template-page-refund-policy,
	.page-slug-refund-policy,
	.page-template-page-terms-and-conditions,
	.page-template-page-terms-conditions,
	.page-slug-terms-and-conditions,
	.page-slug-terms-conditions
) .article-overview__card {
	--article-overview-sticky-offset: clamp(16px, 3vw, 32px);

	position: sticky;
	top: var(--article-overview-sticky-offset);
	align-self: start;
	max-height: calc(100dvh - var(--article-overview-sticky-offset) - 24px);
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

body:is(
	.page-template-page-privacy-policy,
	.page-slug-privacy-policy,
	.page-slug-privacy-policy-2,
	.page-template-page-cookie-policy,
	.page-slug-cookie-policy,
	.page-template-page-refund-policy,
	.page-slug-refund-policy,
	.page-template-page-terms-and-conditions,
	.page-template-page-terms-conditions,
	.page-slug-terms-and-conditions,
	.page-slug-terms-conditions
) .article-overview__list {
	flex: 0 0 auto;
	min-height: auto;
}

/* Top decoration: radial glow + spot image with letters (same asset as home cards). */
.article-overview__card::before {
	content: "";
	position: absolute;
	top: -24px;
	right: 0;
	width: 430px;
	height: 420px;
	z-index: 0;
	border-top-right-radius: inherit;
	overflow: hidden;
	background:
		radial-gradient(circle at 62% 28%, rgba(188, 214, 255, 0.2) 0%, rgba(188, 214, 255, 0.08) 34%, rgba(188, 214, 255, 0) 82%),
		radial-gradient(circle at 74% 84%, rgba(115, 172, 203, 0.34) 0%, rgba(115, 172, 203, 0.14) 44%, rgba(115, 172, 203, 0) 84%);
	background-size: auto, auto;
	background-repeat: no-repeat;
	background-position: center, center;
	opacity: 0.46;
	mask-image: radial-gradient(ellipse 94% 92% at 80% 26%, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.94) 44%, rgba(0, 0, 0, 0.62) 70%, rgba(0, 0, 0, 0) 94%);
	-webkit-mask-image: radial-gradient(ellipse 94% 92% at 80% 26%, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.94) 44%, rgba(0, 0, 0, 0.62) 70%, rgba(0, 0, 0, 0) 94%);
	pointer-events: none;
}

/* Letters spot image — smaller and more transparent, without affecting glow layers. */
.article-overview__card::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 96px;
	right: 0;
	width: 222px;
	z-index: 0;
	border-top-right-radius: inherit;
	overflow: hidden;
	background-image: url("../../../image/home-offer-spot.png");
	background-repeat: repeat-y;
	background-size: 252% auto;
	background-position: 88% 0;
	opacity: 0.26;
	mask-image: radial-gradient(ellipse 108% 90% at 100% 0, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.9) 46%, rgba(0, 0, 0, 0.62) 68%, rgba(0, 0, 0, 0.22) 84%, rgba(0, 0, 0, 0) 100%);
	-webkit-mask-image: radial-gradient(ellipse 108% 90% at 100% 0, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.9) 46%, rgba(0, 0, 0, 0.62) 68%, rgba(0, 0, 0, 0.22) 84%, rgba(0, 0, 0, 0) 100%);
	pointer-events: none;
}

.article-overview__title,
.article-overview__list,
.article-overview__final {
	position: relative;
	z-index: 1;
}

.article-overview__title {
	margin: 0 0 18px;
	color: #bdd3fa;
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
}

.article-overview__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1 1 auto;
	min-height: 0;
}

.article-overview__item {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: 8px;
	align-items: baseline;
	color: #6e838e;
	font-size: 16px;
	line-height: 24px;
}

.article-overview__index {
	color: rgba(189, 211, 250, 0.55);
}

.article-overview__text {
	min-width: 0;
}

.article-overview__link {
	color: inherit;
	text-decoration: none;
	transition: color 0.16s ease, opacity 0.16s ease;
}

.article-overview__link:hover,
.article-overview__link:focus-visible {
	color: #bdd3fa;
	opacity: 1;
	outline: none;
}

.article-overview__final {
	margin: 14px 0 0;
	color: #6e838e;
	font-size: 16px;
	line-height: 24px;
}

/* Legal policy pages — TOC height follows content (no fixed 516px floor). */
body:is(
	.page-template-page-privacy-policy,
	.page-slug-privacy-policy,
	.page-slug-privacy-policy-2,
	.page-template-page-cookie-policy,
	.page-slug-cookie-policy,
	.page-template-page-refund-policy,
	.page-slug-refund-policy,
	.page-template-page-terms-and-conditions,
	.page-template-page-terms-conditions,
	.page-slug-terms-and-conditions,
	.page-slug-terms-conditions
) .article-overview__card {
	min-height: 0;
}

/* Terms & Conditions — TOC card (monospace, spacing, nested outline). */
.page-slug-terms-and-conditions .article-overview__card--terms,
.page-slug-terms-conditions .article-overview__card--terms {
	font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	font-size: 14px;
	line-height: 1.55;
}

.article-overview__list--terms {
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 16px;
}

/* Privacy (and similar) — nested TOC without monospace card styling. */
.article-overview__list--nested-toc {
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 14px;
}

.article-overview__item--nested-toc {
	display: block;
	grid-template-columns: unset;
}

.article-overview__nested-branch {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.article-overview__item--terms {
	align-items: start;
}

.article-overview__index--terms {
	min-width: 1.5em;
	color: rgba(189, 211, 250, 0.65);
}

.article-overview__terms-branch {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.article-overview__sublist {
	margin: 0;
	padding: 0 0 0 1.25em;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.article-overview__subitem {
	margin: 0;
	color: inherit;
	font-size: inherit;
	line-height: inherit;
}

@media (max-width: 768px) {
	.article-overview {
		margin-top: clamp(48px, 12vw, 80px);
	}

	.article-overview__layout {
		display: flex;
		flex-direction: column;
		row-gap: 28px;
	}

	/*
	 * Hide the table-of-contents card on mobile — the article body takes
	 * the full width and the navigation card is removed completely so
	 * readers get to the content without scrolling past a duplicate index.
	 */
	.article-overview__card {
		display: none;
	}
}