/**
 * qa-over-fleur.css
 *
 * QA-correcties voor de pagina "Over Fleur" (scope .fleur-page--over).
 * Wordt automatisch ná pages.css ingeladen (glob, alfabetisch) zodat de
 * regels hieronder de basissectie-stijl overschrijven. Dit is het
 * gezaghebbende bestand voor deze pagina — spec-over-contact.css bevat geen
 * Over-Fleur-regels meer (zou later laden en dit overschrijven).
 *
 * Alle waarden 1:1 uit Figma 520:4396.
 */

/* =========================================================================
   OF-HERO — aubergine band met foto die onderaan over het grijze (#f5f5f5)
   vlak steekt.
   Figma: band y221–746 (h525), foto y276–837 (h561) → de foto steekt ±16%
   (91px) ónder de band uit, op de crème achtergrond.
   ========================================================================= */
@media (min-width: 861px) {
	.fleur-page--over .fleur-over-hero {
		position: relative;
		background: var(--fleur-cream); /* sectie = crème; band is een aparte laag */
		padding: 0;
	}
	/* Aubergine band als achtergrondlaag. De hoogte volgt de fotohoogte zodat de
	   foto er altijd ±16% onderuit steekt; capt op 544px zodra de container
	   (max 1280px) is uitgegroeid (o.a. op 1920px-review). */
	.fleur-page--over .fleur-over-hero::before {
		content: "";
		position: absolute;
		inset: 0 0 auto 0;
		height: min(544px, calc(18px + 41.08vw));
		background: var(--fleur-aubergine);
		z-index: 0;
	}
	.fleur-page--over .fleur-over-hero__inner {
		position: relative;
		z-index: 1;
		padding: 64px 24px 48px; /* 24px = container-inline behouden */
		align-items: start;
	}
}

/* =========================================================================
   OF-KNOPPEN — CTA-pillen exact op Figma-maat (270×53px, tekst 14px).
   De tekst oogde "te groot" doordat de pil te SMAL was; we verbreden de pil
   (min-width) i.p.v. de tekst te verkleinen (consistent met de andere pagina's).
   ========================================================================= */
.fleur-page--over .fleur-over-story .button.fleur-btn--pink-soft,
.fleur-page--over .fleur-cta-workshop .button.fleur-btn--dark {
	box-sizing: border-box;
	min-width: 270px;
	max-width: 100%; /* niet uit de kolom lopen op smalle schermen */
	height: 53px;
	padding-block: 0;
}

/* =========================================================================
   OF-WORKSHOP — gedeelde roze workshop-CTA-band, hier 1:1 op Over Fleur.
   ========================================================================= */

/* Kop én platte tekst ZWART (Figma 520:4459/4460 = #000, niet aubergine).
   Alle breedtes. */
.fleur-page--over .fleur-cta-workshop__title,
.fleur-page--over .fleur-cta-workshop__title em,
.fleur-page--over .fleur-cta-workshop__body {
	color: #000;
}

/* OF7 — geen crème kier tussen de roze band en de (aubergine) footer:
   de footer-margin die anders een gat laat wordt hier weggehaald. */
#site-main.fleur-page--over + .fleur-footer {
	margin-top: 0;
}

/* Desktop: lichte (crème) top met een roze band die pas ná de 2e regel platte
   tekst begint (Figma: band start op y1928, platte tekst op y1864 → 2 regels op
   crème) en dóórloopt tot de footer. De foto valt over de band heen.
   Op ≤860px stapelt de sectie en valt hij terug op de basis-opmaak (volledig
   roze band uit pages.css), waar een vaste px-band niet zou kloppen. */
@media (min-width: 861px) {
	.fleur-page--over .fleur-cta-workshop {
		position: relative;
		background: var(--fleur-cream);
		padding: 96px 0 0; /* geen bodempadding: band loopt door tot de footer */
		overflow: hidden;
	}
	.fleur-page--over .fleur-cta-workshop::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		top: 402px; /* roze band begint onder de 2e regel platte tekst */
		background: var(--fleur-pink-soft);
		z-index: 0;
	}
	/* Content + foto bóven de band; foto valt over de roze band heen.
	   Tekstkolom iets breder + krappere gap (48px, Figma) zodat de kop
	   "Van chocolade liefhebber" op één regel past en pas "naar expert..." naar
	   regel 2 gaat (Figma 520:4459 — titelbox 619px). Bij de standaard gelijke
	   kolommen (584px) is de kolom net te smal en valt "liefhebber" eronder. */
	.fleur-page--over .fleur-cta-workshop__inner {
		position: relative;
		z-index: 1;
		align-items: center;
		grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
		gap: 48px;
		padding-bottom: 92px; /* roze ruimte onder de foto vóór de footer (Figma) */
	}
}

