/* Zkušenosti zákazníků: desktop tři sloupce karet pod sebou, mobil řada s posunem do strany. */

.as-recenze { padding: 88px 0; }
.as-recenze .as-sekce-hlava { margin-bottom: 52px; }
.as-recenze__posun { display: none; }

.as-recenze__seznam { column-count: 3; column-gap: 24px; }
.as-recenze__karta {
	break-inside: avoid;
	margin: 0 0 24px;
	background: var(--as-bila);
	border: var(--as-ramecek);
	border-radius: 20px;
	padding: 26px 28px;
	box-shadow: var(--as-stin-6);
}
.as-recenze__uvozovka { display: block; width: 38px; height: 28px; margin-bottom: 14px; fill: var(--as-terakota); }
.as-recenze__text { margin: 0 0 18px; }
.as-recenze__text p { font-size: 14.5px; line-height: 1.65; color: var(--as-text); margin: 0; }
.as-recenze__autor { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 800; color: var(--as-inkoust); }
.as-recenze__avatar {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--as-merunka);
	color: var(--as-inkoust);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

/* Varianta Objednávky a detailu produktu: nadpis vlevo, odkaz vpravo, tři karty v řadě. */
.as-recenze--obj { padding: 80px 0; }
.as-recenze__hlava-obj {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 16px 32px;
	margin-bottom: 40px;
}
.as-recenze__hlava-obj .as-sekce-hlava { margin: 0; }
.as-recenze__hlava-obj .as-pill { margin-bottom: 14px; }
.as-recenze__hlava-obj .as-sekce-hlava__nadpis { font-size: 40px; margin: 0; }
.as-recenze--obj .as-recenze__seznam {
	column-count: auto;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	align-items: start;
}
.as-recenze--obj .as-recenze__karta { margin: 0; }

/* Prvních 9 zkušeností, zbytek po kliknutí na podtržený odkaz (atribut hidden dává asva.js — bez
   skriptu jsou vidět všechny). */
.as-recenze__karta[hidden] { display: none; }
.as-recenze__vice { display: flex; justify-content: center; margin-top: 8px; }
.as-recenze__vice[hidden] { display: none; }
.as-recenze__vice .as-odkaz { background: none; border: 0; border-bottom: 2.5px solid var(--as-merunka); border-radius: 0; padding: 0 0 2px; font-family: inherit; cursor: pointer; }
.as-recenze__jmeno { display: grid; gap: 1px; min-width: 0; }
.as-recenze__odkazy { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; }
.as-recenze__pridat { display: flex; justify-content: center; margin-top: 18px; }

/* Detail produktu: formulář schovaný pod odkazem „Přidat vlastní zkušenost“ (<details>, David 23. 10.).
   Odkaz je jen tak široký jako text, ať se nerozbaluje klikem kamkoli do řádku. */
.as-recenze__formular { scroll-margin-top: 110px; }
.as-recenze__formular > summary { width: fit-content; margin: 18px auto 0; list-style: none; cursor: pointer; }
.as-recenze__formular > summary::-webkit-details-marker { display: none; }

/* Formulář hodnocení na detailu produktu (parts/recenze-formular.php). */
.as-hodnoceni { max-width: 720px; margin: 40px auto 0; padding: 28px 30px; border: var(--as-ramecek); border-radius: 20px; background: var(--as-bila); box-shadow: var(--as-stin-6); scroll-margin-top: 110px; }
.as-hodnoceni__nadpis { font-size: 26px; margin: 0 0 6px; }
.as-hodnoceni__pod { margin: 0 0 18px; font-size: 14.5px; color: var(--as-text-2); }
.as-hodnoceni__dekujeme { margin: 8px 0 0; padding: 14px 16px; border-radius: 12px; background: #E6F4EA; color: var(--as-zelena-text); font-weight: 800; }
.as-hodnoceni__form { display: grid; gap: 16px; }
.as-hodnoceni__hvezdy { border: 0; margin: 0; padding: 0; min-width: 0; }
.as-hodnoceni__hvezdy legend,
.as-hodnoceni__pole label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 800; color: var(--as-inkoust); }
.as-hodnoceni__pole label span { font-weight: 600; color: var(--as-sede); }
/* Hvězdičky výběru: pořadí v DOM 5 → 1, řádek obrácený, takže „zvolená a menší“ jsou vlevo. Při
   přejetí myší ukazuje náhled jen hvězdička pod kurzorem (zvolené se zatím schovají, jinak by po
   zvolení pěti nešlo vidět, že klik dá tři). Mezery dělá padding, ne gap — v mezeře by náhled problikl. */
