/**
 * Premium article layout.
 *
 * Full-bleed hero with the headline over a gradient scrim, a meta row below the
 * hero, and either the numbered key points or the full-width ingress as the
 * opening. The reading column keeps the same 640px measure as the standard
 * article, but ads, the news ticker, the right sidebar and related/continuous
 * reading are removed. Accents follow the site's --primary-color.
 */

/* ------------------------------------------------------- Layout overrides */

/* The premium view has no right sidebar, so the article column must be full
   width. The default .single-view is width:75%; float:left to leave room for
   the sidebar. */
.premium-single-view.single-view {
	float: none;
	width: 100%;
}

/* Full-bleed hero sits flush under the site header (the child theme adds a
   20px margin-bottom to header.site-header). */
header.site-header {
	margin-bottom: 0;
}

/* ---------------------------------------------------------------- Hero */

.aeon-premium-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	width: 100%;
	min-height: 85vh;
	overflow: hidden;
	background: #111;
}

.aeon-premium-hero__media,
.aeon-premium-hero__embed {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.aeon-premium-hero__image,
.aeon-premium-hero__media picture {
	display: block;
	width: 100%;
	height: 100%;
}

/* wp_get_attachment_image() may wrap the <img> in a <picture> (WebP/Imagify),
   so the class can land on the <picture>; style the actual image either way. */
.aeon-premium-hero__media img,
.aeon-premium-hero__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
}

.aeon-premium-hero__embed iframe,
.aeon-premium-hero__embed video {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
}

.aeon-premium-hero__scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to top, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, .4) 45%, rgba(0, 0, 0, 0) 75%),
		linear-gradient(to bottom, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, 0) 22%);
}

.aeon-premium-hero__content {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 24px 56px;
	color: #fff;
}

