/* ==========================================================================
   Succes News — single.css
   Single article chrome: header (kicker, title, subtitle), byline, featured
   image variants (below / above / wide / cover), caption, sponsored label,
   editorial standards link, article footer (tags, sources, updated note,
   disclosure), author box / author card, prev–next navigation, after-article
   slot spacing and the narrow measure for no-sidebar / full-width layouts.
   Loaded on single posts and attachments; tokens come from main.css + #sn-vars.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Article shell
   -------------------------------------------------------------------------- */
.sn-article { padding-block: var(--sn-space-6) var(--sn-space-16); }
@media (min-width: 1024px) {
	.sn-article { padding-block: var(--sn-space-8) var(--sn-space-16); }
}
.sn-article--cover { padding-top: 0; }

/* No-sidebar / full-width: header, media and footer follow the prose measure
   (content.css narrows .sn-prose the same way); the "wide" featured variant
   intentionally keeps the full column width. */
@media (min-width: 1024px) {
	.sn-article--narrow .sn-article__header:not(.sn-article__header--cover),
	.sn-article--full .sn-article__header:not(.sn-article__header--cover),
	.sn-article--narrow .sn-article__featured--below,
	.sn-article--full .sn-article__featured--below,
	.sn-article--narrow .sn-article__featured--above,
	.sn-article--full .sn-article__featured--above,
	.sn-article--narrow .sn-article__footer,
	.sn-article--full .sn-article__footer,
	.sn-article--narrow .sn-after-article,
	.sn-article--full .sn-after-article,
	.sn-article--narrow .sn-post-nav,
	.sn-article--full .sn-post-nav,
	.sn-article--narrow .sn-comments,
	.sn-article--full .sn-comments {
		max-width: var(--sn-content-width);
		margin-inline: auto;
	}
	.sn-article--narrow .sn-article__featured--wide,
	.sn-article--full .sn-article__featured--wide { max-width: none; }
}

/* --------------------------------------------------------------------------
   2. Header: kicker, title, subtitle
   -------------------------------------------------------------------------- */
.sn-article__header { margin: 0 0 var(--sn-space-6); }
.sn-article__breadcrumbs { margin-bottom: var(--sn-space-4); }

.sn-article__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sn-space-3); margin: 0 0 var(--sn-space-4); }
.sn-article__sponsored {
	display: inline-block;
	padding: .3em .65em;
	border: 1px solid var(--sn-border-strong);
	border-radius: var(--sn-radius-sm);
	font-family: var(--sn-font-ui);
	font-size: var(--sn-fs-xs);
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--sn-text-muted);
	line-height: 1.2;
}

.sn-article__title {
	margin: 0 0 .35em;
	font-size: calc(clamp(1.9rem, 1.35rem + 2.6vw, 3rem) * var(--sn-headline-scale));
	line-height: var(--sn-lh-tight);
	letter-spacing: var(--sn-heading-ls);
	text-wrap: balance;
}

.sn-article__subtitle {
	margin: 0 0 var(--sn-space-4);
	font-size: clamp(1.05rem, 1rem + .45vw, 1.3rem);
	line-height: 1.55;
	color: var(--sn-text-muted);
	max-width: 70ch;
	text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   3. Byline
   -------------------------------------------------------------------------- */
.sn-article__byline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sn-space-3) var(--sn-space-6);
	margin-top: var(--sn-space-5);
	padding-block: var(--sn-space-4);
	border-top: 1px solid var(--sn-border);
	border-bottom: 1px solid var(--sn-border);
	font-family: var(--sn-font-ui);
}
.sn-article__author { display: flex; align-items: center; gap: var(--sn-space-3); min-width: 0; }
.sn-article__author .sn-avatar { width: 40px; height: 40px; flex: 0 0 auto; }
.sn-article__author-text { display: flex; flex-direction: column; gap: .1em; min-width: 0; font-size: var(--sn-fs-sm); line-height: 1.4; }
.sn-article__author-name { font-weight: 600; color: var(--sn-text); }
.sn-article__author-name .sn-author__name { color: var(--sn-heading); font-weight: 700; }
.sn-article__author-name a.sn-author__name:hover { color: var(--sn-primary); }
.sn-article__author-title { color: var(--sn-text-muted); font-size: var(--sn-fs-xs); }
.sn-article__reviewed { display: inline-flex; align-items: center; gap: .35em; color: var(--sn-text-muted); font-size: var(--sn-fs-xs); }
.sn-article__reviewed .sn-icon { color: var(--sn-primary); }
.sn-article__reviewed a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.sn-article__reviewed a:hover { color: var(--sn-primary); }

