/**
 * Aeon Daily demo: the formats overview and the front-page layout pages.
 */

/* Layout pages: the short explanation and the switch between layouts */
/* The intro hugs whatever sits directly above it (the header, or the breaking bar). */
.demo-site-header ~ .aeon-breaking:has(+ .demo-layout-intro) {
	margin-bottom: 0;
}

.demo-layout-intro {
	margin: 0 0 18px;
	background: var(--demo-ink, #121212);
	color: #fff;
	font-family: var(--demo-ui);
}

.demo-site-header ~ .demo-layout-intro {
	margin-top: -18px;
}

.aeon-breaking + .demo-layout-intro {
	margin-top: 0;
}

.demo-layout-intro__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px 32px;
	padding: 16px 0;
}

.demo-layout-intro__kicker {
	margin: 0 0 4px;
	font: 700 11px/1 var(--demo-ui);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.7);
}

.demo-layout-intro__text {
	margin: 0;
	max-width: 70ch;
	font-size: 14.5px;
	line-height: 1.5;
	color: #fff;
}

.demo-layout-intro__switch {
	display: inline-flex;
	padding: 3px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.12);
}

.demo-layout-intro__switch a {
	padding: 7px 14px;
	border-radius: 999px;
	font: 600 13px/1 var(--demo-ui);
	color: #fff;
	text-decoration: none;
}

.demo-layout-intro__switch a.is-current {
	background: #fff;
	color: #121212;
}

:is(html.aeon-dark-mode-active, body.dark-mode) .demo-layout-intro {
	background: #000;
}

:is(html.aeon-dark-mode-active, body.dark-mode) .demo-layout-intro :is(p, strong, a:not(.is-current)) {
	color: #fff;
}

:is(html.aeon-dark-mode-active, body.dark-mode) .demo-layout-intro__switch a.is-current {
	color: #121212;
}

/* The formats overview */
.demo-formats {
	padding: 40px 40px 56px !important;
	font-family: var(--demo-ui);
}

.demo-formats__head {
	max-width: 820px;
	margin: 0 auto 44px;
	text-align: center;
}

.demo-formats__kicker {
	margin: 0 0 12px;
	font: 700 12px/1 var(--demo-ui);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--demo-accent);
}

.demo-formats__title {
	margin: 0;
	font: 800 clamp(36px, 5vw, 60px)/1.05 var(--demo-display);
	color: var(--demo-ink);
}

.demo-formats__lead {
	margin: 16px auto 0;
	max-width: 60ch;
	font-size: 18px;
	line-height: 1.55;
	color: var(--demo-ink-2);
}

.demo-formats__toc {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 26px;
}

.demo-formats__toc a {
	padding: 7px 14px;
	border: 1px solid var(--demo-rule);
	border-radius: 999px;
	font: 600 13.5px/1 var(--demo-ui);
	color: var(--demo-ink);
	text-decoration: none;
}

.demo-formats__toc a:hover {
	border-color: var(--demo-ink);
}

.demo-formats__group {
	padding-top: 34px;
	margin-top: 34px;
	border-top: 2px solid var(--demo-rule-strong);
	scroll-margin-top: 80px;
}

.demo-formats__group-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px 20px;
	margin-bottom: 22px;
}

.demo-formats__group-head h2 {
	margin: 0;
	font: 700 30px/1.1 var(--demo-display);
	color: var(--demo-ink);
}

.demo-formats__group-head p {
	margin: 0;
	font-size: 15.5px;
	color: var(--demo-muted);
}

.demo-formats__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
	gap: 22px;
}

.demo-format-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--demo-rule);
	border-radius: 6px;
	background: var(--demo-paper);
	color: var(--demo-ink);
	text-decoration: none;
	transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}

.demo-format-card:hover,
.demo-format-card:focus-visible {
	transform: translateY(-3px);
	border-color: var(--demo-ink);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
}

.demo-format-card__media {
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--demo-soft);
}

.demo-format-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s;
}

.demo-format-card:hover .demo-format-card__media img {
	transform: scale(1.03);
}

.demo-format-card__icon {
	display: grid;
	place-items: center;
	height: 100%;
	font-size: 44px;
	color: var(--demo-accent);
}

.demo-format-card__body {
	display: grid;
	gap: 6px;
	padding: 16px 18px 20px;
}

.demo-format-card__label {
	font: 700 11px/1.2 var(--demo-ui);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--demo-accent);
}

.demo-format-card__title {
	font: 700 20px/1.2 var(--demo-display);
}

.demo-format-card__text {
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--demo-ink-2);
}

.demo-formats__outro {
	margin-top: 52px;
	padding: 34px;
	border-radius: 6px;
	background: var(--demo-soft);
	text-align: center;
}

.demo-formats__outro h2 {
	margin: 0 0 8px;
	font: 700 26px/1.2 var(--demo-display);
	color: var(--demo-ink);
}

.demo-formats__outro p {
	margin: 0 0 18px;
	color: var(--demo-ink-2);
}

:is(html.aeon-dark-mode-active, body.dark-mode) .demo-formats :is(h1, h2, p, span, a) {
	color: inherit;
}

:is(html.aeon-dark-mode-active, body.dark-mode) .demo-formats {
	color: var(--demo-ink);
}

:is(html.aeon-dark-mode-active, body.dark-mode) .demo-format-card__label,
:is(html.aeon-dark-mode-active, body.dark-mode) .demo-formats__kicker,
:is(html.aeon-dark-mode-active, body.dark-mode) .demo-format-card__icon {
	color: var(--demo-accent) !important;
}

