/**
 * Innovation Voting — frontend.
 *
 * Mobile-first. Typografie erft van het thema (Bricks), zodat het formulier
 * automatisch in de huisstijl staat. Kleur en maatvoering staan in de tokens
 * hieronder — pas die aan, niet de regels eronder.
 *
 * Stap 1 en stap 2 delen bewust dezelfde bouwstenen: dezelfde kaart, hetzelfde
 * logovlak, dezelfde randen en dezelfde tekstgroottes.
 */

.iv-app {
	/* ---- Huisstijl: hier aanpassen -------------------------------------- */
	--iv-accent: #d2307d;        /* knop, gekozen innovatie, vinkje */
	--iv-accent-hover: #961e52;
	--iv-accent-ink: #ffffff;    /* tekst op de accentkleur */
	--iv-ink: #1a1d23;           /* koppen en formuliertekst */
	--iv-muted: #5c6470;         /* omschrijvingen */
	--iv-line: #dde1e7;          /* randen */
	--iv-surface: #ffffff;       /* kaarten en velden */
	--iv-tile: #f3f5f8;          /* logovlak */
	--iv-danger: #b3261e;
	--iv-radius: 14px;

	/* ---- Maatvoering ---------------------------------------------------- */
	--iv-gap: 15px;
	--iv-pad: 20px;
	--iv-logo: 30%;

	max-width: 740px;
	margin-inline: auto;
	color: var(--iv-ink);
	font-family: inherit;
	font-size: 16px;
	line-height: 1.6;
	text-align: left;
}

.iv-app *,
.iv-app *::before,
.iv-app *::after {
	box-sizing: border-box;
}

/* --------------------------------------------------------------- Typografie */

.iv-heading {
	margin: 0 0 0.5rem;
	font-size: 32px;
	line-height: 1.15;
	letter-spacing: -0.015em;
}

.iv-intro {
	margin: 0 0 2rem;
	max-width: 40ch;
	font-size: 22px;
	color: var(--iv-muted);
}

.iv-closed {
	padding: var(--iv-pad);
	background: var(--iv-surface);
	border: 1px solid var(--iv-line);
	border-radius: var(--iv-radius);
	font-size: 18px;
}

.iv-closed p {
	margin: 0 0 0.75rem;
}

.iv-closed p:last-child {
	margin-bottom: 0;
}

/* --------------------------------------------------- Kaarten (stap 1 én 2) */

.iv-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--iv-gap);
	grid-template-columns: 1fr;
}

.iv-grid__item {
	margin: 0;
	padding: 0;
}

.iv-card,
.iv-chosen {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 2.5rem;
	width: 100%;
	padding: var(--iv-pad);
	margin: 0;
	text-align: left;
	background: var(--iv-surface);
	border: 1px solid var(--iv-line);
	border-radius: var(--iv-radius);
	font: inherit;
	color: inherit;
}

.iv-card {
	height: 100%;
	justify-content: center;
	cursor: pointer;
	appearance: none;
	transition: border-color 0.15s ease, outline-color 0.15s ease;
}

.iv-card:hover {
	border-color: var(--iv-accent);
	outline: 1px solid var(--iv-accent);
}

.iv-card:focus-visible {
	outline: 3px solid var(--iv-accent);
	outline-offset: 3px;
}

.iv-card:active {
	transform: translateY(1px);
}

/* De gekozen innovatie in stap 2 is dezelfde kaart, maar dan aangevinkt. */
.iv-chosen {
	border-color: var(--iv-accent);
	outline: 1px solid var(--iv-accent);
}

/* Het logovlak: in stap 1 een <span> met een <img> erin, in stap 2 de <img>
   zelf. Zelfde afmeting, zelfde achtergrond, zelfde afronding. */
.iv-card__media,
.iv-chosen__logo {
	flex: 0 0 var(--iv-logo);
	width: var(--iv-logo);
	height: 160px;
	background: var(--iv-tile);
	border-radius: calc(var(--iv-radius) - 4px);
	overflow: hidden;
}

.iv-card__media {
	display: grid;
	place-items: center;
}

.iv-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.iv-chosen__logo {
	display: block;
	padding: 0;
	object-fit: cover;
}

.iv-card__placeholder {
	font-size: 16px;
	font-weight: 700;
	color: var(--iv-muted);
}

.iv-card__body,
.iv-chosen__text {
	display: flex;
	align-items: start;
	justify-content: center;
	flex-direction: column;
	min-width: 0;
	height: 100%;
}