.sn-article__meta { row-gap: .5em; }
@media (min-width: 768px) {
	.sn-article__byline .sn-article__meta { margin-left: auto; justify-content: flex-end; }
}
.sn-article__standards { font-weight: 600; }
.sn-article__standards:hover { color: var(--sn-primary); }
.sn-article__standards .sn-icon { color: var(--sn-primary); }

/* --------------------------------------------------------------------------
   4. Featured image variants + caption
   -------------------------------------------------------------------------- */
.sn-article__featured { margin: 0 0 var(--sn-space-6); }
.sn-article__featured .sn-article__img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--sn-radius-lg);
	background: var(--sn-surface-2);
}
.sn-article__caption {
	margin: .65em 0 0;
	font-family: var(--sn-font-ui);
	font-size: var(--sn-fs-sm);
	line-height: 1.5;
	color: var(--sn-text-muted);
}
.sn-article__caption a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.sn-article__caption a:hover { color: var(--sn-primary); }
.sn-credit { white-space: nowrap; }

/* "above" sits between byline and content — slightly tighter top */
.sn-article__featured--above,
.sn-article__featured--wide { margin-bottom: var(--sn-space-8); }

/* --------------------------------------------------------------------------
   5. Cover variant (full-bleed hero, header over the image)
   -------------------------------------------------------------------------- */
.sn-article__cover {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: min(72vh, 680px);
	margin: 0 0 var(--sn-space-8);
	background: #0f172a;
	overflow: hidden;
}
@media (min-width: 1024px) {
	.sn-article__cover { min-height: min(66vh, 720px); }
}
.sn-article__cover .sn-article__featured--cover { position: absolute; inset: 0; margin: 0; }
.sn-article__cover .sn-article__featured--cover .sn-article__img {
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	object-fit: cover;
	border-radius: 0;
}
.sn-article__cover-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(2, 6, 23, .84) 0%, rgba(2, 6, 23, .45) 45%, rgba(2, 6, 23, .18) 100%);
	pointer-events: none;
}
.sn-article__featured--cover .sn-article__caption {
	position: absolute;
	right: var(--sn-space-4);
	bottom: var(--sn-space-3);
	z-index: 1;
	margin: 0;
	max-width: 46ch;
	text-align: right;
	color: rgba(255, 255, 255, .72);
	font-size: var(--sn-fs-xs);
	text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
}
.sn-article__featured--cover .sn-article__caption a { color: inherit; }

.sn-article__cover-inner { position: relative; z-index: 1; width: 100%; padding-block: var(--sn-space-12) var(--sn-space-10); }

