/* ai-search - dotazovaci cast. Namespacovane .ai-search*, aby to netlouklo s CSS projektu. */
:root {
	--ai-search-accent: #2f7d5b;
	--ai-search-accent-contrast: #ffffff;
	--ai-search-fg: #1c1c1c;
	--ai-search-muted: #6a6a6a;
	--ai-search-bg: #ffffff;
	--ai-search-surface: #f6f6f4;
	--ai-search-border: #e2e2dd;
	--ai-search-crisis-bg: #fdecea;
	--ai-search-crisis-fg: #a4241a;
	--ai-search-radius: 10px;
	--ai-search-shadow: 0 12px 34px rgba(0, 0, 0, .14);
	--ai-search-maxw: 820px;
}

/* ============ hlavickova listar ============. */

.ai-search { position: relative; display: inline-flex; align-items: center; }

.ai-search__toggle,
.ai-search__submit,
.ai-search__close {
	display: inline-flex; align-items: center; justify-content: center;
	border: 0; background: transparent; color: inherit; cursor: pointer;
	padding: 8px; border-radius: 50%; line-height: 0;
}
.ai-search__toggle:hover { background: rgba(0, 0, 0, .06); }

.ai-search__form {
	position: absolute; top: 50%; right: 0; transform: translateY(-50%);
	display: none; align-items: center; gap: 4px;
	background: var(--ai-search-bg); color: var(--ai-search-fg);
	border: 1px solid var(--ai-search-border); border-radius: 999px;
	padding: 4px 6px 4px 14px; box-shadow: var(--ai-search-shadow);
	min-width: min(360px, 78vw); z-index: 60;
}
.ai-search.is-open .ai-search__toggle { display: none; }
.ai-search.is-open .ai-search__form { display: inline-flex; }

.ai-search__input {
	flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent;
	font: inherit; font-size: 16px; color: var(--ai-search-fg); padding: 6px 2px;
}
.ai-search__submit { color: var(--ai-search-accent); }
.ai-search__close { color: var(--ai-search-muted); }