.iv-card__title,
.iv-chosen__title {
	display: block;
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.25;
}

.iv-card__excerpt,
.iv-chosen__excerpt {
	display: block;
	margin: 0.4rem 0 0;
	font-size: 15px;
	line-height: 1.5;
	color: var(--iv-muted);
}

/* ------------------------------------------------------------ Stap 2: keuze */

.iv-back {
	display: inline-block;
	margin: 0 0 1.5rem;
	padding: 0.5rem 0;
	background: none;
	border: 0;
	color: var(--iv-muted);
	font: inherit;
	font-size: 16px;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 4px;
}

.iv-back:hover,
.iv-back:focus-visible {
	color: var(--iv-ink);
}

.iv-selected {
	margin-bottom: var(--iv-gap);
}

/* ---------------------------------------------------------------- Formulier */

.iv-form {
	display: grid;
	gap: 1.5rem;
}

.iv-field {
	display: grid;
	gap: 0.5rem;
}

.iv-label {
	font-size: 20px;
	font-weight: 700;
	color: #232323;
}

.iv-input {
	width: 100%;
	min-height: 56px;
	padding: 0.9rem 1.1rem;
	font: inherit;
	font-size: 16px;
	color: var(--iv-ink);
	background: var(--iv-surface);
	border: 1px solid var(--iv-line);
	border-radius: calc(var(--iv-radius) - 4px);
}

.iv-input::placeholder {
	color: var(--iv-muted);
}

.iv-input:focus-visible {
	outline: 3px solid var(--iv-accent);
	outline-offset: 1px;
	border-color: var(--iv-accent);
}

.iv-input.is-invalid {
	border-color: var(--iv-danger);
}

.iv-field__error {
	margin: 0;
	color: var(--iv-danger);
	font-size: 15px;
}

.iv-consent {
	margin: -0.5rem 0 0;
	font-size: 15px;
	line-height: 1.5;
	color: var(--iv-muted);
}

.iv-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.7rem;
	width: 100%;
	min-height: 56px;
	padding: 0.9rem 2rem;
	background: var(--iv-accent);
	color: var(--iv-accent-ink);
	border: 0;
	border-radius: calc(var(--iv-radius) - 4px);
	font: inherit;
	font-size: 18px;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.iv-submit:hover {
	background: var(--iv-accent-hover);
}

.iv-submit:focus-visible {
	outline: 3px solid var(--iv-ink);
	outline-offset: 3px;
}

.iv-submit[disabled] {
	opacity: 0.65;
	cursor: progress;
}

.iv-spinner {
	width: 1.1em;
	height: 1.1em;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: iv-spin 0.7s linear infinite;
}

@keyframes iv-spin {
	to {
		transform: rotate(360deg);
	}
}

/* Honeypot: onzichtbaar voor mensen, bereikbaar voor bots. */
.iv-hp {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ------------------------------------------------------- Meldingen / bedankt */

.iv-alert {
	margin: 0 0 1.5rem;
	padding: 1rem 1.15rem;
	background: #fdf1f0;
	border: 1px solid var(--iv-danger);
	border-radius: calc(var(--iv-radius) - 4px);
	color: var(--iv-danger);
	font-size: 16px;
}

/* Bedankscherm: dezelfde kaart als stap 1 en 2. */
.iv-done {
	padding: var(--iv-pad);
	background: var(--iv-surface);
	border: 1px solid var(--iv-accent);
	outline: 1px solid var(--iv-accent);
	border-radius: var(--iv-radius);
	text-align: center;
}

.iv-done__mark {
	width: 56px;
	height: 56px;
	margin-bottom: 1.25rem;
	color: var(--iv-accent);
}

.iv-done .iv-heading {
	font-size: 24px;
}

.iv-done__message {
	margin: 0 0 0.75rem;
	font-size: 18px;
}

.iv-done__note {
	margin: 0;
	color: var(--iv-muted);
	font-size: 15px;
}

/* ---------------------------------------------------------- Grotere schermen */

@media (min-width: 40rem) {
	.iv-app {
		--iv-gap: 1.25rem;
	}

	.iv-submit {
		width: auto;
		min-width: 16rem;
	}
}

@media (min-width: 64rem) {
	.iv-app {
		--iv-gap: 1.5rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.iv-card,
	.iv-submit {
		transition: none;
	}

	.iv-card:active {
		transform: none;
	}

	.iv-spinner {
		animation-duration: 2s;
	}
}