/* White header text over the image */
.sn-article__header--cover { margin-bottom: 0; max-width: 60rem; }
.sn-article__header--cover .sn-article__title,
.sn-article__header--cover .sn-article__author-name,
.sn-article__header--cover .sn-article__author-name .sn-author__name { color: #fff; }
.sn-article__header--cover .sn-article__subtitle,
.sn-article__header--cover .sn-article__author-title,
.sn-article__header--cover .sn-article__reviewed,
.sn-article__header--cover .sn-article__meta { color: rgba(255, 255, 255, .82); }
.sn-article__header--cover .sn-article__title { text-shadow: 0 2px 18px rgba(0, 0, 0, .35); }
.sn-article__header--cover .sn-meta a,
.sn-article__header--cover .sn-article__reviewed a,
.sn-article__header--cover .sn-article__standards { color: rgba(255, 255, 255, .82); }
.sn-article__header--cover .sn-meta a:hover,
.sn-article__header--cover a.sn-author__name:hover,
.sn-article__header--cover .sn-article__standards:hover { color: #fff; }
.sn-article__header--cover .sn-article__reviewed .sn-icon,
.sn-article__header--cover .sn-article__standards .sn-icon { color: #fff; }
.sn-article__header--cover .sn-article__byline { border-color: rgba(255, 255, 255, .25); }
.sn-article__header--cover .sn-article__sponsored { border-color: rgba(255, 255, 255, .45); color: rgba(255, 255, 255, .85); }
.sn-article__header--cover .sn-breadcrumbs,
.sn-article__header--cover .sn-breadcrumbs a,
.sn-article__header--cover .sn-breadcrumbs__current { color: rgba(255, 255, 255, .78); }
.sn-article__header--cover .sn-breadcrumbs a:hover { color: #fff; }
.sn-article__header--cover .sn-avatar { box-shadow: 0 0 0 2px rgba(255, 255, 255, .35); }

/* --------------------------------------------------------------------------
   6. Article footer: tags, updated note, sources, disclosure
   -------------------------------------------------------------------------- */
.sn-article__footer { display: flex; flex-direction: column; gap: var(--sn-space-6); margin-top: var(--sn-space-10); }
.sn-article__footer:empty { display: none; }

.sn-article__tags { align-items: center; }
.sn-tags__label {
	display: inline-flex;
	align-items: center;
	gap: .35em;
	margin-right: .25rem;
	font-family: var(--sn-font-ui);
	font-size: var(--sn-fs-sm);
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: var(--sn-label-tt);
	color: var(--sn-text-muted);
}

.sn-article__updated {
	display: flex;
	align-items: center;
	gap: .45em;
	margin: 0;
	font-family: var(--sn-font-ui);
	font-size: var(--sn-fs-sm);
	color: var(--sn-text-muted);
}
.sn-article__updated .sn-icon { color: var(--sn-primary); }

.sn-article__disclosure {
	margin: var(--sn-space-6) 0 0;
	padding-top: var(--sn-space-4);
	border-top: 1px dashed var(--sn-border-strong);
	font-family: var(--sn-font-ui);
	font-size: var(--sn-fs-sm);
	color: var(--sn-text-muted);
}

/* Sources */
.sn-sources {
	padding: var(--sn-space-5) var(--sn-space-6);
	border: 1px solid var(--sn-border);
	border-left: 4px solid var(--sn-primary);
	border-radius: var(--sn-radius-lg);
	background: var(--sn-surface);
}
.sn-sources__title {
	display: flex;
	align-items: center;
	gap: .5em;
	margin: 0 0 .7em;
	font-family: var(--sn-font-ui);
	font-size: var(--sn-fs-sm);
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--sn-primary);
}
.sn-sources__list { margin: 0; padding-left: 1.35em; font-size: var(--sn-fs-md); }
.sn-sources__item { margin: 0 0 .45em; }
.sn-sources__item:last-child { margin-bottom: 0; }
.sn-sources__item::marker { color: var(--sn-text-muted); font-size: var(--sn-fs-sm); }
.sn-sources__cite { font-style: normal; }
.sn-sources__cite a { font-weight: 500; overflow-wrap: anywhere; }
.sn-sources__host { margin-left: .5em; font-family: var(--sn-font-ui); font-size: var(--sn-fs-sm); color: var(--sn-text-muted); }

/* --------------------------------------------------------------------------
   7. Author box / author card
   -------------------------------------------------------------------------- */
.sn-author-box { margin: 0; }

.sn-author-card {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--sn-space-5);
	align-items: start;
	padding: var(--sn-space-6);
	border: 1px solid var(--sn-border);
	border-radius: var(--sn-radius-lg);
	background: var(--sn-surface-2);
}
@media (max-width: 479px) {
	.sn-author-card { grid-template-columns: minmax(0, 1fr); }
	.sn-author-card__media { justify-self: start; }
}
.sn-author-card__media { line-height: 0; }
.sn-author-card__avatar { width: 96px; height: 96px; }
.sn-author-card__body { display: flex; flex-direction: column; gap: var(--sn-space-2); min-width: 0; }
.sn-author-card__label {
	font-family: var(--sn-font-ui);
	font-size: var(--sn-fs-xs);
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--sn-primary);
}
.sn-author-card__name { margin: 0; font-size: var(--sn-fs-xl); line-height: var(--sn-lh-snug); }
.sn-author-card__name a { color: var(--sn-heading); }
.sn-author-card__name a:hover { color: var(--sn-primary); }
.sn-author-card__role { font-family: var(--sn-font-ui); font-size: var(--sn-fs-sm); color: var(--sn-text-muted); }
.sn-author-card__expertise { gap: .4rem; margin-top: .15rem; }
.sn-author-card__chip {
	padding: .28em .7em;
	font-size: var(--sn-fs-xs);
	font-weight: 600;
	background: var(--sn-surface);
	border: 1px solid var(--sn-border);
	color: var(--sn-text-muted);
}
.sn-author-card__chip:hover { background: var(--sn-surface); color: var(--sn-text-muted); }
.sn-author-card__bio { font-size: var(--sn-fs-md); color: var(--sn-text); }
.sn-author-card__bio p { margin: 0 0 .6em; }
.sn-author-card__bio p:last-child { margin-bottom: 0; }
.sn-author-card__footer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sn-space-3) var(--sn-space-4); margin-top: var(--sn-space-2); }
.sn-author-card__social .sn-social__link {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--sn-surface);
	border: 1px solid var(--sn-border);
	color: var(--sn-text-muted);
	transition: color var(--sn-dur), border-color var(--sn-dur), background var(--sn-dur);
}
.sn-author-card__social .sn-social__link:hover { color: var(--sn-on-primary); background: var(--sn-primary); border-color: var(--sn-primary); }
.sn-author-card__more {
	display: inline-flex;
	align-items: center;
	gap: .3em;
	margin-left: auto;
	font-family: var(--sn-font-ui);
	font-size: var(--sn-fs-sm);
	font-weight: 600;
}
.sn-author-card__count { font-family: var(--sn-font-ui); font-size: var(--sn-fs-sm); color: var(--sn-text-muted); }