/* =========================================================================
   MOBIEL (≤981px) — Over Fleur.
   De desktop-overlays hierboven zijn @media (min-width:861px) en zijn dus nog
   actief in het gat 861–981px (waar pages.css nog niet stapelt). We neutraliseren
   die overlays over de héle mobiele range en stapelen alles netjes in 1 kolom
   met crème/roze als effen sectie-achtergrond (geen vaste-px pseudo-banden die
   op smalle schermen scheef vallen). Sluit aan op de homepage-mobielaanpak.
   Raakt geen desktop-regel (≥982px blijft identiek).
   ========================================================================= */
@media (max-width: 981px) {
	/* --- OF-HERO: aubergine als effen sectie-achtergrond (geen overlappende
	   ::before-band), 1 kolom, minder padding. --- */
	.fleur-page--over .fleur-over-hero {
		position: static;
		background: var(--fleur-aubergine);
		padding: 40px 0 44px;
	}
	.fleur-page--over .fleur-over-hero::before {
		display: none; /* de losse aubergine-band-laag uit; sectie levert nu de kleur */
	}
	.fleur-page--over .fleur-over-hero__inner {
		position: static;
		z-index: auto;
		padding: 0 24px; /* container-gutter behouden, geen extra top/bottom */
		grid-template-columns: 1fr;
		gap: 28px;
		align-items: stretch;
	}
	.fleur-page--over .fleur-over-hero__title {
		font-size: 34px;
		line-height: 1.12;
		margin: 0 0 18px;
	}

	/* --- OF-STORY: 1 kolom (pages.css doet dit al ≤860; hier ook 861–981),
	   minder sectiepadding. De TEKST staat boven en de afbeelding eronder: de
	   hero-foto zit direct boven dit blok, dus twee foto's onder elkaar oogde
	   lelijk. Nu: kop + tekst + knop eerst, foto als afsluiter. --- */
	.fleur-page--over .fleur-over-story {
		padding: 48px 0;
	}
	.fleur-page--over .fleur-over-story__inner {
		grid-template-columns: 1fr;
		gap: 28px;
		align-items: stretch;
	}
	.fleur-page--over .fleur-over-story__text { order: 1; }
	.fleur-page--over .fleur-over-story__media { order: 2; }
	.fleur-page--over .fleur-over-story__title { font-size: 30px; }

	/* --- OF-WORKSHOP: roze als effen sectie-achtergrond (geen ::after-band met
	   vaste top:402px), 1 kolom, tekst boven / foto onder, comfortabele padding. */
	.fleur-page--over .fleur-cta-workshop {
		position: static;
		background: var(--fleur-pink-soft);
		padding: 28px 0 44px;   /* minder witruimte boven "Van chocolade liefhebber…" */
		overflow: visible;
	}
	.fleur-page--over .fleur-cta-workshop::after {
		display: none; /* geen aparte roze band-laag: sectie is nu volledig roze */
	}
	.fleur-page--over .fleur-cta-workshop__inner {
		position: static;
		z-index: auto;
		grid-template-columns: 1fr;
		gap: 28px;
		align-items: stretch;
		padding-bottom: 0;
	}
	.fleur-page--over .fleur-cta-workshop__title { font-size: 32px; }

	/* CTA-pillen: volledige breedte, min-width mag niet buiten de kolom lopen. */
	.fleur-page--over .fleur-over-story .button.fleur-btn--pink-soft,
	.fleur-page--over .fleur-cta-workshop .button.fleur-btn--dark {
		min-width: 0;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

/* Zeer kleine telefoons: iets kleinere serif-koppen zodat ze niet lelijk breken. */
@media (max-width: 600px) {
	.fleur-page--over .fleur-over-hero__title { font-size: 30px; }
	.fleur-page--over .fleur-over-story__title { font-size: 26px; }
	.fleur-page--over .fleur-cta-workshop__title { font-size: 28px; }
}

/* =========================================================================
   LANDSCAPE TABLET (982–1219px) — Over Fleur.
   De desktop-opmaak hierboven (@media min-width:861px) blijft in deze range
   actief; de container smalt mee (max 1280px − 2×24px gutter). We spiegelen de
   desktoplayout maar met krappere kolommen en gehalveerde verticale ruimte, en
   lossen het "foto korter dan tekst"-gat op in de 2-koloms secties. Dit blok
   laadt ná het 861px-blok → wint binnen 982–1219; ≥1220 (desktop, goedgekeurd)
   en ≤981 (mobiel, klaar) blijven ongemoeid. Alles gescoped op .fleur-page--over.
   NB: de HERO-band (aubergine ::before, hoogte = fotohoogte via min(544px,18px+41.08vw))
   is op tablet TE LAAG: de smallere tekstkolom wordt hoger dan de foto, waardoor de
   crème platte tekst ónder de band op de crème sectie-achtergrond viel en onleesbaar
   werd. Opgelost hieronder met een effen aubergine sectie.
   ========================================================================= */
@media (min-width: 982px) and (max-width: 1219px) {

	/* --- OF-HERO: op tablet een EFFEN aubergine sectie zonder de overstekende
	   ::before-band (zoals de mobiele aanpak). De sectie groeit met de (hogere)
	   tekst mee, zodat alle crème tekst op aubergine staat en leesbaar blijft. De
	   foto vult de rijhoogte (zelfde patroon als OF-story) zodat hij niet klein naast
	   de tekst hangt. --- */
	.fleur-page--over .fleur-over-hero {
		position: static;
		background: var(--fleur-aubergine);
		padding: 0;
	}
	.fleur-page--over .fleur-over-hero::before {
		display: none;
	}
	.fleur-page--over .fleur-over-hero__inner {
		position: static;
		z-index: auto;
		padding: 56px 24px;
		gap: 40px;
		align-items: center;
	}
	.fleur-page--over .fleur-over-hero__media {
		height: 100%;
		aspect-ratio: auto;
	}

	/* --- OF-STORY: minder sectiehoogte (80→56px) + krappere kolomgap (64→40px).
	   Foto naast tekst: op de smallere kolom werd de foto (vaste aspect-ratio)
	   korter dan de tekst → grijs gat. height:100% + aspect-ratio:auto laat de
	   foto exact de teksthoogte vullen (object-fit:cover crop't netjes); tekst
	   verticaal gecentreerd. --- */
	.fleur-page--over .fleur-over-story {
		padding: 56px 0;
	}
	.fleur-page--over .fleur-over-story__inner {
		gap: 40px;
		align-items: center;
	}
	.fleur-page--over .fleur-over-story__media {
		height: 100%;
		aspect-ratio: auto; /* VERPLICHT: zonder dit rekent height:100% een enorme breedte uit → overflow */
	}

	/* --- OF-WORKSHOP: op tablet vervangen we de kwetsbare crème-top + vaste-px
	   roze band (top:402px, afgestemd op de brede desktop-container) door een
	   effen roze sectie met gehalveerde padding. De 2-koloms layout blijft
	   (spiegelt desktop); de foto vult de teksthoogte zodat er geen grijs gat
	   naast valt. --- */
	.fleur-page--over .fleur-cta-workshop {
		background: var(--fleur-pink-soft);
		padding: 56px 0;
		overflow: visible;
	}
	.fleur-page--over .fleur-cta-workshop::after {
		display: none; /* geen vaste-px band-laag op tablet */
	}
	.fleur-page--over .fleur-cta-workshop__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 40px;
		align-items: center;
		padding-bottom: 0;
	}
	.fleur-page--over .fleur-cta-workshop__media {
		height: 100%;
		aspect-ratio: auto;
	}
	/* De 55px serif-titel is te groot voor de smalle tablet-kolom (breekt naar 3
	   regels); 44px sluit aan op de bestaande ≤1024-basis (40px) en oogt in balans. */
	.fleur-page--over .fleur-cta-workshop__title {
		font-size: 44px;
	}
}