/*
 * atvesmir — "Často kladené otázky" (FAQ) page (block 10)
 * 1:1 with the prototype's FAQ screen: a mono eyebrow + serif H1, a flat
 * `<details>` accordion (question + accent "+" marker, answer revealed below,
 * divider rules top & bottom), and a "Nenašli jste odpověď?" contact CTA card.
 * Colours/metrics come from the design tokens (tokens.css) so the page follows
 * light/dark. Measured against tests/design (FAQ screen).
 *
 * Container: max-width 820px, centred, gutter padding, no bottom padding — the
 * footer carries the clamp(56px,8vw,110px) gap, exactly like the prototype.
 */

.at-faq {
	max-width: 820px;
	margin-inline: auto;
	padding: clamp(34px, 5vw, 56px) var(--at-gutter) 0;
}

/* ---------------------------------------------------------------- *
 * 1. Heading band — mono eyebrow + serif H1
 * ---------------------------------------------------------------- */
.at-faq__eyebrow {
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: .16em;
	line-height: 1.65;
	text-transform: uppercase;
	color: var(--ink3);
	margin: 0 0 10px;
	padding: 0;
}
.at-faq__title {
	font-family: var(--font-serif);
	font-size: clamp(2.1rem, 4.6vw, 3.2rem);
	font-weight: 400;
	letter-spacing: -.02em;
	line-height: 1.65;
	color: var(--ink);
	margin: 0;
	padding: 0;
}

/* ---------------------------------------------------------------- *
 * 2. Accordion — flat divider-separated <details> rows
 * ---------------------------------------------------------------- */
.at-faq__list {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin: 34px 0 0;
	border-top: 1px solid var(--line);
}
.at-faq__item {
	border-bottom: 1px solid var(--line);
}
.at-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 4px;
	font-family: var(--font-serif);
	font-size: clamp(1.15rem, 2vw, 1.4rem);
	line-height: 1.65;
	color: var(--ink);
	cursor: pointer;
	list-style: none;
}
.at-faq__q::-webkit-details-marker { display: none; }
.at-faq__q::marker { content: ""; }
.at-faq__qtext { min-width: 0; }
.at-faq__mark {
	flex-shrink: 0;
	color: var(--accent);
	font-size: 1.4rem;
	line-height: 1;
}

/* Answer body — content region (legacy HTML preserved). Styled to read like the
 * prototype's answer paragraph: 1.08rem / 1.7 / ink2 / 64ch measure. */
.at-faq__a {
	margin: 0;
	padding: 0 4px 22px;
	max-width: 64ch;
	font-family: var(--font-serif);
	font-size: 1.08rem;
	line-height: 1.7;
	color: var(--ink2);
}
.at-faq__a > :first-child { margin-top: 0; }
.at-faq__a > :last-child { margin-bottom: 0; }
.at-faq__a p { margin: 0 0 12px; padding: 0; }
.at-faq__a ul,
.at-faq__a ol { margin: 0; padding-left: 1.2em; }
.at-faq__a li { margin: 0 0 8px; padding: 0; }
.at-faq__a li:last-child { margin-bottom: 0; }
.at-faq__a a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.at-faq__a a:visited,
.at-faq__a a:focus,
.at-faq__a a:active { color: var(--accent); }
.at-faq__a a:hover { color: var(--accent2); }

/* ---------------------------------------------------------------- *
 * 3. Contact CTA card
 * ---------------------------------------------------------------- */
.at-faq__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 36px 0 0;
	padding: 26px 28px;
	background: var(--bg2);
	border: 1px solid var(--line);
	border-radius: 16px;
}
.at-faq__cta-title {
	font-family: var(--font-serif);
	font-size: 1.3rem;
	line-height: 1.65;
	color: var(--ink);
}
.at-faq__cta-lead {
	font-family: var(--font-serif);
	font-size: 1rem;
	line-height: 1.65;
	color: var(--ink2);
	margin-top: 4px;
}
.at-faq__btn {
	flex-shrink: 0;
	font-family: var(--font-sans);
	font-size: 17px;
	font-weight: 500;
	letter-spacing: .01em;
	background: var(--accent);
	color: #fff;
	padding: 13px 26px;
	border-radius: var(--at-radius-pill, 999px);
	text-decoration: none;
	display: inline-block;
	transition: background .18s ease, color .18s ease, transform .12s ease;
}
/* The prototype's .at-btn has NO :hover rule (only :active translateY(1px) +
 * the transition for it); keep it 1:1 — no hover colour change. States pinned so
 * the legacy refur a:visited/focus/active recolours can't leak onto the button. */
.at-faq__btn:visited,
.at-faq__btn:focus,
.at-faq__btn:active,
.at-faq__btn:hover { color: #fff; background: var(--accent); }
.at-faq__btn:active { transform: translateY(1px); }
.at-faq__btn:focus-visible { outline: 2px solid var(--accent2); outline-offset: 3px; }