/* ==========================================================================
   Homepage — besluit "Homepage goedgekeurd (ronde 4)", technisch plan → Homepage.
   Mobiel eerst; wisselpunt mobiel/desktop-varianten 768px, volle desktop 1024px.
   ========================================================================== */

.home { padding-bottom: var(--s-2); }

.home-section { margin-top: var(--s-8); }
@media (min-width: 1024px) {
	.home-section { margin-top: var(--s-16); }
}

/* Gedeelde kop: Roboto Condensed, hoofdletters (zoals .page-title, kleiner). */
.home-heading {
	margin: 0;
	font-family: var(--f-display);
	font-size: 24px;
	line-height: 28px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--c-ink);
}
@media (min-width: 1024px) {
	.home-heading { font-size: 32px; line-height: 36px; }
}

/* ---------- 1. Opening ---------- */
/* Boven de secties eronder, zodat de zoeksuggesties (search.css) eroverheen vallen. */
.home-opening { position: relative; z-index: 5; margin-top: var(--s-3); }

/* Geen overflow: hidden: dan zou het suggestiepaneel onder het zoekveld worden
   afgesneden. De zachte cirkels zijn achtergrondverlopen, die vallen vanzelf
   binnen de ronde hoeken. */
.home-opening__panel {
	--circle: var(--c-blue);
	--circle-soft: rgba(225, 234, 243, 0.7);
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
	padding: 28px 20px 24px;
	border-radius: var(--r-lg);
	/* Zachte lichtblauwe vormen op de achtergrond, zonder extra afbeelding (snel). */
	background:
		radial-gradient(circle 110px at calc(100% - 40px) 0, var(--circle) 109.5px, transparent 110px),
		radial-gradient(circle 70px at 20px calc(100% + 10px), var(--circle-soft) 69.5px, transparent 70px),
		var(--c-blue-soft);
	isolation: isolate;
}

/* H1 blijft h1 (SEO); opmaak = gedeelde .kicker (main.css), besluit Quint 3 okt. */
.home-opening__h1 { margin: 0; }
.home-opening__title {
	margin: 0;
	font-family: var(--f-display);
	font-size: clamp(34px, 9vw, 64px);
	line-height: 1;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--c-ink);
}
.home-opening__sub {
	margin: 0;
	font-size: 15px;
	line-height: 22px;
	color: var(--c-text);
}
.search-form--home {
	height: 54px;
	margin-top: var(--s-1);
	padding: 0 6px 0 20px;
	border-color: #fff;
	box-shadow: 0 2px 10px rgba(56, 67, 83, 0.08);
}
.search-form--home .search-form__submit { width: 42px; height: 42px; }

@media (min-width: 768px) {
	.home-opening__panel {
		align-items: center;
		gap: var(--s-4);
		padding: 56px 40px;
		text-align: center;
	}
	.home-opening__panel {
		background:
			radial-gradient(circle 180px at calc(100% - 90px) 0, var(--circle) 179.5px, transparent 180px),
			radial-gradient(circle 130px at 50px calc(100% + 20px), var(--circle-soft) 129.5px, transparent 130px),
			var(--c-blue-soft);
	}
	.home-opening__sub { font-size: 17px; line-height: 26px; }
	.search-form--home { width: 100%; max-width: 640px; height: 64px; padding: 0 8px 0 26px; }
	.search-form--home .search-form__input { font-size: 17px; }
	.search-form--home .search-form__submit { width: 50px; height: 50px; }
}
@media (min-width: 1024px) {
	.home-opening { margin-top: var(--s-6); }
	.home-opening__panel { padding: 80px 64px; border-radius: var(--r-xl); }
}

/* ---------- 2. Waar heb je zin in? ---------- */
.home-themes .home-heading { margin-bottom: var(--s-4); }

