/* Editorial single post layout. */

body.ag-post-template {
	background:
		radial-gradient(circle at 50% -20%, rgba(216, 191, 90, 0.08), transparent 32rem),
		linear-gradient(180deg, #101820 0%, var(--ag-bg-deep) 42%, var(--ag-bg) 100%);
}

.ag-post-main {
	min-height: 70vh;
	padding-top: 72px;
}

.ag-article-header {
	padding-block: 28px 18px;
	border-bottom: 1px solid var(--ag-border);
	background:
		linear-gradient(180deg, rgba(16, 24, 32, 0.72), rgba(13, 19, 24, 0.18)),
		var(--ag-bg);
}

.ag-article.has-post-thumbnail .ag-article-header {
	padding-block-start: 0;
}

.ag-article:not(.has-post-thumbnail) .ag-article-header {
	padding-block-start: 26px;
}

.ag-article-header-inner {
	max-width: 820px;
}

.ag-article.has-post-thumbnail .ag-article-header-inner {
	padding-top: 28px;
}

.ag-post-meta,
.ag-post-tags > span,
.ag-post-nav-link span {
	color: var(--ag-gold);
	font-size: 0.76rem;
	font-weight: 850;
	letter-spacing: 0.16em;
	line-height: 1.35;
	text-transform: uppercase;
}

.ag-post-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 16px;
	color: var(--ag-muted);
}

.ag-post-meta a {
	color: var(--ag-gold);
}

.ag-article-header h1 {
	max-width: 100%;
	margin: 0;
	color: var(--ag-text);
	font-size: clamp(2rem, 5.2vw, 3.55rem);
	font-weight: 850;
	letter-spacing: 0;
	line-height: 1.04;
}

.ag-post-featured-image {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	margin: 0;
	min-height: 240px;
	height: clamp(250px, 35vw, 430px);
	background-color: #17212a;
	background-position: center;
	background-size: cover;
	isolation: isolate;
}

.ag-post-featured-image::before {
	position: absolute;
	inset: -56px;
	z-index: -2;
	background: inherit;
	content: "";
	filter: blur(42px) saturate(1.05) brightness(0.86);
	transform: scale(1.18);
}

.ag-post-featured-image::after {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(90deg, rgba(11, 17, 22, 0.24), transparent 18%, transparent 82%, rgba(11, 17, 22, 0.24)),
		linear-gradient(180deg, rgba(23, 33, 42, 0.16), rgba(11, 17, 22, 0.12));
	content: "";
}

.ag-post-featured-image img {
	width: auto;
	max-width: min(100%, 1200px);
	height: 100%;
	object-fit: cover;
	object-position: center;
	filter: saturate(1.02) contrast(1.02) brightness(0.98);
}

.ag-post-featured-image figcaption {
	width: var(--ag-shell);
	margin-inline: auto;
	padding: 10px 0 0;
	color: var(--ag-muted);
	font-size: 0.82rem;
	line-height: 1.45;
}

.ag-article-shell {
	max-width: 820px;
	padding-block: 22px 72px;
}

.ag-post-content {
	color: rgba(245, 244, 239, 0.92);
	font-size: clamp(1.03rem, 3.2vw, 1.17rem);
	line-height: 1.86;
}

.ag-post-content > * {
	margin-top: 0;
	margin-bottom: 1.45em;
}

.ag-post-content > :last-child {
	margin-bottom: 0;
}

.ag-post-content h2,
.ag-post-content h3,
.ag-post-content h4 {
	color: var(--ag-text);
	font-weight: 830;
	letter-spacing: 0;
	line-height: 1.15;
}

.ag-post-content h2 {
	margin-top: 2.4em;
	font-size: clamp(1.7rem, 6vw, 2.45rem);
}

.ag-post-content h3 {
	margin-top: 2em;
	font-size: clamp(1.32rem, 5vw, 1.75rem);
}

.ag-post-content a {
	color: var(--ag-gold);
	text-decoration: underline;
	text-decoration-color: rgba(216, 191, 90, 0.72);
	text-underline-offset: 0.2em;
}

.ag-post-content a:hover {
	color: var(--ag-gold-soft);
	text-decoration-color: currentColor;
}

.ag-post-content blockquote {
	margin-inline: 0;
	padding: 8px 0 8px 22px;
	border-left: 2px solid var(--ag-gold);
	color: var(--ag-text);
	font-size: clamp(1.18rem, 4vw, 1.5rem);
	font-weight: 650;
	line-height: 1.55;
}

.ag-post-content ul,
.ag-post-content ol {
	padding-left: 1.2em;
}