:is(html.aeon-dark-mode-active, body.dark-mode) .demo-formats .btn-subscribe {
	color: var(--demo-accent-ink) !important;
}

@media (max-width: 767px) {
	.demo-formats {
		padding: 28px 15px 40px !important;
	}

	.demo-formats__lead {
		font-size: 16px;
	}

	.demo-formats__group-head h2 {
		font-size: 25px;
	}

	.demo-layout-intro {
		margin-top: 0;
	}
}

/* Ad formats: the overview and one demo article per format */
.demo-ads .demo-layout-intro__switch {
	flex-wrap: wrap;
	border-radius: 18px;
}

.demo-ads__article .page-main-content-block {
	max-width: 760px;
	margin: 0 auto;
}

.demo-ads__section {
	margin: 8px 0 10px;
	font: 700 12px/1 var(--demo-ui);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--demo-accent);
}

.demo-ads__article .page-title {
	margin-bottom: 18px;
	font: 800 clamp(32px, 4.4vw, 50px)/1.06 var(--demo-display);
	letter-spacing: -0.01em;
}

.demo-ads__prose .demo-ads__standfirst {
	margin-bottom: 28px;
	font: 400 21px/1.5 var(--demo-ui);
	color: var(--demo-ink-2);
}

.demo-ads__prose h3 {
	margin: 34px 0 10px;
	font: 700 22px/1.25 var(--demo-display);
}

/* The 300×600 sits in the margin beside the text on wide screens, inline on smaller ones. */
.demo-ads__aside {
	width: 300px;
	margin: 6px auto 28px;
}

@media (min-width: 1200px) {
	.demo-ads__aside {
		float: right;
		margin: 6px -340px 24px 40px;
	}
}

.demo-ads__disclaimer {
	clear: both;
	margin: 44px 0 0;
	padding: 16px 18px;
	border-left: 3px solid var(--demo-rule);
	background: color-mix(in srgb, var(--demo-ink) 4%, transparent);
	font: 400 14px/1.5 var(--demo-ui);
	color: var(--demo-ink-2);
}

/* Shift the article left so the margin ad has room beside it. */
@media (min-width: 1200px) {
	.demo-ads--display .demo-ads__article .page-main-content-block {
		transform: translateX(-170px);
	}
}

/* Skin: the site keeps its full 1310 px where the screen has room and narrows only as far as the panels
 * need (170 px each, never below 980 px), and only while a skin is actually on the page. The plugin shows
 * skins from 1280 px. */
.demo-ads--skin {
	--aeon-skin-content: clamp(980px, calc(100vw - 340px), 1310px);
}

@media (min-width: 1280px) {
	/* The parent caps .container at 1310 px with !important; the header and footer follow --demo-shell. */
	.aeon-ad-skin-on .demo-ads--skin {
		--demo-shell: var(--aeon-skin-content);
	}

	.aeon-ad-skin-on .demo-ads--skin :is(.header-shell, .container) {
		box-sizing: border-box;
		max-width: var(--aeon-skin-content) !important;
		padding-inline: 24px;
	}

	.aeon-ad-skin-on .demo-ads--skin .aeon-breaking__inner {
		width: min(calc(var(--aeon-skin-content) - 48px), calc(100% - 30px));
	}

	.demo-ads--skin .aeon-ad-slot--skin .aeon-ad-skin__top {
		margin-bottom: 18px;
	}

	/* The panels frame the whole page, the header included. */
	.demo-ads--skin .aeon-ad-slot--skin .aeon-ad-skin__side {
		z-index: 1000;
	}
}

/* Overview cards */
.demo-ads__cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr));
	gap: 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.demo-ads__card a {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border: 1px solid var(--demo-rule);
	border-radius: 14px;
	color: var(--demo-ink);
	text-decoration: none;
	transition: border-color 0.2s ease, transform 0.2s ease;
}

.demo-ads__card a:hover {
	border-color: var(--demo-ink);
	transform: translateY(-2px);
}

.demo-ads__thumb {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: #0f1012;
}

.demo-ads__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.demo-ads__card--display .demo-ads__thumb img,
.demo-ads__card--reel .demo-ads__thumb img,
.demo-ads__card--skin .demo-ads__thumb img {
	object-position: center 30%;
}

.demo-ads__card-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 8px;
	padding: 18px 20px 20px;
}

.demo-ads__card-kicker {
	font: 700 11.5px/1 var(--demo-ui);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--demo-accent);
}

.demo-ads__card-title {
	font: 800 26px/1.1 var(--demo-display);
}

.demo-ads__card-text {
	flex: 1;
	font: 400 15px/1.5 var(--demo-ui);
	color: var(--demo-ink-2);
}

.demo-ads__card-more {
	margin-top: 6px;
	font: 700 14px/1 var(--demo-ui);
}

.demo-ads__card-more::after {
	content: " →";
}

.demo-ads__how {
	margin-top: 56px;
	padding-top: 34px;
	border-top: 1px solid var(--demo-rule);
}

.demo-ads__how-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: 28px 40px;
	margin-top: 18px;
}

.demo-ads__how h3 {
	margin: 0 0 8px;
	font: 700 20px/1.25 var(--demo-display);
	color: var(--demo-ink);
}

.demo-ads__how p {
	margin: 0;
	font: 400 15.5px/1.55 var(--demo-ui);
	color: var(--demo-ink-2);
}

@media (max-width: 767px) {
	.demo-ads__index {
		padding: 28px 18px 40px !important;
	}

	.demo-ads__prose .demo-ads__standfirst {
		font-size: 19px;
	}
}