/*
 * Rebel Farms — Enquête-resultaten sectie (homepage).
 *
 * Standalone stylesheet (NIET onderdeel van de sass/CodeKit build).
 * Enqueued vanuit functions.php → rebel_enquete_results_assets().
 * De bijbehorende HTML staat als Custom HTML block in de homepage-editor
 * (kopie: enquete-section-block.html in deze theme-map).
 */

.rebel-enquete {
	background-color: var(--main-dark, #5C434D);
	color: var(--white, #FFFFFF);
	padding-top: var(--wp--preset--spacing--80, 5rem);
	padding-bottom: var(--wp--preset--spacing--80, 5rem);
	text-align: center;
}

.rebel-enquete__intro {
	font-style: italic;
	/* Match the intro rhythm of the "Dit zeggen onze klanten" block so the two
	   testimonial sections read as one system (was ~20px). */
	font-size: 1.125rem;
	line-height: 1.5;
	margin: 0.75em auto 0;
	max-width: 40em;
}

/* ---- grid met 4 resultaten ---- */

.rebel-enquete__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2.5rem 1.5rem;
	max-width: var(--wp--style--global--wide-size, 1280px);
	margin: 3rem auto 0;
	padding-left: 1.25rem;
	padding-right: 1.25rem;
}

@media only screen and (min-width: 1024px) {
	.rebel-enquete__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 2rem;
	}
}

/* ---- kaart ---- */

.rebel-enq-card {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.rebel-enq-donut {
	position: relative;
	width: 140px;
	max-width: 100%;
}

@media only screen and (min-width: 1280px) {
	.rebel-enq-donut {
		width: 170px;
	}
}

.rebel-enq-donut svg {
	display: block;
	width: 100%;
	height: auto;
	transform: rotate(-90deg);
}

.rebel-enq-track,
.rebel-enq-bar {
	fill: none;
	stroke-width: 9;
}

.rebel-enq-track {
	stroke: rgba(255, 255, 255, 0.18);
}

.rebel-enq-bar {
	stroke: var(--main-yellow, #FFFF00);
	stroke-linecap: round;
	/* omtrek bij r=52 ≈ 326.73 — JS zet stroke-dashoffset op basis van data-percent */
	stroke-dasharray: 326.73;
	stroke-dashoffset: 326.73;
	transition: stroke-dashoffset 1.4s cubic-bezier(0.33, 1, 0.68, 1);
}

/* percentage in het midden van de donut */
.rebel-enq-num {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Bellamy';
	font-weight: 400;
	letter-spacing: 0.05em;
	color: var(--main-yellow, #FFFF00);
	font-size: 2.4rem;
	line-height: 1;
}

@media only screen and (min-width: 1280px) {
	.rebel-enq-num {
		font-size: 3rem;
	}
}

.rebel-enq-pct {
	font-size: 0.55em;
	margin-left: 0.1em;
}

.rebel-enq-title {
	margin: 1.1rem 0 0.5rem;
	color: var(--white, #FFFFFF);
}

.rebel-enq-text {
	/* Same body size as the quote text in "Dit zeggen onze klanten" (was ~20px). */
	font-size: 1rem;
	line-height: 1.55;
	margin: 0;
	max-width: 17em;
}

/* bron / voetnoot */
.rebel-enquete__source {
	margin: 3rem auto 0;
	font-size: 0.85rem;
	opacity: 0.7;
}

/* zonder JS (of met reduced motion) gewoon de gevulde ring tonen */
.rebel-enquete.is-static .rebel-enq-bar,
.no-js .rebel-enq-bar {
	transition: none;
}