/**
 * Single post ("Článek") — block 12.
 *
 * 1:1 with the prototype's article screen. Three stacked columns (header 740 /
 * featured image 900 / prose 680), each centred, with the prototype's exact
 * typographic metric. The featured image reuses the shared `.at-imgzoom` zoom
 * (tokens.css). The prose rules are scoped to `.at-article__body` and load after
 * refur's `.entry-content` (atvesmir-single depends on atvesmir-tokens, which
 * depends on refur-style) so they win on load order without an aggressive reset.
 */

.at-article {
	display: block;
}

/* ---------------------------------------------------------------- *
 * 1. Header column — back-link + kicker + title + meta
 * ---------------------------------------------------------------- */
/* Scoped under .at-article to outrank refur's `.single .hentry { padding:0 }`
 * (0,2,0) — atvesmir-single loads after refur-style, so the tie resolves here. */
.at-article .at-article__head {
	max-width: 880px;
	margin: 0 auto;
	padding: clamp(30px, 5vw, 56px) clamp(18px, 5vw, 40px) 0;
}

.at-article__back {
	font-family: var(--font-mono);
	font-size: 12px;
	line-height: 1.65;
	font-weight: 400;
	letter-spacing: .06em;
	color: var(--ink3);
	text-decoration: none;
}
.at-article__back:visited,
.at-article__back:focus,
.at-article__back:active,
.at-article__back:hover {
	color: var(--ink3);
}

.at-article__kicker {
	font-family: var(--font-mono);
	font-size: 12px;
	line-height: 1.65;
	font-weight: 400;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--accent);
	margin: 26px 0 16px;
	padding: 0;
}

.at-article__title {
	font-family: var(--font-serif);
	font-size: clamp(2rem, 4.4vw, 3.1rem);
	line-height: 1.1;
	font-weight: 400;
	letter-spacing: -.02em;
	color: var(--ink);
	margin: 0;
	padding: 0;
}

.at-article__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	align-items: center;
	margin: 24px 0 0;
	padding: 16px 0;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	font-family: var(--font-mono);
	font-size: 12.5px;
	line-height: 1.65;
	color: var(--ink2);
}
.at-article__meta span {
	margin: 0;
	padding: 0;
}
.at-article__sep {
	color: var(--ink3);
}

/* ---------------------------------------------------------------- *
 * 2. Featured image — 900 wide, 16:9 rounded, zoom on hover
 * ---------------------------------------------------------------- */
.at-article__figure {
	max-width: 900px;
	margin: 30px auto 0;
	padding: 0 clamp(18px, 5vw, 40px);
}
.at-article__media {
	display: block;
	aspect-ratio: 16 / 9;
	border-radius: 16px;
	overflow: hidden;
	background: var(--bg3);
}
.at-article__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---------------------------------------------------------------- *
 * 3. Prose body — 680 wide, 1.16rem / 1.75
 * ---------------------------------------------------------------- */
/* Scoped to outrank refur's `.entry-content { padding:0 0 15px }` (0,1,0). */
.at-article .at-article__body {
	max-width: 880px;
	margin: 0 auto;
	padding: clamp(28px, 4vw, 46px) clamp(18px, 5vw, 40px) 0;
	font-family: var(--font-serif);
	font-size: 1.16rem;
	line-height: 1.75;
	color: var(--ink);
}
.at-article__body > *:first-child {
	margin-top: 0;
}
.at-article__body p {
	margin: 0 0 24px;
}
.at-article__body strong,
.at-article__body b {
	font-weight: 500;
}
.at-article__body em,
.at-article__body i {
	font-style: italic;
}
.at-article__body a {
	color: var(--accent);
	border-bottom: 1px solid currentColor;
	text-decoration: none;
}
.at-article__body a:visited,
.at-article__body a:focus,
.at-article__body a:active,
.at-article__body a:hover {
	color: var(--accent);
}
/* Image links (galleries, lightbox triggers) carry no text underline. */
.at-article__body a:has(> img),
.at-article__body a:has(> picture),
.at-article__body a:has(> figure) {
	border-bottom: 0;
}

/* ---- Defensive styling for arbitrary legacy content (RG-safe) ---- */
.at-article__body h2 {
	font-family: var(--font-serif);
	font-size: 1.7rem;
	line-height: 1.25;
	font-weight: 500;
	letter-spacing: -.01em;
	color: var(--ink);
	margin: 38px 0 18px;
	padding: 0;
}
.at-article__body h3 {
	font-family: var(--font-serif);
	font-size: 1.35rem;
	line-height: 1.3;
	font-weight: 500;
	color: var(--ink);
	margin: 32px 0 14px;
	padding: 0;
}
.at-article__body h4,
.at-article__body h5,
.at-article__body h6 {
	font-family: var(--font-sans);
	font-size: 1.08rem;
	font-weight: 600;
	color: var(--ink);
	margin: 26px 0 12px;
	padding: 0;
}
.at-article__body ul,
.at-article__body ol {
	margin: 0 0 24px;
	padding-left: 1.4em;
}
.at-article__body li {
	margin: 0 0 8px;
}
.at-article__body blockquote {
	margin: 28px 0;
	padding: 4px 0 4px 22px;
	border-left: 3px solid var(--line2);
	border-radius: 0;
	background: transparent;
	color: var(--ink2);
	font-style: italic;
}
.at-article__body img {
	max-width: 100%;
	height: auto;
	border-radius: 12px;
}
.at-article__body figure {
	margin: 28px 0;
	max-width: 100%;
}
.at-article__body figcaption {
	font-family: var(--font-mono);
	font-size: 12px;
	line-height: 1.5;
	color: var(--ink3);
	margin-top: 8px;
}
.at-article__body hr {
	border: 0;
	border-top: 1px solid var(--line);
	margin: 38px 0;
}
.at-article__body table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 24px;
	font-size: .98rem;
}
.at-article__body th,
.at-article__body td {
	border: 1px solid var(--line);
	padding: 8px 10px;
	text-align: left;
}
.at-article__body .page-links {
	margin: 28px 0 0;
	font-family: var(--font-mono);
	font-size: 13px;
	color: var(--ink2);
}