/* Compact variant (widgets, small lists) */
.sn-author-card--compact { display: flex; align-items: center; gap: var(--sn-space-3); padding: 0; border: 0; background: none; border-radius: 0; }
.sn-author-card--compact .sn-author-card__avatar { width: 48px; height: 48px; }
.sn-author-card--compact .sn-author-card__body { gap: .1em; }
.sn-author-card--compact .sn-author-card__name { font-size: var(--sn-fs-md); }

/* --------------------------------------------------------------------------
   8. Prev / next navigation
   -------------------------------------------------------------------------- */
.sn-post-nav {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sn-space-5);
	margin-top: var(--sn-space-10);
	padding-top: var(--sn-space-6);
	border-top: 1px solid var(--sn-border);
}
@media (max-width: 639px) {
	.sn-post-nav { grid-template-columns: minmax(0, 1fr); }
	.sn-post-nav__link--empty { display: none; }
}
.sn-post-nav__link {
	display: flex;
	align-items: center;
	gap: var(--sn-space-4);
	min-width: 0;
	padding: var(--sn-space-4);
	border: 1px solid var(--sn-border);
	border-radius: var(--sn-radius-lg);
	background: var(--sn-surface);
	color: inherit;
	transition: border-color var(--sn-dur), box-shadow var(--sn-dur);
}
.sn-post-nav__link:hover { border-color: color-mix(in srgb, var(--sn-primary) 45%, var(--sn-border)); box-shadow: var(--sn-shadow-sm); color: inherit; }
.sn-post-nav__link--next { flex-direction: row-reverse; text-align: right; }
.sn-post-nav__link--empty { border: 0; background: none; padding: 0; pointer-events: none; }
.sn-post-nav__thumb { flex: 0 0 auto; width: 64px; height: 64px; border-radius: var(--sn-radius); overflow: hidden; }
.sn-post-nav__thumb img { width: 100%; height: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.sn-post-nav__body { display: flex; flex-direction: column; gap: .3em; min-width: 0; }
.sn-post-nav__link--next .sn-post-nav__body { align-items: flex-end; }
.sn-post-nav__label {
	display: inline-flex;
	align-items: center;
	gap: .35em;
	font-family: var(--sn-font-ui);
	font-size: var(--sn-fs-xs);
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--sn-text-muted);
}
.sn-post-nav__title {
	font-family: var(--sn-font-heading);
	font-size: var(--sn-fs-md);
	font-weight: 700;
	line-height: 1.35;
	color: var(--sn-heading);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	transition: color var(--sn-dur);
}
.sn-post-nav__link:hover .sn-post-nav__title { color: var(--sn-primary); }

/* --------------------------------------------------------------------------
   9. After-article slot (related, widgets, newsletter — rendered by modules)
   -------------------------------------------------------------------------- */
.sn-after-article { margin-top: var(--sn-space-10); }
.sn-after-article > * + * { margin-top: var(--sn-space-10); }
.sn-after-article:empty { display: none; margin: 0; }
.sn-after-article:not(:has(*)) { display: none; margin: 0; }
.sn-after-post-widgets > .sn-widget:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   10. Dark mode nuances
   -------------------------------------------------------------------------- */
:root[data-theme="dark"] .sn-article__cover { background: #020617; }
:root[data-theme="dark"] .sn-post-nav__link,
:root[data-theme="dark"] .sn-sources { background: var(--sn-surface-2); }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .sn-article__cover { background: #020617; }
	:root:not([data-theme="light"]) .sn-post-nav__link,
	:root:not([data-theme="light"]) .sn-sources { background: var(--sn-surface-2); }
}

/* --------------------------------------------------------------------------
   11. Print
   -------------------------------------------------------------------------- */
@media print {
	.sn-article { padding-block: 0; }
	.sn-article__cover { min-height: 0; background: none; }
	.sn-article__cover-overlay { display: none; }
	.sn-article__header--cover .sn-article__title,
	.sn-article__header--cover .sn-article__subtitle,
	.sn-article__header--cover .sn-article__meta { color: #000; text-shadow: none; }
	.sn-post-nav, .sn-after-article, .sn-article__standards { display: none !important; }
	.sn-author-card, .sn-sources { border: 1px solid #999; background: none; }
	.sn-article__byline { border-color: #999; }
}