/* ==========================================================================
   ANKETA MESIACA

   Jedna otázka na mesiac. Dva stavy: hlasovanie a výsledok. Prepínajú sa
   atribútom data-voted na obale — nie výmenou markupu, aby riadky
   nepreskočili a odpoveď ostala na tom istom mieste.
   ========================================================================== */

.sq-poll {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: var(--sq-space-48);
	align-items: center;
	padding: var(--sq-space-48);
	background: var(--sq-surface);
	border: 1px solid var(--sq-border);
	border-radius: var(--sq-radius);
}

/* ---- Otázka ------------------------------------------------------------- */

.sq-poll__intro {
	display: flex;
	flex-direction: column;
	gap: var(--sq-space-8);
}

.sq-poll__eyebrow {
	font-family: var(--sq-font-display);
	font-size: var(--sq-fs-micro);
	font-weight: var(--sq-weight-bold);
	letter-spacing: var(--sq-track-eyebrow);
	text-transform: uppercase;
	color: var(--sq-accent);
}

.sq-poll__question {
	font-size: var(--sq-fs-heading);
	letter-spacing: var(--sq-track-heading);
}

.sq-poll__note {
	font-size: var(--sq-fs-small);
	color: var(--sq-text-tertiary);
	line-height: 1.5;
}

.sq-poll__count {
	margin-top: var(--sq-space-8);
	font-size: var(--sq-fs-small);
	color: var(--sq-text-tertiary);
	font-variant-numeric: tabular-nums;
}

.sq-poll__count b {
	font-family: var(--sq-font-display);
	font-weight: var(--sq-weight-bold);
	color: var(--sq-text);
}

/* Počet hlasov sa ukáže až po hlasovaní — inak výsledok ovplyvní odpoveď. */
.sq-poll:not([data-voted]) .sq-poll__count {
	visibility: hidden;
}

/* ---- Odpovede ----------------------------------------------------------- */

.sq-poll__options {
	display: flex;
	flex-direction: column;
	gap: var(--sq-space-8);
}

.sq-poll__option {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--sq-space-12);
	min-height: 48px;
	padding-inline: var(--sq-space-16);
	border: 1px solid var(--sq-border-strong);
	border-radius: var(--sq-radius);
	overflow: hidden;
	text-align: left;
	transition:
		border-color var(--sq-duration) var(--sq-ease),
		color var(--sq-duration) var(--sq-ease);
}

.sq-poll__option:hover {
	border-color: var(--sq-accent);
	color: var(--sq-accent);
}

.sq-poll__label {
	position: relative;
	z-index: 1;
	flex: 1;
	font-family: var(--sq-font-display);
	font-size: var(--sq-fs-base);
	font-weight: var(--sq-weight-medium);
	letter-spacing: var(--sq-track-card);
}

/* ---- Výsledok ----------------------------------------------------------- */

.sq-poll__bar {
	position: absolute;
	inset: 0 auto 0 0;
	width: 0;
	background: var(--sq-accent-soft);
	border-right: 1px solid var(--sq-accent-dim);
	transition: width var(--sq-duration-slow) var(--sq-ease);
}

.sq-poll__value {
	position: relative;
	z-index: 1;
	font-family: var(--sq-font-display);
	font-size: var(--sq-fs-ui);
	font-weight: var(--sq-weight-bold);
	color: var(--sq-text-tertiary);
	font-variant-numeric: tabular-nums;
	opacity: 0;
	transition: opacity var(--sq-duration) var(--sq-ease);
}

.sq-poll[data-voted] .sq-poll__bar {
	width: var(--share);
}

.sq-poll[data-voted] .sq-poll__value {
	opacity: 1;
}

.sq-poll[data-voted] .sq-poll__option {
	cursor: default;
	border-color: var(--sq-border);
}

.sq-poll[data-voted] .sq-poll__option:hover {
	color: inherit;
	border-color: var(--sq-border);
}

/* Zvolená odpoveď ostane zvýraznená — čitateľ musí vidieť, čo dal. */
.sq-poll__option[data-chosen] {
	border-color: var(--sq-accent) !important;
}

.sq-poll__option[data-chosen] .sq-poll__value {
	color: var(--sq-accent);
}

@media (max-width: 1023px) {
	.sq-poll {
		grid-template-columns: 1fr;
		gap: var(--sq-space-24);
		padding: var(--sq-space-32);
	}
}

@media (max-width: 767px) {
	.sq-poll {
		padding: var(--sq-space-24);
	}
}