.ag-post-content li + li {
	margin-top: 0.45em;
}

.ag-post-content img,
.ag-post-content .wp-block-image img {
	border-radius: var(--ag-radius);
}

.ag-post-content iframe,
.ag-post-content .ag-video-embed iframe {
	display: block;
	width: 100%;
	max-width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border-radius: var(--ag-radius);
}

.ag-post-content .ag-video-embed {
	margin-block: 2rem;
	overflow: hidden;
	border-radius: var(--ag-radius);
	background: rgba(255, 255, 255, 0.05);
}

.ag-post-content .wp-block-image,
.ag-post-content figure {
	margin-block: 2rem;
}

.ag-post-content .wp-block-image.responsive-right-image {
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0;
	height: auto;
	float: none;
	margin: 1.5rem 0;
}

.ag-post-content .wp-block-image.responsive-left-image {
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0;
	height: auto;
	float: none;
	margin: 1.5rem 0;
}

.ag-post-content .wp-block-image.responsive-right-image img {
	display: block;
	width: 100% !important;
	height: auto !important;
}

.ag-post-content .wp-block-image.responsive-left-image img {
	display: block;
	width: 100% !important;
	height: auto !important;
}

.ag-post-content figcaption {
	margin-top: 0.7rem;
	color: var(--ag-muted);
	font-size: 0.86rem;
	line-height: 1.45;
	text-align: left;
}

.ag-post-content .wp-block-separator {
	width: 100%;
	margin-block: 2.4rem;
	border: 0;
	border-top: 1px solid var(--ag-border);
}

.ag-post-tags {
	display: grid;
	gap: 12px;
	margin-top: 52px;
	padding-top: 28px;
	border-top: 1px solid var(--ag-border);
}

.ag-post-tags ul {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ag-post-tags a {
	display: inline-flex;
	padding: 7px 10px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--ag-border);
	border-radius: 999px;
	color: var(--ag-muted);
	font-size: 0.83rem;
	line-height: 1.2;
}

.ag-post-tags a:hover {
	border-color: rgba(216, 191, 90, 0.55);
	color: var(--ag-text);
}

.ag-post-nav {
	display: grid;
	gap: 14px;
	margin-top: 44px;
	padding-top: 28px;
	border-top: 1px solid var(--ag-border);
}

.ag-post-nav-link {
	display: grid;
	gap: 8px;
	padding: 18px;
	background: linear-gradient(180deg, rgba(29, 41, 50, 0.72), rgba(18, 28, 36, 0.76));
	border: 1px solid var(--ag-border);
	border-radius: var(--ag-radius);
	transition: border-color 220ms ease, transform 220ms ease, background 220ms ease;
}

.ag-post-nav-link:hover {
	background: linear-gradient(180deg, rgba(34, 48, 58, 0.82), rgba(18, 28, 36, 0.86));
	border-color: rgba(216, 191, 90, 0.45);
	transform: translateY(-2px);
}

.ag-post-nav-link strong {
	color: var(--ag-text);
	font-size: 1rem;
	line-height: 1.35;
}

.ag-post-nav-next {
	text-align: left;
}

@media (min-width: 768px) {
	.ag-post-main {
		padding-top: 78px;
	}

	.ag-post-content .wp-block-image.responsive-right-image {
		width: clamp(280px, 40%, 420px) !important;
		max-width: 42% !important;
		float: right;
		margin: 0.35rem 0 1.4rem 2rem;
	}

	.ag-post-content .wp-block-image.responsive-left-image {
		width: clamp(280px, 40%, 420px) !important;
		max-width: 42% !important;
		float: left;
		margin: 0.35rem 2rem 1.4rem 0;
	}

	.ag-article-header {
		padding-block: 36px 24px;
	}

	.ag-article.has-post-thumbnail .ag-article-header {
		padding-block-start: 0;
	}

	.ag-article.has-post-thumbnail .ag-article-header-inner {
		padding-top: 36px;
	}

	.ag-article:not(.has-post-thumbnail) .ag-article-header {
		padding-block-start: 40px;
	}

	.ag-post-nav {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ag-post-nav-next {
		text-align: right;
	}
}

@media (min-width: 1024px) {
	.ag-article-header {
		padding-block: 44px 24px;
	}

	.ag-article.has-post-thumbnail .ag-article-header {
		padding-block-start: 0;
	}

	.ag-article.has-post-thumbnail .ag-article-header-inner {
		padding-top: 40px;
	}

	.ag-article:not(.has-post-thumbnail) .ag-article-header {
		padding-block-start: 46px;
	}

	.ag-article-shell {
		padding-block: 18px 92px;
	}
}