.home-themes__list {
	display: flex;
	gap: 14px;
	margin: 0 calc(-1 * var(--gutter));
	padding: 0 var(--gutter) var(--s-2);
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scroll-padding-inline: var(--gutter);
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.home-themes__list::-webkit-scrollbar { display: none; }

.home-themes__item { flex: 0 0 auto; scroll-snap-align: start; }
/* Past de rij in de breedte (tablet, smal browservenster), dan gecentreerd onder
   de titel; past hij niet (mobiel), dan vallen de auto-marges weg en begint de
   rij gewoon links bij Ontbijt. Werkt ook in Safari, zonder `safe center`. */
.home-themes__item:first-child { margin-left: auto; }
.home-themes__item:last-child { margin-right: auto; }

.home-themes__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--s-2);
	width: 86px;
	color: var(--c-ink);
	text-decoration: none;
}
.home-themes__photo {
	display: block;
	width: 86px;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: 50%;
	background: var(--c-placeholder);
}
.home-themes__photo img { width: 100%; height: 100%; object-fit: cover; }
.home-themes__label {
	font-size: 14px;
	line-height: 18px;
	font-weight: 600;
	text-align: center;
}
@media (hover: hover) {
	.home-themes__link:hover .home-themes__label { color: var(--c-navy); text-decoration: underline; text-underline-offset: 3px; }
}
.home-themes__link:focus-visible { outline: none; }
.home-themes__link:focus-visible .home-themes__photo { outline: 2px solid var(--c-navy); outline-offset: 3px; }

/* 8 × 86 + 7 × 14 = 786 px rij + 2 × 16 gutter: vanaf hier past alles, titel ook in het midden. */
@media (min-width: 820px) {
	.home-themes .home-heading { text-align: center; }
}
@media (min-width: 1024px) {
	.home-themes .home-heading { margin-bottom: 28px; text-align: center; }
	.home-themes__list {
		display: grid;
		grid-template-columns: repeat(8, minmax(0, 1fr));
		gap: var(--s-6);
		margin: 0;
		padding: 0;
		overflow: visible;
	}
	.home-themes__item:first-child,
	.home-themes__item:last-child { margin: 0; }
	.home-themes__link { width: auto; gap: var(--s-3); }
	.home-themes__photo { width: 100%; max-width: 150px; }
	.home-themes__label { font-size: 15px; line-height: 20px; }
}

/* ---------- 3. Weekmenu ---------- */
.home-weekmenu {
	display: flex;
	flex-direction: column;
	gap: var(--s-4);
	padding: 18px 18px 22px;
	border-radius: var(--r-lg);
	background: var(--c-blue);
}
.home-weekmenu__collage {
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: var(--r-md);
	background: #fff;
}
.home-weekmenu__collage img { width: 100%; height: 100%; object-fit: cover; }

.home-weekmenu__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}
.home-weekmenu__title {
	margin: 0;
	font-family: var(--f-display);
	font-size: 26px;
	line-height: 1.05;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--c-ink);
}
.home-weekmenu__intro { margin: 0 0 var(--s-1); font-size: 15px; line-height: 23px; color: var(--c-navy); }
.home-weekmenu__text .btn { align-self: stretch; }

/* Dagfoto's: alleen vanaf 768px (en alleen als de tabel gelezen is). */
.home-weekmenu__days { display: none; }

@media (min-width: 768px) {
	.home-weekmenu--days .home-weekmenu__collage { display: none; }
	.home-weekmenu__days {
		display: grid;
		grid-template-columns: repeat(7, minmax(0, 1fr));
		gap: 10px;
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.home-weekmenu__day a {
		display: flex;
		flex-direction: column;
		gap: var(--s-2);
		color: var(--c-navy);
		text-decoration: none;
	}
	.home-weekmenu__day-photo {
		display: block;
		aspect-ratio: 3 / 4;
		overflow: hidden;
		border-radius: var(--r-md);
		background: #fff;
	}
	.home-weekmenu__day-photo img { width: 100%; height: 100%; object-fit: cover; }
	.home-weekmenu__day-label {
		font-size: 14px;
		line-height: 18px;
		font-weight: 600;
		letter-spacing: 1.4px;
		text-align: center;
		text-transform: uppercase;
	}
	.home-weekmenu__day a:hover .home-weekmenu__day-label { text-decoration: underline; text-underline-offset: 3px; }
	.home-weekmenu__day a:focus-visible { outline: none; }
	.home-weekmenu__day a:focus-visible .home-weekmenu__day-photo { outline: 2px solid var(--c-navy); outline-offset: 2px; }

	/* Tekst links, collage rechts; met dagfoto's de dagen onder de tekst (te smal ernaast). */
	.home-weekmenu {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: center;
		gap: var(--s-8);
		padding: 32px;
	}
	.home-weekmenu__text { grid-column: 1; grid-row: 1; }
	.home-weekmenu__collage { grid-column: 2; grid-row: 1; }
	.home-weekmenu--days { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
	.home-weekmenu--days .home-weekmenu__days { grid-column: 1; grid-row: 2; }
	.home-weekmenu__text .btn { align-self: flex-start; }
}

@media (min-width: 1024px) {
	.home-weekmenu {
		grid-template-columns: 340px minmax(0, 1fr);
		gap: var(--s-12);
		padding: 44px 48px;
		border-radius: var(--r-xl);
	}
	.home-weekmenu--days { grid-template-columns: minmax(0, 1fr); gap: var(--s-8); }
	.home-weekmenu__text { gap: 14px; }
	.home-weekmenu__collage { max-width: 640px; justify-self: end; width: 100%; }
	.home-weekmenu__title { font-size: 34px; }
	.home-weekmenu__intro { font-size: 16px; line-height: 26px; }
}

/* Breed genoeg voor de zeven dagen naast de tekst (zoals het ontwerp). */
@media (min-width: 1280px) {
	.home-weekmenu--days { grid-template-columns: 340px minmax(0, 1fr); gap: var(--s-12); }
	.home-weekmenu--days .home-weekmenu__days { grid-column: 2; grid-row: 1; }
}

/* ---------- 4/5. Receptrijen ---------- */
.home-recipes__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--s-4);
	margin-bottom: var(--s-4);
}
.home-recipes__titles { display: flex; flex-direction: column; gap: var(--s-1); }

