/**
 * qa-contact.css — QA-correcties voor de pagina "Contact" (Figma 477:10195).
 *
 * Alles hier is gescopet met .fleur-page--contact zodat het geen andere
 * pagina raakt. Wordt automatisch ingeladen via functions.php (alle
 * assets/css/*.css). Laadt alfabetisch NA pages.css, dus overschrijft de
 * basisregels van .fleur-cta-workshop.
 *
 * Correcties:
 *  - Workshop-CTA: witte bovenkant met roze band alleen ONDERAAN (zoals de
 *    homepage "workshops"-sectie), zwarte titel, zichtbare roze eyebrow.
 *
 * (De dubbele telefoon-pil in de hero is verwijderd via de seed-content,
 *  niet via CSS.)
 */

/* =========================================================================
   WORKSHOP-CTA — crème top + roze band onderaan (zelfde patroon als Over Fleur)
   ========================================================================= */

/* Sectie zelf: crème bovenkant (= body, geen naad met de form-sectie), roze
   band als pseudo-element onderaan. De foto + tekst vallen over de band heen.
   Geen bodempadding-kier: de band loopt door tot de (aubergine) footer. */
.fleur-page--contact .fleur-cta-workshop {
	position: relative;
	background: var(--fleur-cream);
	padding: 72px 0 0;              /* geen bodempadding: de band loopt door tot de footer */
	overflow: hidden;
}
.fleur-page--contact .fleur-cta-workshop::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 353px;                     /* roze band start ná de 2e regel platte tekst (Figma:
	                                   eyebrow + kop + 2 regels body op crème). Vaste px
	                                   want de sectiehoogte varieert. */
	background: var(--fleur-pink-soft);
	z-index: 0;
}

/* Inhoud boven de band houden. Tekstkolom iets breder + kleinere gap zodat
   "Van chocolade liefhebber" op regel 1 past (Figma 520:4698, 55px DM Serif).
   padding-bottom = roze ruimte onder de knop vóór de footer. */
.fleur-page--contact .fleur-cta-workshop__inner {
	position: relative;
	z-index: 1;
	align-items: center;
	grid-template-columns: minmax(0, 1.13fr) minmax(0, 0.87fr);
	gap: 48px;
	padding-bottom: 96px;
}

/* Eyebrow: zacht roze #f6bddd (Figma 520:4700), niet het diepere roze #e06283. */
.fleur-page--contact .fleur-cta-workshop .fleur-eyebrow--pink {
	color: var(--fleur-pink-soft);
}

/* Titel + accentwoord + platte tekst ZWART (Figma: text-black — ook
   "liefhebber" is zwart cursief, niet roze). */
.fleur-page--contact .fleur-cta-workshop__title,
.fleur-page--contact .fleur-cta-workshop__title em,
.fleur-page--contact .fleur-cta-workshop__body {
	color: #000;
}
.fleur-page--contact .fleur-cta-workshop__title em {
	font-style: italic;
}

/* CTA-pil "Plan je workshop!" exact op Figma-maat (270×53, tekst 14px): de pil
   was te SMAL waardoor de tekst te groot oogde — verbreed de pil (min-width),
   net als op de eerder aangepaste knoppen. */
.fleur-page--contact .fleur-cta-workshop .button.fleur-btn--dark {
	box-sizing: border-box;
	min-width: 270px;
	max-width: 100%;
	height: 53px;
	padding-block: 0;
}

/* Geen crème kier tussen de roze band en de aubergine footer. */
#site-main.fleur-page--contact + .fleur-footer {
	margin-top: 0;
}

/* =========================================================================
   MOBIEL (≤981px) — Contact, WORKSHOP-CTA-band.
   De workshop-CTA hierboven gebruikt geen media-query, dus de roze ::after-band
   (vaste top:353px) is óók op mobiel actief en valt daar scheef. We zetten hem
   op mobiel om naar een effen roze sectie en stapelen in 1 kolom.
   (De contact-HERO + het formuliergrid worden op mobiel afgehandeld in
   spec-over-contact.css — dat laadt ná dit bestand en zou hero-regels hier
   anders overschrijven.) Raakt geen desktopregel (≥982px identiek).
   ========================================================================= */
