/* Vzhled se řídí ovládacími prvky widgetu v Elementoru.
   Tady je jen to, co musí držet, aby posuvník fungoval, a reset tlačítek. */

.an-recenze {
	text-align: center;
}

/* --- reset tlačítek -----------------------------------------------------
   Šipky, tečky i „číst celé“ jsou <button>. Šablona i Elementor barví
   tlačítka globálně pravidlem typu `.elementor-kit-123 button`, které má
   větší váhu než jedna třída. Proto reset přes dvě třídy a natvrdo. */
.an-recenze .an-recenze__sipka,
.an-recenze .an-recenze__tecka,
.an-recenze .an-recenze__vic {
	-webkit-appearance: none;
	appearance: none;
	background: none;
	background-color: transparent;
	background-image: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	text-shadow: none;
	padding: 0;
	margin: 0;
	min-width: 0;
	min-height: 0;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-transform: none;
	cursor: pointer;
}

.an-recenze .an-recenze__sipka:hover,
.an-recenze .an-recenze__sipka:focus,
.an-recenze .an-recenze__tecka:hover,
.an-recenze .an-recenze__tecka:focus,
.an-recenze .an-recenze__vic:hover,
.an-recenze .an-recenze__vic:focus {
	background: none;
	background-color: transparent;
	background-image: none;
	box-shadow: none;
}

/* --- rozvržení ---------------------------------------------------------- */

.an-recenze__scena {
	display: flex;
	align-items: center;
	justify-content: center;
	column-gap: 48px;
}

.an-recenze__drah {
	display: grid;
	flex: 1 1 auto;
	min-width: 0;
}

/* Recenze leží na sobě, aby výška neposkakovala při přepnutí. */
.an-recenze__polozka {
	grid-area: 1 / 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	opacity: 0;
	transform: translateY(12px);
	transition: opacity .7s ease, transform .7s ease;
	pointer-events: none;
}

.an-recenze__polozka.je-aktivni {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.an-recenze__text,
.an-recenze__jmeno,
.an-recenze__hvezdy {
	margin: 0;
}

/* Citace a odkaz „číst celé“ drží pohromadě. Mezera pod citací se pak
   nastavuje na celý blok a nerozbije se, když odkaz přibude nebo zmizí. */
.an-recenze__citace {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 36px;
}

.an-recenze__hvezdy {
	margin-bottom: 12px;
	letter-spacing: .2em;
}

/* --- rozbalení delší recenze -------------------------------------------- */

.an-recenze__zbytek[hidden] {
	display: none;
}

.an-recenze__polozka.je-rozbalena .an-recenze__vypustka {
	display: none;
}

.an-recenze .an-recenze__vic {
	display: inline-block;
	margin-top: 14px;
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
	opacity: .75;
	transition: opacity .25s ease;
}

.an-recenze .an-recenze__vic:hover {
	opacity: 1;
}

/* --- šipky a tečky ------------------------------------------------------ */

.an-recenze .an-recenze__sipka {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: color .25s ease, opacity .25s ease;
}

.an-recenze__tecky {
	display: flex;
	gap: 8px;
	justify-content: center;
	margin-top: 40px;
}

.an-recenze .an-recenze__tecka {
	width: 20px;
	height: 2px;
	background-color: currentColor;
	opacity: .3;
	transition: width .5s ease, opacity .5s ease;
}

.an-recenze .an-recenze__tecka.je-aktivni {
	width: 40px;
	opacity: 1;
}

/* --- hláška v editoru ---------------------------------------------------- */

.an-recenze__hlaska {
	padding: 24px;
	border: 1px dashed #c9bcae;
	color: #7d664f;
	font: 13px/1.6 system-ui, sans-serif;
	text-align: center;
}

@media (prefers-reduced-motion: reduce) {
	.an-recenze__polozka,
	.an-recenze .an-recenze__tecka { transition: none; }
}

@media (max-width: 767px) {
	.an-recenze__scena { column-gap: 8px; }
	.an-recenze .an-recenze__sipka { width: 32px; height: 32px; }
}