/**
 * Dutchfietsen Keuzehulp - homepage-sectie (light DOM).
 *
 * Opzet: echte winkel-foto links, titel en de eerste vraag rechts. Mobiel
 * stapelt: foto boven, vragen eronder. Alles gescoped onder .df-keuzehulp;
 * geen globale selectors, geen !important.
 */

.df-keuzehulp {
	--dfk-navy: #0e2c4e;
	--dfk-navy-600: #1c4a78;
	--dfk-orange: #f47c20;
	--dfk-orange-600: #e06a12;
	--dfk-contrast: #ffffff;
	--dfk-border: #dbe4ee;
	--dfk-bg: #ffffff;
	--dfk-bg-soft: #eef3f9;
	--dfk-text: #0e2c4e;
	--dfk-muted: #4a5b6e;
	--dfk-radius: 16px;
	--dfk-radius-sm: 10px;
	--dfk-tap: 44px;

	box-sizing: border-box;
	display: block;
	width: 100%;
	max-width: 100%;
	color: var(--dfk-text);
	font-size: 16px;
	line-height: 1.5;
}

.df-keuzehulp *,
.df-keuzehulp *::before,
.df-keuzehulp *::after {
	box-sizing: border-box;
}

/* --- De sectie ---------------------------------------------------------- */

.df-keuzehulp__hero {
	display: flex;
	flex-direction: column;
	gap: 0;
	width: 100%;
	max-width: 1120px;
	margin: 0 auto;
	background: var(--dfk-bg);
	border: 1px solid var(--dfk-border);
	border-radius: var(--dfk-radius);
	box-shadow: 0 10px 30px rgba(14, 44, 78, 0.06);
	overflow: hidden;
}

/* --- Foto --------------------------------------------------------------- */

.df-keuzehulp__foto-wrap {
	flex: 1 1 auto;
	min-height: 220px;
	background: var(--dfk-bg-soft);
}

.df-keuzehulp__foto {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	object-fit: cover;
	object-position: center;
}

/* --- Copy en startkeuze -------------------------------------------------- */

.df-keuzehulp__copy {
	flex: 1 1 auto;
	padding: 24px;
}

.df-keuzehulp__titel {
	margin: 0 0 10px;
	font-size: 1.7rem;
	font-weight: 800;
	line-height: 1.15;
	color: var(--dfk-navy);
}

.df-keuzehulp__intro {
	margin: 0 0 18px;
	max-width: 52ch;
	color: var(--dfk-muted);
}

.df-keuzehulp__vraag {
	margin: 0 0 10px;
	font-weight: 700;
	color: var(--dfk-navy);
}

.df-keuzehulp__startkeuze {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 0 18px;
}

.df-keuzehulp__start {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 180px;
	min-height: 56px;
	padding: 14px 22px;
	border: 1.5px solid var(--dfk-border);
	border-radius: var(--dfk-radius-sm);
	background: var(--dfk-bg);
	color: var(--dfk-navy);
	font: inherit;
	font-weight: 700;
	text-decoration: none;
	text-align: center;
	transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.df-keuzehulp__start:hover {
	border-color: var(--dfk-orange);
	background: #fff8f2;
	box-shadow: 0 6px 18px rgba(14, 44, 78, 0.08);
	color: var(--dfk-navy);
}

.df-keuzehulp__start:focus-visible {
	outline: 3px solid var(--dfk-navy);
	outline-offset: 2px;
}

/* --- Punten onder de knoppen --------------------------------------------- */

.df-keuzehulp__punten {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	margin: 0;
	padding: 0;
}

.df-keuzehulp__punten li {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--dfk-muted);
}

.df-keuzehulp__punt-icoon {
	flex: 0 0 auto;
	color: var(--dfk-orange);
}

/* --- Shadow-host --------------------------------------------------------- */

.df-keuzehulp__host {
	display: contents;
}

/* --- Breder scherm: foto links, copy rechts ------------------------------
   Omslag op 720px zodat een iPad rechtop (768px) de naast-elkaar-indeling
   krijgt in plaats van de gestapelde mobiele versie. */

@media (min-width: 720px) {
	.df-keuzehulp__hero {
		flex-direction: row;
		align-items: stretch;
	}

	.df-keuzehulp__foto-wrap {
		flex: 0 0 44%;
		min-height: 340px;
	}

	.df-keuzehulp__copy {
		flex: 1 1 56%;
		padding: 36px 40px;
		align-self: center;
	}

	.df-keuzehulp__titel {
		font-size: 2.1rem;
	}

	.df-keuzehulp__intro {
		font-size: 1.05rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.df-keuzehulp__start {
		transition: none;
	}
}