/* =====================================================================
   QA-fixes — pagina "Chocolade op maat" (.fleur-page--maat).
   Alle regels zijn gescoped onder .fleur-page--maat zodat er geen lekkage
   naar andere pagina's is. Zie Figma 520:4277.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Geen horizontale scroll. De full-bleed roze band achter de review werd
   met width:100vw gemaakt (telt de scrollbar-breedte mee → paginabreed
   overschot → naar rechts scrollen). We maken de band nu full-bleed zonder
   100vw (left/right:0 op de sectie, die zelf al schermbreed is) en klemmen
   eventueel overschot af.
   --------------------------------------------------------------------- */
.fleur-page--maat { overflow-x: clip; }

/* ---------------------------------------------------------------------
   Reviews-slider (com-review) — kop + pijlknoppen.
   Links de serif-kop ("Deze chocoladeliefhebbers gingen je al voor!"),
   rechts twee pijlknoppen die door de reviews bladeren. De knoppen zijn de
   herbruikbare .fleur-carousel__nav (42×41, radius 5px) maar hier in
   aubergine met zachtroze caret (#f6bddd), zoals het design (520:4277).
   Het accentwoord is dezelfde aubergine, alleen cursief.
   --------------------------------------------------------------------- */
.fleur-page--maat .fleur-maat-review__head {
	margin-bottom: 40px;
	flex-wrap: wrap;
	gap: 24px;
}
.fleur-page--maat .fleur-maat-review__heading {
	font-family: var(--fleur-font-serif);
	font-weight: 400;
	font-size: clamp(26px, 2.6vw, 34px);
	line-height: 1.15;
	color: var(--fleur-aubergine);
	margin: 0;
}
.fleur-page--maat .fleur-maat-review__heading em {
	font-style: italic;
	font-family: var(--fleur-font-serif);
	/* Bruin/aubergine accent zoals in het design (niet roze). */
	color: inherit;
}
/* Eén review per view; caret in aubergine-knop. */
.fleur-page--maat .fleur-maat-review__carousel { --per-view: 1; position: relative; z-index: 1; }
.fleur-page--maat .fleur-maat-review__carousel .fleur-carousel__nav {
	background: var(--fleur-aubergine);
	color: var(--fleur-pink-soft);
}
.fleur-page--maat .fleur-maat-review__carousel .fleur-carousel__nav:hover {
	background: var(--fleur-aubergine);
	color: var(--fleur-pink-soft);
	/* Hover = subtiele lift + zachte schaduw (huisstijl), geen kleurflip. */
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(76, 61, 69, .28);
}
.fleur-page--maat .fleur-maat-review__carousel .fleur-carousel__nav:disabled:hover {
	transform: none;
	box-shadow: none;
}

/* ---------------------------------------------------------------------
   Volle-breedte roze band achter het onderste deel van de review.
   In het design (1920 breed) dekt de band de onderste helft van de foto's
   en loopt hij nog iets door onder de foto's/tekst. We geven de sectie een
   full-bleed ::before die het onderste deel afdekt, ONDER de inhoud — zonder
   100vw (die de scrollbar meetelt).
   --------------------------------------------------------------------- */
.fleur-page--maat .fleur-maat-review {
	position: relative;
	background: transparent;
}
.fleur-page--maat .fleur-maat-review::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	/* Band dekt het onderste deel van de review. */
	height: 46%;
	background: var(--fleur-pink-soft);
	z-index: 0;
	pointer-events: none;
}

/* ---------------------------------------------------------------------
   Grid-kop "Alle {chocolade} mogelijkheden" centreren.
   Op de site links uitgelijnd, in het design gecentreerd.
   --------------------------------------------------------------------- */
.fleur-page--maat .fleur-maat-options .fleur-section-title {
	text-align: center;
}

/* ---------------------------------------------------------------------
   "Heb je eerder chocolade op maat besteld?" — tekstkolom breder maken zodat
   het woord "chocolade" op dezelfde regel als "eerder" blijft (design breekt
   pas na "chocolade"). In het design is de tekstkolom breder dan de foto.
   --------------------------------------------------------------------- */
.fleur-page--maat .fleur-maat-repeat__inner {
	grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
}

/* ---------------------------------------------------------------------
   Mail-knop "Stuur ons een mail" op design-breedte brengen (248px), zodat
   de tekst niet krap in de knop staat (oogde daardoor "te groot"). De
   tekstgrootte zelf is al 14px zoals in het design.
   --------------------------------------------------------------------- */
.fleur-page--maat .fleur-maat-repeat .button {
	min-width: 248px;
}

/* ---------------------------------------------------------------------
   De laatste sectie (roze CTA-band) sluit in het design direct aan op de
   footer. De footer heeft standaard margin-top:64px (voor pagina's die op
   cream eindigen) → hier ontstond een cream/grijze strook. Weghalen.
   --------------------------------------------------------------------- */
#site-main.fleur-page--maat + .fleur-footer {
	margin-top: 0;
}