.as-hodnoceni__vyber { display: inline-flex; flex-direction: row-reverse; margin: 0 -2px; }
.as-hodnoceni__vyber input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.as-hodnoceni__vyber label { cursor: pointer; line-height: 0; padding: 0 2px; }
.as-hodnoceni__vyber svg { fill: #D5DBEA; transition: fill .12s ease, transform .12s ease; }
.as-hodnoceni__vyber input:checked ~ label svg { fill: var(--as-zlata); }
.as-hodnoceni__vyber:hover input ~ label svg { fill: #D5DBEA; }
.as-hodnoceni__vyber:hover label:hover svg,
.as-hodnoceni__vyber:hover label:hover ~ label svg { fill: var(--as-zlata); }
.as-hodnoceni__vyber label:hover svg { transform: scale(1.08); }
.as-hodnoceni__vyber input:focus-visible + label { outline: 2px solid var(--as-terakota); outline-offset: 2px; border-radius: 6px; }
.as-hodnoceni__pole { margin: 0; }
.as-hodnoceni__pole input,
.as-hodnoceni__pole textarea { width: 100%; padding: 12px 14px; border: var(--as-ramecek); border-radius: 12px; background: var(--as-bila); color: var(--as-inkoust); font: inherit; font-size: 16px; line-height: 1.45; }
.as-hodnoceni__pole textarea { resize: vertical; min-height: 120px; }
.as-hodnoceni__pole input:focus,
.as-hodnoceni__pole textarea:focus { outline: none; border-color: var(--as-terakota); box-shadow: 0 0 0 3px var(--as-merunka-bleda); }
.as-hodnoceni__radek { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.as-hodnoceni__souhlas { margin: 0; font-size: 13px; line-height: 1.5; color: var(--as-sede); }
.as-hodnoceni__souhlas a { font-weight: 700; color: var(--as-inkoust); text-decoration: underline; text-decoration-color: var(--as-merunka); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.as-hodnoceni__tlacitko { justify-self: start; }
.as-recenze__zdroj { font-size: 12px; font-weight: 600; color: var(--as-sede); }

@media (max-width: 1024px) {
	.as-recenze { padding: 72px 0; }
	.as-recenze .as-sekce-hlava { margin-bottom: 40px; }
	.as-recenze__seznam { column-count: 2; }
	.as-recenze--obj { padding: 64px 0; }
	.as-recenze__hlava-obj .as-sekce-hlava { margin-bottom: 0; }
	.as-recenze__hlava-obj .as-sekce-hlava__nadpis { font-size: 34px; }
	.as-recenze--obj .as-recenze__seznam { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
	.as-hodnoceni { margin-top: 28px; padding: 20px; box-shadow: var(--as-stin-5); }
	.as-hodnoceni__nadpis { font-size: 22px; }
	.as-hodnoceni__radek { grid-template-columns: minmax(0, 1fr); }
	.as-hodnoceni__tlacitko { justify-self: stretch; }
	.as-recenze__pridat { justify-content: flex-start; }
	.as-recenze__formular > summary { margin-left: 0; }
	.as-recenze { padding: 48px 0; }
	.as-recenze .as-sekce-hlava { text-align: left; margin-bottom: 24px; }
	.as-recenze__podnadpis { display: none; }
	.as-recenze__posun { display: block; margin: 0; font-size: 14.5px; }
	.as-recenze__seznam {
		column-count: auto;
		display: flex;
		gap: 14px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding: 0 var(--as-okraj);
		scrollbar-width: none;
		margin: 0 calc(-1 * var(--as-okraj));
		padding: 4px var(--as-okraj) 14px;
	}
	.as-recenze__seznam::-webkit-scrollbar { display: none; }
	.as-recenze__vice { justify-content: flex-start; margin-top: 18px; }
	.as-recenze__karta {
		flex: 0 0 290px;
		scroll-snap-align: start;
		margin: 0;
		padding: 22px;
		box-shadow: var(--as-stin-5);
	}
	.as-recenze__uvozovka { width: 32px; height: 24px; margin-bottom: 12px; }
	.as-recenze__text { margin-bottom: 16px; }
	.as-recenze__text p { font-size: 14px; line-height: 1.6; }
	.as-recenze__autor { gap: 10px; }
	.as-recenze__avatar { width: 34px; height: 34px; }

	.as-recenze--obj { padding: 40px 0; }
	.as-recenze__hlava-obj { margin-bottom: 18px; }
	.as-recenze__hlava-obj .as-sekce-hlava { margin-bottom: 0; }
	.as-recenze__hlava-obj .as-pill,
	.as-recenze__hlava-obj .as-odkaz { display: none; }
	.as-recenze__hlava-obj .as-sekce-hlava__nadpis { font-size: 27px; }
	.as-recenze--obj .as-recenze__seznam { display: flex; gap: 12px; }
	.as-recenze--obj .as-recenze__karta { flex-basis: 285px; padding: 20px; }
}