.ai-search__suggest {
	position: absolute; top: calc(100% + 8px); right: 0;
	width: min(420px, 92vw); max-height: min(70vh, 520px); overflow-y: auto;
	background: var(--ai-search-bg); color: var(--ai-search-fg);
	border: 1px solid var(--ai-search-border); border-radius: var(--ai-search-radius);
	box-shadow: var(--ai-search-shadow); padding: 6px; z-index: 60;
}
.ai-search__suggest-item {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	padding: 9px 10px; border-radius: 8px; text-decoration: none; color: inherit;
}
.ai-search__suggest-item:hover { background: var(--ai-search-surface); }
.ai-search__suggest-title { font-weight: 600; font-size: 14px; }
.ai-search__suggest-type {
	flex: 0 0 auto; font-size: 11px; color: var(--ai-search-muted);
	background: var(--ai-search-surface); padding: 2px 8px; border-radius: 999px;
}
.ai-search__suggest-crisis {
	background: var(--ai-search-crisis-bg); color: var(--ai-search-crisis-fg);
	padding: 10px 12px; border-radius: 8px; font-size: 13px; margin-bottom: 4px;
}
.ai-search__suggest-static {
	background: var(--ai-search-surface); padding: 10px 12px; border-radius: 8px;
	font-size: 13px; margin-bottom: 4px;
}
.ai-search__suggest-empty { padding: 12px; color: var(--ai-search-muted); font-size: 14px; }
.ai-search__chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px; }
.ai-search__chips--page { padding: 0; margin-top: 16px; }
.ai-search__chips-label {
	flex: 0 0 100%; color: var(--ai-search-muted);
	font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
.ai-search__chip {
	display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px;
	border: 1px solid var(--ai-search-border); border-radius: 9999px;
	background: var(--ai-search-surface, var(--ai-search-bg)); color: var(--ai-search-fg);
	font-size: 14px; line-height: 1.3; text-decoration: none;
	transition: border-color .15s ease, color .15s ease;
}
.ai-search__chip:hover, .ai-search__chip:focus-visible {
	border-color: var(--ai-search-accent); color: var(--ai-search-accent);
}
.ai-search__suggest-all {
	display: block; text-align: center; padding: 10px; margin-top: 4px;
	border-top: 1px solid var(--ai-search-border); color: var(--ai-search-accent);
	font-weight: 600; font-size: 13px; text-decoration: none;
}

@media (max-width: 600px) {
	/* Otevreni se rozvine od lupy na obe strany (doleva i k pravemu kraji).
	   Vychozi pozici lupy dosadi JS do --ai-search-m-*; bez nej se rozvine od stredu. */
	.ai-search .ai-search__form {
		display: inline-flex;
		position: fixed; top: 10px; right: auto; transform: none;
		left: var(--ai-search-m-left, calc(50vw - 24px));
		width: var(--ai-search-m-width, 48px);
		min-width: 0; overflow: hidden;
		opacity: 0; pointer-events: none;
		transition: left .28s cubic-bezier(.4, 0, .2, 1),
			width .28s cubic-bezier(.4, 0, .2, 1), opacity .18s ease;
	}
	.ai-search.is-open .ai-search__form {
		left: 10px; width: calc(100vw - 20px);
		opacity: 1; pointer-events: auto;
	}
	/* Lupa vlevo jako ve vsech ostatnich rezimech; krizek zustava vpravo. */
	.ai-search .ai-search__submit { order: -1; }
	.ai-search__suggest {
		position: fixed; top: 66px; left: 10px; right: 10px; width: auto;
		max-height: calc(100vh - 84px);
	}
}

/* ============ vysledkova stranka ============. */

.ai-search-results {
	max-width: var(--ai-search-maxw); margin: 0 auto;
	/* ai-search-offset-top: nastavi projekt na vysku sve fixni hlavicky (jinak 0). */
	padding: calc(24px + var(--ai-search-offset-top, 0px)) 16px 64px;
	color: var(--ai-search-fg);
}

.ai-search-results__bar {
	display: flex; align-items: center; gap: 8px;
	background: var(--ai-search-bg); border: 1px solid var(--ai-search-border);
	border-radius: 999px; padding: 8px 8px 8px 16px; box-shadow: var(--ai-search-shadow);
}
.ai-search-results__bar-icon { flex: 0 0 auto; color: var(--ai-search-muted); }
.ai-search-results__input {
	flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent;
	font: inherit; font-size: 17px; padding: 8px 2px; color: var(--ai-search-fg);
}
.ai-search-results__submit {
	flex: 0 0 auto; border: 0; cursor: pointer; font: inherit; font-weight: 600;
	background: var(--ai-search-accent); color: var(--ai-search-accent-contrast);
	padding: 10px 20px; border-radius: 999px;
}

.ai-search-results__status { color: var(--ai-search-muted); margin: 18px 2px 0; min-height: 1em; }

.ai-search-results__crisis {
	background: var(--ai-search-crisis-bg); color: var(--ai-search-crisis-fg);
	border-radius: var(--ai-search-radius); padding: 16px 18px; margin-top: 18px;
	font-size: 15px; line-height: 1.5;
}

/* AI / staticka odpoved - velky blok nahoře. */
.ai-search-results__answer {
	background: var(--ai-search-surface); border: 1px solid var(--ai-search-border);
	border-radius: var(--ai-search-radius); padding: 18px 20px; margin-top: 18px;
}
.ai-search-answer__label {
	font-size: 12px; text-transform: uppercase; letter-spacing: .05em;
	color: var(--ai-search-accent); font-weight: 700; margin-bottom: 8px;
}
.ai-search-answer__text { margin: 0; font-size: 16px; line-height: 1.6; white-space: pre-wrap; }
.ai-search-answer__text::after {
	content: "▍"; margin-left: 1px; color: var(--ai-search-accent);
	animation: ai-search-blink 1s steps(1) infinite;
}
.ai-search-results__answer.is-done .ai-search-answer__text::after { content: none; }
@keyframes ai-search-blink { 50% { opacity: 0; } }

.ai-search-answer__sources {
	margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--ai-search-border);
	display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.ai-search-answer__sources-label { font-size: 12px; color: var(--ai-search-muted); }
.ai-search-answer__source {
	font-size: 13px; color: var(--ai-search-accent); text-decoration: none;
	background: var(--ai-search-bg); border: 1px solid var(--ai-search-border);
	padding: 4px 10px; border-radius: 999px;
}

.ai-search-results__suggest-line { margin-top: 16px; color: var(--ai-search-muted); }
.ai-search-results__dym-link { color: var(--ai-search-accent); font-weight: 600; }

/* skupiny vysledku. */
.ai-search-results__groups { margin-top: 8px; }
.ai-search-group { margin-top: 26px; }
.ai-search-group__title {
	font-size: 14px; text-transform: uppercase; letter-spacing: .04em;
	color: var(--ai-search-muted); margin: 0 0 10px; font-weight: 700;
}
.ai-search-group__list { display: grid; gap: 10px; }

.ai-search-card {
	display: block; text-decoration: none; color: inherit;
	background: var(--ai-search-bg); border: 1px solid var(--ai-search-border);
	border-radius: var(--ai-search-radius); padding: 14px 16px;
	transition: border-color .12s, box-shadow .12s;
}
.ai-search-card:hover { border-color: var(--ai-search-accent); box-shadow: var(--ai-search-shadow); }
.ai-search-card__title { display: block; font-weight: 600; font-size: 16px; color: var(--ai-search-accent); }
.ai-search-card__snippet {
	margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--ai-search-muted);
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ai-search-card__metas { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 8px; }
.ai-search-card__meta { font-size: 13px; color: var(--ai-search-fg); text-decoration: none; font-weight: 500; }

@media (max-width: 600px) {
	.ai-search-results { padding: calc(16px + var(--ai-search-offset-top, 0px)) 12px 48px; }
	.ai-search-results__submit { padding: 10px 14px; }
	.ai-search-results__input { font-size: 16px; }
}

/* : pocty ve skupinach ("zobrazeno 10 z 28"). */
.ai-search-group__title { display: flex; align-items: baseline; gap: 10px; }
.ai-search-group__count {
	font-size: 12px; text-transform: none; letter-spacing: 0;
	color: var(--ai-search-muted); font-weight: 500;
}

/* ============: zvyrazneni shody ============. */

.ai-search-card mark,
.ai-search__suggest-item mark {
	background: var(--ai-search-mark-bg, rgba(47, 125, 91, .16));
	color: inherit; border-radius: 3px; padding: 0 1px;
}

/* ============: zobrazit vse ve skupine ============. */

.ai-search-group__more {
	border: 0; background: transparent; cursor: pointer;
	color: var(--ai-search-accent); font: inherit; font-size: .85em;
	text-decoration: underline; padding: 0; margin-left: 10px;
}
.ai-search-group__more:disabled { opacity: .5; cursor: default; }

/* Kontakt po nezodpovezenem dotazu, pouze vysledkova stranka. */
.ai-search-contact {
	margin-top: 24px; padding: 18px 20px; color: var(--ai-search-fg);
	background: var(--ai-search-surface); border: 1px solid var(--ai-search-border);
	border-radius: var(--ai-search-radius); line-height: 1.5;
}
.ai-search-results__answer .ai-search-contact { margin-top: 16px; padding: 0; background: none; border: 0; }
.ai-search-contact[hidden], [data-ai-search-contact-open][hidden] { display: none !important; }
.ai-search-contact p { margin: 0 0 12px; }
.ai-search-contact__form { display: grid; gap: 14px; margin-top: 14px; }
.ai-search-contact [hidden] { display: none !important; }
.ai-search-contact__field { display: grid; gap: 6px; font-weight: 600; }
.ai-search-contact__field input,
.ai-search-contact__field textarea {
	box-sizing: border-box; width: 100%; min-width: 0; padding: 10px 12px;
	font: inherit; font-weight: 400; color: var(--ai-search-fg); background: var(--ai-search-bg);
	border: 1px solid var(--ai-search-border); border-radius: var(--ai-search-radius);
}
.ai-search-contact__field textarea { resize: vertical; }
.ai-search-contact__draft {
	display: block; background: var(--ai-search-bg);
	border: 1px solid var(--ai-search-border); border-radius: var(--ai-search-radius);
}
.ai-search-contact .ai-search-contact__field input,
.ai-search-contact .ai-search-contact__field textarea {
	position: static !important;
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 10px 12px !important;
	font-size: inherit !important;
	line-height: 1.5 !important;
	color: var(--ai-search-fg) !important;
	background: var(--ai-search-bg) !important;
	border: 1px solid var(--ai-search-border) !important;
	box-shadow: none !important;
	overflow: auto !important;
	transition: none !important;
}
.ai-search-contact .ai-search-contact__field .ai-search-contact__draft textarea { display: block; background: transparent !important; border: 0 !important; }
.ai-search-contact__field textarea.is-revealing {
	-webkit-mask: linear-gradient(to right, #000 40%, transparent 60%) 0 0 / 300% 100% no-repeat;
	mask: linear-gradient(to right, #000 40%, transparent 60%) 0 0 / 300% 100% no-repeat;
	animation: ai-search-contact-reveal 1.1s ease-in-out both;
}
@keyframes ai-search-contact-reveal { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; } }
@media (prefers-reduced-motion: reduce) {
	.ai-search-contact__field textarea.is-revealing { -webkit-mask: none; mask: none; animation: none; }
}
.ai-search-contact__consent { display: flex; align-items: flex-start; gap: 8px; font-size: .9em; }
.ai-search-contact .ai-search-contact__consent input {
	flex: 0 0 auto;
	position: static !important;
	width: auto !important;
	height: auto !important;
	margin: .3em 0 0 !important;
	padding: 0 !important;
	background: none !important;
	box-shadow: none !important;
}
.ai-search-contact a { color: var(--ai-search-accent); }
.ai-search-contact__button {
	justify-self: start; border: 0; border-radius: var(--ai-search-radius); padding: 10px 18px;
	font: inherit; font-weight: 600; cursor: pointer;
	background: var(--ai-search-accent); color: var(--ai-search-accent-contrast);
}
.ai-search-contact__button:disabled { opacity: .6; cursor: wait; }
.ai-search-contact :focus-visible { outline: 2px solid var(--ai-search-accent); outline-offset: 3px; }
.ai-search-contact .ai-search-contact__error { color: var(--ai-search-crisis-fg); margin: 0; }
.ai-search-contact__trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* ============: hodnoceni AI odpovedi ============. */

.ai-search-answer__feedback {
	display: flex; align-items: center; gap: 8px;
	margin-top: 10px; font-size: .85em; color: var(--ai-search-muted);
}
.ai-search-answer__feedback-btn {
	border: 1px solid var(--ai-search-border); background: var(--ai-search-bg);
	border-radius: 999px; cursor: pointer; padding: 2px 10px; font-size: 1em;
}
.ai-search-answer__feedback-btn:hover { border-color: var(--ai-search-accent); }

/* ============ lista otevrena rovnou v hlavicce ============. */

/* Pod breakpointem se `--inline` chova jako vychozi lista (ikona + overlay) - v uzke
   hlavicce neni misto na pole. */
@media (min-width: 601px) {
	.ai-search--inline { width: var(--ai-search-bar-width, 260px); }
	.ai-search--inline .ai-search__toggle { display: none; }

	.ai-search--inline .ai-search__form {
		display: inline-flex; width: 100%; min-width: 0;
		box-shadow: var(--ai-search-inline-shadow, none);
		transition: width .28s cubic-bezier(.4, 0, .2, 1), box-shadow .28s ease;
	}
	/* Lupa vlevo v pilulce (submit zustava submitem), krizek az kdyz je co zavirat. */
	.ai-search--inline .ai-search__submit { order: -1; }
	.ai-search--inline .ai-search__close { display: none; }

	.ai-search--inline.is-expanded .ai-search__form {
		width: var(--ai-search-expanded-width, min(720px, 60vw));
		box-shadow: var(--ai-search-shadow);
	}
	.ai-search--inline.is-expanded .ai-search__close { display: inline-flex; }
	.ai-search--inline.is-expanded .ai-search__suggest {
		width: var(--ai-search-expanded-width, min(720px, 60vw));
	}
}

/* ============ AI odpoved se pripravuje ============. */

.ai-search-answer__loading {
	display: flex; align-items: center; gap: 10px;
	color: var(--ai-search-muted); font-size: 15px;
}
.ai-search-answer__spinner {
	flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%;
	border: 2px solid var(--ai-search-border); border-top-color: var(--ai-search-accent);
	animation: ai-search-spin .7s linear infinite;
}
@keyframes ai-search-spin { to { transform: rotate(360deg); } }

.ai-search-answer__skeleton { display: grid; gap: 8px; margin-top: 14px; }
.ai-search-answer__skeleton-line {
	height: 10px; border-radius: 999px;
	background: linear-gradient(90deg,
		var(--ai-search-border) 25%, var(--ai-search-bg) 37%, var(--ai-search-border) 63%);
	background-size: 400% 100%;
	animation: ai-search-shimmer 1.4s ease infinite;
}
.ai-search-answer__skeleton-line:last-child { width: 70%; }
@keyframes ai-search-shimmer {
	from { background-position: 100% 0; }
	to { background-position: 0 0; }
}

/* Cekani na odpoved je jediny moment, kdy stranka nema co ukazat: karta dycha, text faze
   se strida a pod nim jede pruh. Jak dlouho to trva, ridi search.js. */

.ai-search-results__answer.is-pending {
	position: relative; overflow: hidden;
	isolation: isolate; /* at zar zustane pod textem, ne nad nim */
}
.ai-search-results__answer.is-pending::before {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background: radial-gradient(120% 90% at 10% 0%,
		var(--ai-search-answer-glow, rgba(47, 125, 91, .12)), transparent 62%);
	animation: ai-search-breathe 2.6s ease-in-out infinite;
}
@keyframes ai-search-breathe { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }

/* Popisek pulzuje mirneji nez zar na pozadi - pod textem uz se pocita citelnost. */
.ai-search-results__answer.is-pending .ai-search-answer__label {
	animation: ai-search-pulse 2.6s ease-in-out infinite;
}
@keyframes ai-search-pulse { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }

.ai-search-answer__loading-text { display: inline-block; }
.ai-search-answer__loading-text.is-in {
	animation: ai-search-phase .34s cubic-bezier(.2, .7, .3, 1) both;
}
@keyframes ai-search-phase {
	from { opacity: 0; transform: translateY(5px); }
	to { opacity: 1; transform: none; }
}

/* Pruh neukazuje postup (ten nezname), jen ze se pracuje. */
.ai-search-answer__progress {
	display: block; position: relative; height: 3px; margin-top: 12px;
	border-radius: 999px; background: var(--ai-search-border); overflow: hidden;
}
.ai-search-answer__progress::after {
	content: ""; position: absolute; inset: 0; width: 38%; border-radius: inherit;
	background: linear-gradient(90deg, transparent, var(--ai-search-accent), transparent);
	animation: ai-search-scan 1.5s cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes ai-search-scan {
	from { transform: translateX(-110%); }
	to { transform: translateX(300%); }
}

/* Odpoved i to, co za ni dobehne, nabehne misto skoku. */
.ai-search-answer__label,
.ai-search-answer__text { animation: ai-search-rise .3s ease both; }
.ai-search-answer__sources,
.ai-search-answer__feedback { animation: ai-search-rise .42s ease both; }
@keyframes ai-search-rise {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.ai-search-answer__spinner,
	.ai-search-answer__skeleton-line,
	.ai-search-results__answer.is-pending::before,
	.ai-search-results__answer.is-pending .ai-search-answer__label,
	.ai-search-answer__progress::after,
	.ai-search-answer__loading-text.is-in,
	.ai-search-answer__label,
	.ai-search-answer__text,
	.ai-search-answer__sources,
	.ai-search-answer__feedback { animation: none; }
	.ai-search--inline .ai-search__form,
	.ai-search .ai-search__form { transition: none; }
}

/*
 * Pripoji se ZA vestavenou search.css z balicku (jeden stylesheet, normalni kaskada),
 * takze opravy z balicku dal chodi. Vzhled samotneho vyhledavaciho pole resi
 * app/AiSearch/page.latte - to pouziva puvodni .search-form webu; tady jen
 * sladujeme vysledky (karty, AI odpoved) s brandem MRP.
 */

:root {
	--ai-search-accent: #C60C34;          /* --color-primary (--color-red) */
	--ai-search-accent-contrast: #ffffff;
	--ai-search-fg: #2A211D;              /* --color-darkest */
	--ai-search-muted: #5E6774;           /* --color-gray-dark */
	--ai-search-border: #E7E7E7;          /* --color-form-border */
	--ai-search-radius: 0.75rem;
	--ai-search-mark-bg: #FFC2CC;         /* --color-red-pale */
}

/* Blok vysledku bezi uvnitr .tertiary-hero, kde je uz vlastni odsazeni. */
.ai-search-faq {
	max-width: 43.75rem;                  /* max-w-175, stejne jako .search-form */
	margin-inline: auto;
	font-family: inherit;
	text-align: left;
}

/* Kriz "zrusit" ve type=search si kresli webkit sam a v kulatem poli prekazi. */
.ai-search-faq input[type="search"]::-webkit-search-cancel-button,
.ai-search-faq input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance: none;
}

.ai-search-faq .ai-search-results__status:empty {
	display: none;
}

.ai-search-faq .ai-search-results__status {
	margin-top: 1rem;
}

/* Tlacitko "Hledat" ma na mobilu stejnou sirku jako pole (.search-form je do sloupce). */
.ai-search-faq .search-form .btn {
	white-space: nowrap;
}

/*
 * Hlavicka skupiny je v balicku jednoradkovy flex [nadpis][zobrazeno X z Y][zobrazit vse].
 * Na uzkem mobilu se tri polozky mackaly kazda do dvou radku - radeji je necham zalomit.
 */
@media (max-width: 30rem) {
	.ai-search-faq .ai-search-group__title {
		flex-wrap: wrap;
		row-gap: 0.125rem;
	}

	.ai-search-faq .ai-search-group__count {
		flex: 0 0 auto;
	}
}

/*
 * Naseptavac na strance FAQ.
 *
 * Tridy .ai-search__form / .ai-search__input nese formular jen proto, aby si ho
 * initBar v search.js nasel - vzhled ma drzet .search-form webu. Balickove styly
 * jsou ale psane pro hlavickovou pilulku, ktera je slozena (position:absolute,
 * display:none, otevira se pridanim .is-open na .ai-search). Tady zadny toggle
 * neni, pole je trvale otevrene ve strance, takze to pozicovani rusim.
 * Selektory jsou zamerne o tridu specifictejsi (.ai-search-faq ...), aby vyhraly.
 */
/*
 * Tridy .ai-search__form a .ai-search__input nese formular JEN jako zacep pro
 * initBar v search.js - vzhled ma zustat presne ten, ktery mel web pred napojenim.
 *
 * Balicek je ale styluje pro hlavickovou pilulku (position:absolute, display:none,
 * align-items:center, gap:4px; input: border:0, background:transparent,
 * padding:6px 2px, font-size:16px) a NESTACI na to prebit specificitou: styly webu
 * jsou v @layer components (Tailwind), styly balicku jsou bez vrstvy - a nevrstvene
 * deklarace prebijeji vrstvene bez ohledu na specificitu.
 *
 * `all: revert-layer` vrati hodnoty presne na to, co spocitala vrstva webu
 * (.search-form / .form-control), takze se tu nic neopisuje a nic nemuze zdrhnout,
 * kdyz se design webu zmeni. Dopisuji se jen vlastnosti, ktere ai-search opravdu
 * potrebuje navic.
 */
.ai-search-faq .ai-search__form {
	all: revert-layer;
	position: relative;      /* pozicovaci kontext pro dropdown */
}

.ai-search-faq .ai-search__input {
	all: revert-layer;
}

/*
 * Dropdown v sirce celeho pole misto pevnych 420px zarovnanych doprava.
 * position: absolute je tu povinne - balicek pod 600px prepina naseptavac na
 * position: fixed (overlay pod hlavickovou pilulkou), coz by tady zaroven zmenilo
 * referenci pro `top: 100%` z formulare na viewport a dropdown by skoncil az pod
 * ohybem stranky.
 */
.ai-search-faq .ai-search__suggest {
	position: absolute;
	top: calc(100% + 0.5rem);
	left: 0;
	right: 0;
	width: auto;
	max-height: min(60vh, 26rem);
}

/*
 * .form-control-xl ma v Tailwindu `md:py-5.25 md:px-6`, takze pod 768px se nechova
 * nijak - pole zustane na zakladnich 13px odsazeni (48px vysky) a je NIZSI nez
 * tlacitko Hledat (btn-lg, 50px). Na desktopu je pritom 64px a tlacitku vevodi.
 * Dorovnavam jen pod md, aby se pomer neobracel; nad md plati puvodnich 21px.
 */
@media (max-width: 47.9375rem) {
	.ai-search-faq .form-control-xl {
		padding-block: 1.125rem;
		/* Pole je rounded-full, takze radius = pulka vysky (58/2 = 29px). Puvodnich
		   16px vodorovne by text posadilo doprostred toho oblouku - drzim odsazeni
		   nad radiusem, stejne jako to dela desktop (px-6 pri radiusu 32). */
		padding-inline: 1.75rem;
	}
}

.ai-search-faq .ai-search-answer__label {
	text-transform: none;
	letter-spacing: 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	font-weight: 500;
	color: var(--ai-search-muted);
}