@media (max-width: 981px) {
	/* --- WORKSHOP-CTA: effen roze sectie i.p.v. de vaste-px ::after-band; 1 kolom.
	   Minder witruimte BOVEN de tekst ("Van chocolade liefhebber naar expert"):
	   top-padding 48→8px (de titel heeft geen eigen top-marge, dus dit is de enige
	   ruimte boven de kop). Alleen contact-gescoped, dus Over Fleur/FAQ (eigen
	   scoped regels) blijven ongemoeid. */
	.fleur-page--contact .fleur-cta-workshop {
		background: var(--fleur-pink-soft);
		padding: 8px 0 48px;
		overflow: visible;
	}
	.fleur-page--contact .fleur-cta-workshop::after {
		display: none;
	}
	.fleur-page--contact .fleur-cta-workshop__inner {
		grid-template-columns: 1fr;
		gap: 28px;
		align-items: stretch;
		padding-bottom: 0;
	}
	.fleur-page--contact .fleur-cta-workshop__title { font-size: 32px; }

	/* CTA-pil volledige breedte binnen de kolom. */
	.fleur-page--contact .fleur-cta-workshop .button.fleur-btn--dark {
		min-width: 0;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

@media (max-width: 600px) {
	.fleur-page--contact .fleur-cta-workshop__title { font-size: 28px; }
}

/* =========================================================================
   LANDSCAPE TABLET (982–1219px) — Contact.
   De desktop-opmaak (hero-2-kaart-naad + workshop-::after-band) blijft in deze
   range actief; de container smalt mee (max 1280px − 2×24px gutter). We spiegelen
   de desktoplayout met gehalveerde ruimte en lossen het "foto korter dan tekst"-
   gat op. Laadt ná de desktopregels in dit bestand → wint binnen 982–1219; ≥1220
   en ≤981 blijven ongemoeid. Alles gescoped op .fleur-page--contact.
   ========================================================================= */
@media (min-width: 982px) and (max-width: 1219px) {

	/* --- HERO: de 2-kaart-naad blijft (1fr 1fr, gap 0, align stretch → foto
	   stretcht al mee met de tekstkaart, dus geen apart hoogtefix nodig). Alleen
	   iets minder sectie-top (56→48px) en kaartpadding zodat het compacter oogt
	   en de introzin wat meer ademruimte krijgt op de smallere kolom. --- */
	.fleur-page--contact .fleur-contact-hero {
		padding: 48px 0 0;
	}
	.fleur-page--contact .fleur-contact-hero__card {
		padding: 44px 40px 48px;
	}

	/* --- FORM-sectie: minder witruimte boven "Neem contact met ons op" (64→48px).
	   Het 2-koloms veldgrid blijft (past comfortabel binnen ±930–1170px, geen
	   overflow), dus qa-forms.css heeft hier geen aparte tablet-regels nodig. --- */
	.fleur-page--contact .fleur-contact-form-section {
		padding: 48px 0 40px;
	}

	/* --- WORKSHOP-CTA: zelfde aanpak als Over Fleur — effen roze sectie i.p.v.
	   de vaste-px ::after-band (top:353px, op de brede desktop afgestemd), met
	   gehalveerde padding, 2 gelijke kolommen en een foto die de teksthoogte
	   vult (geen grijs gat). --- */
	.fleur-page--contact .fleur-cta-workshop {
		background: var(--fleur-pink-soft);
		padding: 56px 0;
		overflow: visible;
	}
	.fleur-page--contact .fleur-cta-workshop::after {
		display: none; /* geen vaste-px band-laag op tablet */
	}
	.fleur-page--contact .fleur-cta-workshop__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 40px;
		align-items: center;
		padding-bottom: 0;
	}
	.fleur-page--contact .fleur-cta-workshop__media {
		height: 100%;
		aspect-ratio: auto; /* VERPLICHT bij height:100% (anders enorme breedte → overflow) */
	}
	/* 55px serif-titel is te groot voor de smalle tablet-kolom; 44px sluit aan op
	   de ≤1024-basis (40px) en oogt in balans. */
	.fleur-page--contact .fleur-cta-workshop__title {
		font-size: 44px;
	}
}