/**
 * Hlasování – veřejné styly.
 *
 * @package RegionalniPotraviny
 */

.rp-hlasovani {
	/* Značková zelená: tmavá pro plochy a text, světlá jako doplněk. */
	--rp-hlas-zelena: #4b764e;
	--rp-hlas-zelena-tmava: #3c5f3f;
	--rp-hlas-svetla: #bec660;
	--rp-hlas-tmava: #2b2a29;
	--rp-hlas-ramecek: #e3e3e3;
	--rp-hlas-radius: 10px;

	margin: 2rem 0;
	color: var(--rp-hlas-tmava);
}

/* Nezávislost na šabloně – padding nesmí měnit rozměry (kvůli čtvercům). */
.rp-hlasovani *,
.rp-hlasovani *::before,
.rp-hlasovani *::after {
	box-sizing: border-box;
}

/* ---------------------------------------------------------------- hlavička */

.rp-hlas-hlavicka {
	margin-bottom: 1rem;
}

.rp-hlas-nadpis {
	margin: 0 0 .25rem;
	font-size: clamp(1.25rem, 4.5vw, 1.5rem);
	line-height: 1.25;
	overflow-wrap: anywhere;
}

.rp-hlas-podnadpis {
	margin: 0;
	color: #6b6b6b;
	font-size: .95rem;
}

.rp-hlas-uvod,
.rp-hlas-obdobi,
.rp-hlas-zprava {
	margin: 0 0 1rem;
	font-size: .95rem;
}

.rp-hlas-zprava--cekani {
	padding: .75rem 1rem;
	background: #f6f6f6;
	border-radius: var(--rp-hlas-radius);
}

.rp-hlas-diky {
	margin: 0 0 1rem;
	padding: .85rem 1rem;
	background: #f3f6e5;
	border-left: 4px solid var(--rp-hlas-zelena);
	border-radius: 4px;
	font-weight: 600;
}

/* -------------------------------------------------------------- carousel */

.rp-hlas-carousel {
	position: relative;
	margin: 0 0 1.25rem;
}

/* Posuvné okno – listování prstem řeší nativní scroll se snapem,
   takže carousel funguje i bez JavaScriptu. */
.rp-hlas-okno {
	position: relative;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	border-radius: var(--rp-hlas-radius);
}

.rp-hlas-okno::-webkit-scrollbar {
	display: none;
}

.rp-hlas-okno:focus-visible {
	outline: 3px solid #2b6cb0;
	outline-offset: 3px;
}