/* =====================================================================
   LIGGENDE TABLET (982–1219px) — Chocolade op maat.
   Alle regels gescoped op .fleur-page--maat en binnen dit bereik: desktop
   (≥1220) en mobiel (≤981) blijven exact zoals goedgekeurd. Staat NA de
   desktop-basisregels → wint op gelijke specificiteit via bronvolgorde.
   Aanpak: desktop-layout die smaller wordt, met strakker verticaal ritme.
   Géén width:100vw (de full-bleed roze band blijft via left/right:0 + de
   overflow-x:clip bovenaan) → geen horizontale scroll.
   ===================================================================== */
@media (min-width: 982px) and (max-width: 1219px) {
	/* --- Hero: aubergine box + foto. De foto heeft een vaste 705/494-ratio en
	   werd op de smallere kolom lager dan het aubergine tekstpaneel → een gat.
	   Foto de boxhoogte laten vullen (height:100% + aspect-ratio:auto verplicht
	   tegen brede overflow); tekst staat al verticaal gecentreerd (card:
	   justify-content:center in pages.css). Sectiepadding iets krapper. ------ */
	.fleur-page--maat .fleur-maat-hero { padding: 48px 0; }
	.fleur-page--maat .fleur-maat-hero__title {
		font-size: 40px;            /* 45px breekt te veel af in de smallere card */
	}
	.fleur-page--maat .fleur-maat-hero__media {
		aspect-ratio: auto;         /* MANDATORY bij height:100% → geen overflow */
		height: 100%;               /* foto vult de bandhoogte → nette rechthoek */
	}

	/* --- Options-grid: pages.css valt op ≤1024 terug naar 2 kolommen maar op
	   1025–1219 nog naar 4 → binnen deze tier consistente 3 kolommen. De PHP
	   herhaalt de tegels tot count×3, dus 3 kolommen geeft altijd exact `count`
	   volle rijen (nooit een weesrij). ------------------------------------- */
	.fleur-page--maat .fleur-maat-options { padding: 40px 0 48px; }
	.fleur-page--maat .fleur-maat-options .fleur-cat-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 20px;
	}

	/* --- Review-slider: strakker ritme. Twee foto's links + tekst rechts,
	   verticaal gecentreerd (blijft uit pages.css). ------------------------- */
	.fleur-page--maat .fleur-maat-review { padding: 40px 0 48px; }
	.fleur-page--maat .fleur-maat-review__head { margin-bottom: 28px; }
	.fleur-page--maat .fleur-maat-review__slide { gap: 32px; }
	.fleur-page--maat .fleur-maat-review__media { gap: 16px; }

	/* --- Formulier: minder verticale padding (was 72px). ------------------ */
	.fleur-page--maat .fleur-maat-form-section { padding: 56px 0; }

	/* --- Repeat (roze CTA): krappere band + kleinere kop (55px is te groot op
	   tablet; pages.css doet 40px pas ≤1024 → hier over de hele tier). ------ */
	.fleur-page--maat .fleur-maat-repeat { padding: 56px 0; }
	.fleur-page--maat .fleur-maat-repeat__inner { gap: 40px; }
	.fleur-page--maat .fleur-maat-repeat__title { font-size: 40px; }
}

/* =====================================================================
   MOBIEL (≤981px) — Chocolade op maat responsive.
   Alle regels gescoped op .fleur-page--maat. Raakt NIETS ≥982px: desktop
   (≥1220) en liggende tablet (982–1219) blijven identiek. Gebruikt de
   theme-breakpoint 981px (main.css) en dekt zo ook het gat 861–981 waar
   pages.css nog het desktop-grid liet staan.
   ===================================================================== */