.home-more {
	flex-shrink: 0;
	padding-bottom: 3px;
	font-size: 14px;
	line-height: 18px;
	font-weight: 700;
	color: var(--c-link);
	text-decoration: none;
	white-space: nowrap;
}
.home-more:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Tikvlak min. 44 px hoog zonder de kopregel te verschuiven (B10). */
.home-more { position: relative; }
.home-more::after { content: ""; position: absolute; left: -6px; right: -6px; top: 50%; height: 44px; transform: translateY(-50%); }

/* .card-grid geeft 2 kolommen; op desktop 4 (zoals het ontwerp) i.p.v. 3. */
@media (min-width: 1024px) {
	.home-recipes__head { margin-bottom: 28px; }
	.home-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-8) 28px; }
}

/* ---------- 6. Seizoen + shop (alleen ≥768px) ----------
   Besluit Quint 3 okt: minder lege ruimte. Seizoen: foto 3:2 over de linkerhelft
   (vult bij een hoger blok de volle hoogte, object-fit), tekst rechts. Shop: drie
   producten over de volle breedte. Desktop: beide blokken even hoog (grid stretch).
   De basisregels hieronder zijn mobiel-eerst (foto bovenaan, volle breedte, 3:2);
   Mobiel (besluit Quint 3 okt, 22:25): wel tonen, compact; seizoen als smalle kaart
   (foto links, tekst rechts, zoals de Smulrecept-kaart). */
.home-extras { display: grid; gap: 16px; }

.home-extra {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--r-xl);
	background: var(--c-warm);
}
.home-extra__photo {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	background: var(--c-placeholder);
}
.home-extra__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.home-extra__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	min-width: 0;
}
.home-extra--season .home-extra__text { padding: 24px; }
.home-extra__title {
	margin: 0;
	font-family: var(--f-display);
	font-size: 26px;
	line-height: 1.1;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--c-ink);
}
.home-extra__intro { margin: 0 0 var(--s-1); font-size: 15px; line-height: 24px; }
.home-extra .btn { min-height: 44px; }

/* Shopblok: tekst, drie producten, knop onder elkaar. */
.home-extra--shop { gap: 20px; padding: 24px; }
.home-shop {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--s-2);
	margin: 0;
	padding: 0;
	list-style: none;
}
.home-shop__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	height: 100%;
	padding: 12px 8px;
	border-radius: var(--r-md);
	background: #fff;
	color: var(--c-ink);
	text-align: center;
	text-decoration: none;
}
.home-shop__photo { display: block; width: 100%; max-width: 88px; aspect-ratio: 1; }
.home-shop__photo img { width: 100%; height: 100%; object-fit: contain; }
.home-shop__name {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 14px;
	line-height: 18px;
	font-weight: 500;
}
.home-shop__price { margin-top: auto; font-size: 14px; line-height: 18px; font-weight: 700; color: var(--c-ink); }
.home-shop__price s { margin-right: 4px; font-weight: 400; color: var(--c-muted); }
@media (hover: hover) {
	.home-shop__link:hover .home-shop__name { color: var(--c-navy); text-decoration: underline; text-underline-offset: 3px; }
}
.home-extra__btn { align-self: flex-start; margin-top: auto; }