.rp-hlas-pas {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rp-hlas-slide {
	display: flex;
	flex: 0 0 100%;
	flex-direction: column;
	max-width: 100%;
	margin: 0;
	padding: 0 4px;
	list-style: none;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

.rp-hlas-karta {
	position: relative;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	border: 2px solid var(--rp-hlas-ramecek);
	border-radius: var(--rp-hlas-radius);
	background: #fff;
	overflow: hidden;
	transition: border-color .15s ease, box-shadow .15s ease;
}

/* Přepínač drží výběr, ale vidět být nemá – zůstává ale dosažitelný
   klávesnicí, takže výběr jde i Tabem a šipkami. */
.rp-hlas-radio {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Label je klikací karta – vykresluje se jen tam, kde se dá vybírat. */
label.rp-hlas-karta {
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
	-webkit-user-select: none;
	user-select: none;
}

.rp-hlas-karta--staticka {
	cursor: default;
}

@media (hover: hover) {
	label.rp-hlas-karta:hover {
		border-color: var(--rp-hlas-svetla);
	}
}

.rp-hlas-radio:checked + .rp-hlas-karta {
	border-color: var(--rp-hlas-zelena);
	box-shadow: 0 0 0 3px rgba(75, 118, 78, .18);
}

.rp-hlas-radio:focus-visible + .rp-hlas-karta {
	outline: 3px solid #2b6cb0;
	outline-offset: 2px;
}

/* Zaškrtávací kolečko v rohu karty – patří k výběru klikem,
   takže se ukazuje jen na velkých obrazovkách. */
.rp-hlas-znacka {
	display: none;
	position: absolute;
	top: .6rem;
	right: .6rem;
	width: 24px;
	height: 24px;
	border: 2px solid #cfcfcf;
	border-radius: 50%;
	background: rgba(255, 255, 255, .9);
}

.rp-hlas-radio:checked + .rp-hlas-karta .rp-hlas-znacka {
	border-color: var(--rp-hlas-zelena);
	background: var(--rp-hlas-zelena);
}

.rp-hlas-radio:checked + .rp-hlas-karta .rp-hlas-znacka::after {
	content: "";
	position: absolute;
	top: 5px;
	left: 8px;
	width: 5px;
	height: 10px;
	border: solid #fff;
	border-width: 0 2.5px 2.5px 0;
	transform: rotate(45deg);
}

/* ------------------------------------------------------------ obrázek */

/* Rám fotky je vždy čtvercový (1:1) – všechny karty jsou pak stejně
   vysoké bez ohledu na rozměry nahrané fotky. Podklad je bílý stejně
   jako fotky výrobků, aby kolem nich nevznikal rámeček jiné barvy. */
.rp-hlas-obrazek {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 1 / 1;
	padding: 10px;
	background: #fff;
	overflow: hidden;
}

/* Výrobek se nikdy neořezává – stejně jako v katalogu se do čtverce vepíše. */
.rp-hlas-obrazek img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	object-position: center;
}

/* Záloha pro prohlížeče bez podpory aspect-ratio (starší Safari, Android). */
@supports not (aspect-ratio: 1 / 1) {
	.rp-hlas-obrazek {
		height: 0;
		padding-top: 100%;
	}

	.rp-hlas-obrazek img,
	.rp-hlas-placeholder {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
}

.rp-hlas-placeholder {
	font-size: 3rem;
	line-height: 1;
	opacity: .35;
}

/* --------------------------------------------------------------- texty */

.rp-hlas-text {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: .25rem;
	padding: .9rem 1.1rem 1rem;
	text-align: center;
}

.rp-hlas-nazev {
	font-size: 1.25rem;
	line-height: 1.25;
	overflow-wrap: anywhere;
	text-transform: uppercase;
	letter-spacing: 0.01em;
}

.rp-hlas-vyrobce {
	font-size: .92rem;
	color: #6b6b6b;
	text-transform: uppercase;
	letter-spacing: 0.01em;
}

/* ------------------------------------------------- tlačítko hlasování */

.rp-hlas-volba {
	display: block;
	width: 100%;
	margin: .6rem 0 0;
	padding: .85rem 1.2rem;
	min-height: 50px;
	border: 0;
	border-radius: 999px;
	background: var(--rp-hlas-zelena);
	color: #fff;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
	transition: background .15s ease, opacity .15s ease, transform .1s ease;
}

@media (hover: hover) {
	.rp-hlas-volba:hover:not(:disabled) {
		background: var(--rp-hlas-zelena-tmava);
	}
}

.rp-hlas-volba:active:not(:disabled) {
	transform: scale(.98);
}

.rp-hlas-volba:disabled {
	opacity: .45;
	cursor: progress;
}

.rp-hlas-volba:focus-visible {
	outline: 3px solid #2b6cb0;
	outline-offset: 2px;
}

/* ---------------------------------------------------------- ovládání */

.rp-hlas-sipka {
	position: absolute;
	top: 34%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 2px solid var(--rp-hlas-ramecek);
	border-radius: 50%;
	background: rgba(255, 255, 255, .96);
	color: var(--rp-hlas-tmava);
	font-size: 1.9rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(31, 45, 22, .14);
	transition: opacity .15s ease, border-color .15s ease;
}

.rp-hlas-sipka span {
	display: block;
	margin-top: -4px;
}

.rp-hlas-sipka--vlevo {
	left: -6px;
}

.rp-hlas-sipka--vpravo {
	right: -6px;
}

@media (hover: hover) {
	.rp-hlas-sipka:hover:not(:disabled) {
		border-color: var(--rp-hlas-zelena);
	}
}

.rp-hlas-sipka:disabled {
	opacity: 0;
	pointer-events: none;
}

.rp-hlas-sipka:focus-visible {
	outline: 3px solid #2b6cb0;
	outline-offset: 2px;
}

.rp-hlas-ovladani {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .35rem;
	margin-top: .85rem;
}

.rp-hlas-tecky {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .4rem;
}

.rp-hlas-tecka-btn {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #d5d5d5;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: background .15s ease, transform .15s ease;
}

.rp-hlas-tecka-btn.is-aktivni {
	background: var(--rp-hlas-zelena);
	transform: scale(1.35);
}

.rp-hlas-tecka-btn:focus-visible {
	outline: 2px solid #2b6cb0;
	outline-offset: 3px;
}

.rp-hlas-pocitadlo {
	margin: 0;
	font-size: .85rem;
	color: #8a8a8a;
	font-variant-numeric: tabular-nums;
}

.rp-hlas-akce {
	display: flex;
	justify-content: center;
	margin-top: 1.25rem;
}

.rp-hlas-odeslat {
	padding: .8rem 1.8rem;
	min-height: 48px;
	border: 0;
	border-radius: 999px;
	background: var(--rp-hlas-zelena);
	color: #fff;
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
	transition: background .15s ease, opacity .15s ease;
}

@media (hover: hover) {
	.rp-hlas-odeslat:hover:not(:disabled) {
		background: var(--rp-hlas-zelena-tmava);
	}
}

.rp-hlas-odeslat:disabled {
	opacity: .45;
	cursor: not-allowed;
}

.rp-hlas-odeslat:focus-visible {
	outline: 3px solid #2b6cb0;
	outline-offset: 2px;
}

.rp-hlas-stav {
	margin: .5rem 0 0;
	font-size: .9rem;
	color: #6b6b6b;
	text-align: center;
}

/* -------------------------------------------------------------- výsledky */

.rp-hlas-vysledky {
	margin-top: 1.5rem;
}

.rp-hlas-vitez {
	display: flex;
	flex-direction: column;
	gap: .2rem;
	margin-bottom: 1.5rem;
	padding: 1.1rem 1.25rem;
	background: linear-gradient(135deg, #f3f6e5, #fff);
	border: 2px solid var(--rp-hlas-zelena);
	border-radius: var(--rp-hlas-radius);
}

.rp-hlas-vitez-stitek {
	font-size: .75rem;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--rp-hlas-zelena);
	font-weight: 700;
}

.rp-hlas-vitez-nazev {
	font-size: 1.35rem;
	line-height: 1.25;
	text-transform: uppercase;
	letter-spacing: 0.01em;
}

.rp-hlas-vitez-vyrobce {
	color: #6b6b6b;
	font-size: .95rem;
	text-transform: uppercase;
	letter-spacing: 0.01em;
}

.rp-hlas-vitez-podil {
	margin-top: .3rem;
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--rp-hlas-zelena);
}

.rp-hlas-graf-blok {
	display: grid;
	grid-template-columns: minmax(180px, 260px) 1fr;
	gap: 1.75rem;
	align-items: center;
}

.rp-hlas-graf-wrap {
	width: 100%;
	max-width: 260px;
}

.rp-hlas-graf {
	width: 100%;
	height: auto;
	/* Segmenty kreslíme po směru hodinových ručiček od dvanáctky. */
	transform: rotate(0deg);
}

.rp-hlas-graf-segment {
	transition: opacity .15s ease;
}

@media (hover: hover) {
	.rp-hlas-graf:hover .rp-hlas-graf-segment {
		opacity: .55;
	}

	.rp-hlas-graf .rp-hlas-graf-segment:hover {
		opacity: 1;
	}
}

.rp-hlas-legenda {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: rp-poradi;
}

.rp-hlas-legenda-radek {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: .6rem;
	padding: .45rem 0;
	border-bottom: 1px solid #f0f0f0;
	font-size: .92rem;
}

.rp-hlas-legenda-radek:last-child {
	border-bottom: 0;
}

.rp-hlas-tecka {
	width: 12px;
	height: 12px;
	border-radius: 3px;
	flex-shrink: 0;
}

.rp-hlas-legenda-nazev {
	min-width: 0;
	overflow-wrap: anywhere;
	text-transform: uppercase;
}

.rp-hlas-legenda-hodnota {
	font-weight: 700;
	white-space: nowrap;
}

.rp-hlas-legenda-pocet {
	font-weight: 400;
	color: #8a8a8a;
}

.rp-hlas-soucet {
	margin: 1.25rem 0 0;
	font-size: .9rem;
	color: #6b6b6b;
}

/* Informace o termínu zveřejnění výsledků. */
.rp-hlas-obdobi--vysledky {
	margin: 0 0 1.25rem;
	color: #6b6b6b;
	font-size: .9rem;
}

.rp-hlas-po-hlasu {
	margin-bottom: 1.25rem;
}

/* ------------------------------------------------------------- responzivní */

/* Velké obrazovky: žádné listování. Ze stejného HTML uděláme mřížku,
   ve které se vybere klikem na kartu a odešle tlačítkem pod ní. */
@media (min-width: 641px) {
	.rp-hlas-okno {
		overflow: visible;
		scroll-snap-type: none;
	}

	.rp-hlas-pas {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
		gap: 1rem;
	}

	.rp-hlas-slide {
		padding: 0;
		scroll-snap-align: none;
	}

	/* Ovládání carouselu i tlačítko v kartě jsou tady zbytečné. */
	.rp-hlas-sipka,
	.rp-hlas-ovladani,
	.rp-hlas-volba {
		display: none;
	}

	.rp-hlas-znacka {
		display: block;
	}

	.rp-hlas-text {
		padding: .75rem .85rem 1rem;
	}

	.rp-hlas-nazev {
		font-size: 1.05rem;
	}

	.rp-hlas-obrazek {
		padding: 8px;
	}
}

@media (max-width: 640px) {
	.rp-hlasovani {
		margin: 1.5rem 0;
	}

	/* Na malé obrazovce nechceme nad kartou tři řádky textu –
	   kraj a ročník návštěvník zná ze stránky, na které je. */
	.rp-hlas-podnadpis {
		display: none;
	}

	.rp-hlas-hlavicka {
		margin-bottom: .85rem;
	}

	.rp-hlas-graf-blok {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}

	.rp-hlas-graf-wrap {
		max-width: 200px;
		margin: 0 auto;
	}

	.rp-hlas-text {
		padding: .8rem .9rem .9rem;
	}

	.rp-hlas-nazev {
		font-size: 1.15rem;
	}

	.rp-hlas-vyrobce {
		font-size: .88rem;
	}

	.rp-hlas-placeholder {
		font-size: 2.5rem;
	}

	/* Šipky posadíme na fotku, ať nekradou šířku karty. */
	.rp-hlas-sipka {
		width: 40px;
		height: 40px;
		font-size: 1.7rem;
	}

	.rp-hlas-sipka--vlevo {
		left: 2px;
	}

	.rp-hlas-sipka--vpravo {
		right: 2px;
	}

	/* Na telefonu se hlasuje tlačítkem v kartě, tohle by bylo navíc. */
	.rp-hlas-akce {
		display: none;
	}

	/* Ťuknutí do fotky by jen tiše zaškrtlo skrytý přepínač,
	   což na telefonu nikam nevede – akce je tlačítko pod ní. */
	label.rp-hlas-karta {
		cursor: default;
		pointer-events: none;
	}

	.rp-hlas-vitez {
		padding: .9rem 1rem;
	}

	.rp-hlas-vitez-nazev {
		font-size: 1.15rem;
	}

	.rp-hlas-legenda-radek {
		gap: .5rem;
		font-size: .88rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.rp-hlas-okno {
		scroll-behavior: auto;
	}

	.rp-hlas-volba,
	.rp-hlas-sipka,
	.rp-hlas-tecka-btn,
	.rp-hlas-graf-segment {
		transition: none;
	}
}

/* Diagnostická hláška pro přihlášeného správce. */
.rp-hlas-diagnostika {
	padding: 1rem 1.25rem;
	background: #fff8e5;
	border: 1px solid #f0c36d;
	border-radius: var(--rp-hlas-radius);
	font-size: .92rem;
	line-height: 1.5;
}

.rp-hlas-diagnostika p {
	margin: 0 0 .6rem;
}

.rp-hlas-diagnostika p:last-child {
	margin-bottom: 0;
}

.rp-hlas-diagnostika-pozn {
	color: #8a7328;
	font-size: .85rem;
	font-style: italic;
}

.rp-hlas-diagnostika-kroky {
	margin: 0 0 .6rem;
	padding-left: 1.2rem;
	list-style: disc;
}

.rp-hlas-diagnostika-kroky li {
	margin-bottom: .2rem;
}

.rp-hlas-diagnostika-vinik {
	color: #b32d2e;
	font-weight: 700;
}