@media (max-width: 981px) {
	/* --- Hero: gestapeld als de BONBONS-hero op mobiel — de ingekaderde
	   aubergine box stapelt met de FOTO BOVENAAN en het aubergine tekstblok
	   (titel + introtekst) eronder. Zo krijgt Chocolade-op-maat op mobiel exact
	   dezelfde "aubergine feel"-hero als de Bonbons-pagina (vgl. qa-bonbons.css
	   ≤981px). De aubergine achtergrond zit al op __inner (pages.css, met
	   background-clip:content-box) dus de box is identiek van vorm.
	   Grid → één kolom, gap:0 zodat foto en tekstblok flush aansluiten. -------- */
	/* Volledige breedte op mobiel: de box breekt uit de container (edge-to-edge)
	   en valt flush onder de header. padding-inline:0 + max-width:none heffen de
	   .sellabees-container-marges op; background-clip:content-box (pages.css)
	   vult de aubergine dan meteen de volle breedte. */
	.fleur-page--maat .fleur-maat-hero { padding: 0 0 16px; }
	.fleur-page--maat .fleur-maat-hero__inner {
		grid-template-columns: 1fr;
		gap: 0;
		max-width: none;
		padding-inline: 0;
	}
	/* Foto bovenaan (net als .fleur-bon-hero__media { order:-1 }). */
	.fleur-page--maat .fleur-maat-hero__media {
		order: -1;
		aspect-ratio: 16 / 10;
		min-height: 220px;
	}
	/* Aubergine tekstblok eronder — zelfde padding als de bonbons-hero-tekst. */
	.fleur-page--maat .fleur-maat-hero__card {
		padding: 36px 28px;
	}
	/* Titel exact als bonbons: schaalt tussen 28 en 36px. */
	.fleur-page--maat .fleur-maat-hero__title {
		font-size: clamp(28px, 6.5vw, 36px);
	}

	/* --- Options: 2 tegels per rij op mobiel (de gedeelde .fleur-cat-grid
	   viel via pages.css ≤560px terug naar 1 kolom). Scoped op de maat-options
	   zodat het de 1-koloms 560px-regel uit pages.css wint op héél mobiel. --- */
	.fleur-page--maat .fleur-maat-options { padding: 32px 0 48px; }
	.fleur-page--maat .fleur-maat-options .fleur-cat-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}
	/* Overlay-titel binnen de smalle 2-koloms kaart houden: rechterrand begrenzen
	   + laten afbreken zodat lange labels ("Kerstchocolade"/"Sinterklaasletter")
	   niet buiten de kaart vallen en worden afgekapt. */
	.fleur-page--maat .fleur-maat-options .fleur-cat-card__title {
		left: 12px;
		right: 12px;
		bottom: 12px;
		font-size: 15px;
		line-height: 1.15;
		overflow-wrap: anywhere;
		word-break: break-word;
	}

	/* --- Review-slider: slide + fotopaar stapelen, kop boven de pijlen --- */
	.fleur-page--maat .fleur-maat-review { padding: 32px 0 48px; }
	.fleur-page--maat .fleur-maat-review__slide {
		grid-template-columns: 1fr;
		gap: 28px;
	}
	/* Elke review op DEZELFDE hoogte laten beginnen. De carousel-track is flex en
	   rekt alle slides tot de hoogste (langste quote = De Akker) → kortere slides
	   werden verticaal gecentreerd en begonnen daardoor lager. Top-uitlijnen zodat
	   elke slide (foto's + tekst) bovenaan begint = uniform. Alleen mobiel. */
	.fleur-page--maat .fleur-maat-review__carousel .fleur-carousel__track {
		align-items: flex-start;
	}
	/* Twee reviewfoto's naast elkaar houden, maar wat kleiner. */
	.fleur-page--maat .fleur-maat-review__media {
		gap: 16px;
	}
	/* Kop en pijlknoppen netjes onder elkaar (kop links, pijlen eronder). */
	.fleur-page--maat .fleur-maat-review__head {
		align-items: flex-start;
		margin-bottom: 28px;
	}
	.fleur-page--maat .fleur-maat-review__company { font-size: 26px; }
	/* Roze band-::before iets lager zodat hij niet de hele gestapelde slide dekt. */
	.fleur-page--maat .fleur-maat-review::before { height: 42%; }

	/* --- Formulier-sectie: minder padding (grid-stacking = qa-forms.css) - */
	.fleur-page--maat .fleur-maat-form-section { padding: 40px 0; }
	/* Consistente verticale witruimte tussen ALLE velden. Op mobiel stapelt het
	   2-koloms .fleur-form__grid tot 1 kolom, maar de grid-row-gap (16px) kwam
	   BOVENOP de margin-bottom van .fleur-form__row (16px) → 32px tussen de
	   grid-velden (Voornaam/Achternaam/E-mail/Telefoon) vs. 16px tussen de
	   full-width velden (Bedrijfsnaam, Jouw wensen). Row-gap op 0 → overal 16px. */
	.fleur-page--maat .fleur-maat-form-section .fleur-form__grid {
		row-gap: 0;
	}

	/* --- Repeat (roze CTA): stapelen, kleinere titel, full-width knop ---- */
	.fleur-page--maat .fleur-maat-repeat { padding: 48px 0; }
	.fleur-page--maat .fleur-maat-repeat__inner {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.fleur-page--maat .fleur-maat-repeat__title { font-size: 32px; }
	.fleur-page--maat .fleur-maat-repeat .button {
		min-width: 0;
		width: 100%;
	}
	/* Media niet te hoog: portret-designratio inruilen voor landschap. */
	.fleur-page--maat .fleur-maat-repeat__media {
		aspect-ratio: 16 / 11;
	}
}

/* Zeer smalle telefoons. */
@media (max-width: 600px) {
	/* Hero-tekstblok iets krappere padding (net als de bonbons-hero ≤560px);
	   de titel blijft de clamp() uit het ≤981px-blok volgen. */
	.fleur-page--maat .fleur-maat-hero__card { padding: 28px 22px; }
	/* De twee reviewfoto's blijven ook op de kleinste schermen NAAST elkaar
	   (2 kolommen) — niet meer stapelen. Iets kleinere gap zodat ze passen. */
	.fleur-page--maat .fleur-maat-review__media {
		grid-template-columns: 1fr 1fr;
		gap: 12px;
	}
	.fleur-page--maat .fleur-maat-review::before { height: 40%; }
}