@media (max-width: 767px) {
	.home-extra--season { flex-direction: row; align-items: center; gap: 14px; padding: 14px; }
	.home-extra--season .home-extra__photo { flex-shrink: 0; width: 112px; height: 112px; aspect-ratio: 1; border-radius: 12px; overflow: hidden; }
	.home-extra--season .home-extra__text { gap: 6px; padding: 0; }
	.home-extra--season .home-extra__title { font-size: 20px; }
	.home-extra--season .home-extra__intro { display: none; }
	.home-extra--season .btn { min-height: 44px; padding: 0 16px; }
	.home-extra--shop { gap: 14px; padding: 18px; }
	.home-extra--shop .home-extra__title { font-size: 22px; }
	.home-extra--shop .home-extra__btn { align-self: stretch; }
}

@media (min-width: 768px) {
	.home-extras {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		align-items: stretch;
		gap: var(--s-6);
	}
	/* Foto links (50%), tekst rechts; foto minimaal 3:2, rekt mee als het blok hoger is. */
	.home-extra--season {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: stretch;
	}
	.home-extra--season .home-extra__photo { height: 100%; }
	.home-extra--season .home-extra__text { justify-content: center; padding: 32px; }
	.home-extra--shop { padding: 32px; }
	.home-shop { gap: var(--s-3); }
	.home-shop__link { padding: 14px 10px; }
}

@media (min-width: 1024px) {
	.home-extras { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
	.home-extra--season .home-extra__text { padding: 28px; }
	.home-extra--shop { padding: 36px; }
}
@media (min-width: 1280px) {
	.home-extra--season .home-extra__text { padding: 36px; }
}

/* ---------- 7. Over Lowcarbchef (SEO-tekst) ---------- */
.home-about {
	padding: 24px 18px;
	border-radius: var(--r-lg);
	background: var(--c-warm);
}
.home-about__inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	max-width: 760px;
	margin-inline: auto;
}

.home-about__quint {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-bottom: var(--s-2);
	padding: 4px 16px 4px 4px;
	border-radius: var(--r-pill);
	background: #fff;
	font-size: 14px;
	line-height: 18px;
	color: var(--c-text);
	text-decoration: none;
}
.home-about__quint img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.home-about__quint strong { color: var(--c-navy); }
.home-about__quint:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.home-about__sep { margin: 0 2px; color: var(--c-muted); }

.home-about__title {
	margin: 0;
	font-size: 19px;
	line-height: 1.3;
	font-weight: 700;
	color: var(--c-ink);
}
.home-about__text { width: 100%; font-size: 15px; line-height: 1.7; }
.home-about__text p { margin: 0; }
.home-about__text h2 {
	margin: var(--s-6) 0 var(--s-2);
	font-size: 19px;
	line-height: 1.3;
	font-weight: 700;
}
.home-about__more p + p { margin-top: var(--s-3); }

.home-about__toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	font-size: 14px;
	font-weight: 700;
	color: var(--c-link);
	cursor: pointer;
	list-style: none;
}
.home-about__toggle::-webkit-details-marker { display: none; }
.home-about__toggle:hover { text-decoration: underline; text-underline-offset: 3px; }
.home-about__toggle .icon { transition: transform 0.15s; }
.home-about__toggle-close,
.home-about__more[open] .home-about__toggle-open { display: none; }
.home-about__more[open] .home-about__toggle-close { display: inline; }
.home-about__more[open] .home-about__toggle .icon { transform: rotate(180deg); }
/* Open: knop onderaan blijft bovenaan staan, daarom de tekst er gewoon onder. */
.home-about__more[open] > .home-about__toggle { margin-bottom: var(--s-1); }

@media (min-width: 1024px) {
	.home-about { padding: 48px 56px; border-radius: var(--r-xl); }
	.home-about__inner { gap: 14px; }
	.home-about__title,
	.home-about__text h2 { font-size: 22px; }
	.home-about__text { font-size: 16px; line-height: 1.75; }
	.home-about__toggle { font-size: 15px; }
}

/* ---------- 8. Nieuwsbrief ---------- */
.home-newsletter .newsletter { margin: 0; }

@media (prefers-reduced-motion: reduce) {
	.home-themes__list { scroll-behavior: auto; }
	.home-about__toggle .icon { transition: none; }
}

/* Contrast: bovenregel op het lichtblauwe weekmenublok iets donkerder (WCAG 4,5:1, besluit Quint 3 okt). */
.home-weekmenu .kicker { color: #4B5563; }