/**
 * "Astronomická soustředění" (JASO / PASO) page styling — block 14.
 *
 * Reproduces the prototype's two soustředění screens 1:1: a centred 840px column
 * with a mono accent eyebrow, a serif H1, an optional two-card "fakta" row (JASO:
 * TERMÍN / MÍSTO), the page's own prose body, an optional accent-bordered
 * blockquote (PASO) and a two-button action row (accent primary + outline ghost).
 * Chrome values come from Customizer fields whose defaults reproduce the
 * prototype verbatim; the prose body is the page's own the_content() (RG-safe).
 *
 * @package atvesmir
 */

.at-sous {
	max-width: 840px;
	margin: 0 auto;
	padding: clamp(34px, 5vw, 56px) clamp(18px, 5vw, 40px) 0;
}

/* Eyebrow — mono, terracotta, uppercased (the prototype's literal upper text). */
.at-sous__eyebrow {
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: .16em;
	text-transform: uppercase;
	line-height: 1.65;
	color: var(--accent);
	margin: 0 0 14px;
	padding: 0;
}

/* H1 — serif display, tight. Reset the refur p/h1 padding leak that inflated
   text rows in earlier blocks; the prototype H1 has margin/padding 0. */
.at-sous__title {
	font-family: var(--font-serif);
	font-size: clamp(2.1rem, 4.6vw, 3.2rem);
	line-height: 1.1;
	font-weight: 400;
	letter-spacing: -.02em;
	margin: 0;
	padding: 0;
	max-width: 20ch;
	color: var(--ink);
}

/* "Fakta" cards (JASO: TERMÍN / MÍSTO). */
.at-sous__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin: 26px 0 0;
}

.at-sous__fact {
	flex: 1;
	min-width: 170px;
	background: var(--bg2);
	border: 1px solid var(--line);
	border-radius: 14px;
	padding: 18px 20px;
}

.at-sous__fact-label {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ink3);
	margin-bottom: 8px;
	line-height: 1.65;
}

.at-sous__fact-value {
	font-family: var(--font-serif);
	font-size: 1.1rem;
	line-height: 1.65;
	color: var(--ink);
}

/* Prose body — the page's own content under the prototype's reading metric. */
.at-sous__body {
	margin: clamp(30px, 4vw, 44px) 0 0;
	font-family: var(--font-serif);
	font-size: 1.16rem;
	line-height: 1.75;
	color: var(--ink);
}

.at-sous__body > .entry-content > p,
.at-sous__body > .entry-content > ul,
.at-sous__body > .entry-content > ol {
	margin: 0 0 24px;
	padding: 0;
}

.at-sous__body .entry-content :where(p, li) {
	font-size: inherit;
	line-height: inherit;
	color: var(--ink);
}

.at-sous__body .entry-content a {
	color: var(--accent);
	text-decoration: none;
	border-bottom: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
}

.at-sous__body .entry-content img {
	max-width: 100%;
	height: auto;
	border-radius: 14px;
}

/* Callout blockquote (PASO). Reset the refur blockquote background/border/quotes
   leak (a tinted background is invisible in light but blows up the dark diff). */
.at-sous__quote {
	margin: 30px 0;
	padding: 6px 0 6px 24px;
	background: transparent;
	border: 0;
	border-left: 3px solid var(--accent);
	border-radius: 0;
	box-shadow: none;
	font-family: var(--font-serif);
	font-size: 1.3rem;
	line-height: 1.45;
	font-style: italic;
	color: var(--ink);
	quotes: none;
}
.at-sous__quote::before,
.at-sous__quote::after { content: none; }

/* Action buttons — accent primary + outline ghost. */
.at-sous__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 13px;
	margin: 34px 0 10px;
}

.at-sous__btn {
	font-family: var(--font-sans);
	font-weight: 600;
	letter-spacing: .01em;
	font-size: 17px;
	border-radius: var(--at-radius-pill, 999px);
	text-decoration: none;
	display: inline-block;
	transition: background .18s ease, color .18s ease, border-color .18s ease, transform .12s ease;
}

/* Primary has NO border in the prototype (padding 14px); the ghost carries the
   1px border with padding 13px so both buttons land on the same 58px height. */
.at-sous__btn--primary {
	background: var(--accent);
	color: #fff;
	font-weight: 500;
	padding: 14px 28px;
	border: 0;
}

.at-sous__btn--ghost {
	background: transparent;
	color: var(--ink);
	padding: 13px 26px;
	border: 1px solid var(--line2);
}

/* The prototype's .at-btn has NO :hover rule (only :active translateY(1px)).
   Pin every interactive state so the global a:hover/a:visited never tints the
   buttons — honouring the prototype's four-hover-effects-only rule. */
.at-sous__btn:visited,
.at-sous__btn:focus,
.at-sous__btn:active,
.at-sous__btn:hover { text-decoration: none; }
.at-sous__btn--primary:visited,
.at-sous__btn--primary:focus,
.at-sous__btn--primary:active,
.at-sous__btn--primary:hover { color: #fff; background: var(--accent); border-color: var(--accent); }
.at-sous__btn--ghost:visited,
.at-sous__btn--ghost:focus,
.at-sous__btn--ghost:active,
.at-sous__btn--ghost:hover { color: var(--ink); background: transparent; border-color: var(--line2); }
.at-sous__btn:active { transform: translateY(1px); }
.at-sous__btn:focus-visible { outline: 2px solid var(--accent2); outline-offset: 3px; }