.aeon-premium-hero__badge {
	display: inline-block;
	margin: 0 0 16px;
	padding: 5px 13px;
	border-radius: 999px;
	background: var(--primary-color, #69043B);
	color: #fff;
	font-family: "Roboto", Arial, sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
	line-height: 1.4;
	text-transform: uppercase;
}

.aeon-premium-hero__title {
	max-width: 900px;
	margin: 0;
	color: #fff;
	font-family: "Sanomat", "Publico Text Web", Georgia, serif;
	font-size: clamp(34px, 5vw, 64px);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -.01em;
	text-shadow: 0 2px 24px rgba(0, 0, 0, .35);
	text-wrap: balance;
}

.aeon-premium-hero__byline {
	max-width: 900px;
	margin-top: 14px;
	color: #fff;
	font-family: "Roboto", Arial, sans-serif;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .02em;
	line-height: 1.4;
	text-shadow: 0 1px 12px rgba(0, 0, 0, .55);
}

.aeon-premium-hero__byline a {
	color: inherit;
	text-decoration: none;
}

.aeon-premium-hero__topic {
	display: inline-flex;
	align-items: center;
	margin-bottom: 16px;
	color: #fff;
	font-family: "Roboto", Arial, sans-serif;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: .04em;
	line-height: 1.2;
	text-transform: uppercase;
	text-decoration: none;
	text-shadow: 0 1px 12px rgba(0, 0, 0, .55);
}

.aeon-premium-hero__topic-arrow {
	margin-bottom: 2px;
	margin-left: 8px;
}

a.aeon-premium-hero__topic:hover {
	text-decoration: underline;
}

/* Hero without media: keep a solid, dramatic band. */
.aeon-premium-hero--none {
	min-height: 45vh;
	background: linear-gradient(135deg, var(--primary-color, #69043B), #111 85%);
}

/* ------------------------------------------------------- Intro card */

.aeon-premium-intro-wrap {
	max-width: 670px;
	margin: 24px auto 0;
}

.aeon-premium-intro {
	padding: 22px 24px 24px;
	border-left: 4px solid var(--primary-color, #69043B);
	border-radius: 0 12px 12px 0;
	background: rgba(0, 0, 0, .03);
	background: color-mix(in srgb, var(--primary-color, #69043B) 7%, transparent);
}

.aeon-premium-meta {
	margin: 0 0 18px;
}

.aeon-premium-meta__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	font-family: "Roboto", Arial, sans-serif;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .04em;
	line-height: 1.4;
	text-transform: uppercase;
}

.aeon-premium-meta__inner > * + *::before {
	margin: 0 10px;
	color: color-mix(in srgb, var(--primary-color, #69043B) 45%, #c9c9c9);
	content: "\00b7";
}

.aeon-premium-meta__category,
.aeon-premium-meta__topic {
	color: var(--primary-color, #69043B);
	font-weight: 700;
	text-decoration: none;
}

.aeon-premium-meta__category:hover,
.aeon-premium-meta__topic:hover {
	text-decoration: underline;
}

.aeon-premium-meta__byline {
	color: #444;
	font-weight: 600;
}

.aeon-premium-meta__date {
	color: #8a8a8a;
}

p.ingress-fullbredd.aeon-premium-ingress {
	margin: 0;
	color: #1b1b1b;
	font-size: clamp(22px, 2.3vw, 30px);
	font-weight: 700;
	line-height: 1.32;
	letter-spacing: -.012em;
}

ul.aeon-premium-points {
	margin: 0;
	padding: 0;
	list-style: none;
}

ul.aeon-premium-points li {
	position: relative;
	margin: 0 0 18px;
	padding-left: 30px;
	font-size: clamp(20px, 1.8vw, 24px);
	font-weight: 600;
	line-height: 1.4;
}

ul.aeon-premium-points li:last-child {
	margin-bottom: 0;
}

ul.aeon-premium-points li::before {
	position: absolute;
	top: calc(.7em - 6px);
	left: 2px;
	width: 12px;
	height: 12px;
	border-radius: 2px;
	background: var(--primary-color, #69043B);
	content: "";
}

/* Premium content area: same measure as the standard article. */
.premium-content-area {
	padding-top: 14px;
}

/* ---------------------------------------------------------------- Dark mode */

.dark-mode .aeon-premium-intro {
	background: color-mix(in srgb, var(--primary-color, #69043B) 18%, transparent);
}

.dark-mode .aeon-premium-meta__inner > * + *::before {
	color: color-mix(in srgb, var(--primary-color, #69043B) 45%, #555);
}

.dark-mode .aeon-premium-meta__byline {
	color: #e8e8e8;
}

.dark-mode p.ingress-fullbredd.aeon-premium-ingress {
	color: #e8e8e8;
}

.dark-mode .aeon-premium-meta__date {
	color: #b9b9b9;
}

.dark-mode ul.aeon-premium-points li {
	color: #e8e8e8;
}

/* ---------------------------------------------------------------- Mobile */

@media (max-width: 767px) {
	.aeon-premium-hero {
		min-height: 0;
		aspect-ratio: 4 / 5;
	}

	.aeon-premium-hero__content {
		padding: 0 18px 34px;
	}

	.aeon-premium-hero__title {
		font-size: clamp(28px, 8.4vw, 42px);
	}

	.aeon-premium-hero--none {
		aspect-ratio: auto;
		min-height: 40vh;
	}

	.aeon-premium-intro {
		padding: 18px 18px 20px;
	}

	.aeon-premium-meta__inner {
		font-size: 12px;
	}

	p.ingress-fullbredd.aeon-premium-ingress {
		font-size: clamp(19px, 5vw, 23px);
	}

	ul.aeon-premium-points li {
		padding-left: 26px;
		font-size: 19px;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.aeon-premium-hero__media img {
		transition: transform 6s ease-out;
	}
}

/* --------------------------------------------- Continuous (premium) reading */

/* A premium article only continues into other premium articles in the same
   topic. Each continuation reuses the premium magazine layout: a hero with the
   topic and headline over the media, the opening and the body, without ads or
   comments. The hero stays inside the content wrapper (it does not bleed to the
   viewport edges), which makes the start of the next article clearer. */
.aeon-premium-continued {
	border-top: 1px solid rgba(0, 0, 0, .12);
}

.dark-mode .aeon-premium-continued {
	border-top-color: rgba(255, 255, 255, .15);
}

/* The "next article" boundary is visually hidden (css/single.css). */