/* =====================================================================
   QA-fixes FAQ-pagina (frame 477:10488). ALLE regels gescopet met
   .fleur-page--faq zodat ze geen andere pagina raken. Overschrijft waar
   nodig pages.css (die bare .fleur-faq* selectors gebruikt).
   ===================================================================== */

/* ---------------------------------------------------------------------
   FIX 1 — HERO: titel bovenaan, afbeelding volle containerbreedte eronder
   die onder de aubergine band uitsteekt. Maten 1:1 op Figma (520:4766):
   band 316px hoog, titel-top 66px, titel→beeld 12px, beeld 337px hoog en
   174px onder de band uitstekend, beeld→FAQ 56px.
   De aubergine band is een ::before met VASTE hoogte, losgekoppeld van het
   beeld — zo steekt het beeld eronder uit zonder overtollige witruimte
   onder de titel (de oude translateY-hack duwde het beeld te ver omlaag).
   --------------------------------------------------------------------- */
.fleur-page--faq .fleur-faq-hero {
	position: relative;
	background: transparent;
	padding: 66px 0 56px;
	overflow: visible;
}
.fleur-page--faq .fleur-faq-hero::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 316px;
	background: var(--fleur-aubergine);
	z-index: 0;
}
.fleur-page--faq .fleur-faq-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 1367px;
	padding-bottom: 0;
}
.fleur-page--faq .fleur-faq-hero__title {
	font-family: var(--fleur-font-serif);
	font-weight: 400;
	font-style: normal;
	color: var(--fleur-cream);
	font-size: clamp(34px, 3.2vw, 50px);
	line-height: 1.5;
	margin: 0 0 12px;
}
/* Beeld: vult de volledige containerbreedte, steekt onder de band uit. */
.fleur-page--faq .fleur-faq-hero__bg {
	position: relative;
	max-width: none;
	width: 100%;
	margin: 0;
	height: 337px;
	border-radius: 6px;
	overflow: hidden;
	transform: none;
	background: #2f262b;
}
.fleur-page--faq .fleur-faq-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.fleur-page--faq .fleur-faq-hero__bg::after { content: none; }
/* Hero levert zelf al de 56px onder het beeld; FAQ start direct daarna. */
.fleur-page--faq .fleur-faq { padding-top: 0; }

/* ---------------------------------------------------------------------
   FIX 4 — ACCORDEON-ICOON: gevulde aubergine cirkel met witte "+"
   (was: dun kaal "+")
   --------------------------------------------------------------------- */
.fleur-page--faq .fleur-faq__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	flex: 0 0 28px;
	border-radius: 50%;
	background: var(--fleur-aubergine);
	color: var(--fleur-cream);
	transition: transform .2s ease;
}
.fleur-page--faq .fleur-faq__icon svg {
	width: 14px;
	height: 14px;
}
.fleur-page--faq .fleur-faq__icon svg path { stroke: currentColor; }
.fleur-page--faq .fleur-faq__item[open] .fleur-faq__icon { transform: rotate(45deg); }

/* ---------------------------------------------------------------------
   FIX 2 — BELEVING: aubergine band, tekst links + foto rechts.
   Spiegelt de homepage-"beleving"-sectie (home.css .fleur-beleving).
   --------------------------------------------------------------------- */
.fleur-page--faq .fleur-faq-beleving { background: var(--fleur-aubergine); }
.fleur-page--faq .fleur-faq-beleving__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
	padding-top: 90px;
	padding-bottom: 90px;
}
.fleur-page--faq .fleur-faq-beleving__eyebrow {
	font-family: var(--fleur-font-sans);
	font-weight: 700;
	font-size: 16px;
	letter-spacing: .06em;
	text-transform: uppercase;
	margin: 0 0 12px;
	color: #f6bddd; /* lichte roze uit het design (var --fleur-pink-light is .fleur-home-scoped) */
}
.fleur-page--faq .fleur-faq-beleving__title {
	font-family: var(--fleur-font-serif);
	font-weight: 400;
	color: var(--fleur-cream);
	font-size: clamp(34px, 4vw, 55px);
	line-height: 1.1;
	margin: 0 0 22px;
}
.fleur-page--faq .fleur-faq-beleving__title em { font-style: italic; }
.fleur-page--faq .fleur-faq-beleving__text {
	font-size: 16px;
	line-height: 1.9;
	color: var(--fleur-cream);
	margin: 0 0 30px;
	max-width: 560px;
}
.fleur-page--faq .fleur-faq-beleving__btn {
	background: transparent;
	color: var(--fleur-cream);
	border: 2px solid var(--fleur-cream);
	text-transform: uppercase;
	letter-spacing: .04em;
}
.fleur-page--faq .fleur-faq-beleving__btn:hover {
	background: var(--fleur-cream);
	color: var(--fleur-aubergine);
	filter: none;
}
.fleur-page--faq .fleur-faq-beleving__media {
	aspect-ratio: 572 / 484;
	border-radius: 8px;
	background: #2c2024 center/cover no-repeat;
}

/* ---------------------------------------------------------------------
   FIX 3 — geen grijze kier tussen het roze workshop-CTA-blok (laatste
   sectie) en de aubergine footer. De globale .fleur-footer heeft
   margin-top:64px (footer.css) die hier de body-achtergrond laat
   doorschemeren; het roze blok moet vlak tegen de footer aansluiten.
   Zelfde patroon als home/bonbons/bedankt.
   --------------------------------------------------------------------- */
.fleur-page--faq + .fleur-footer { margin-top: 0; }

/* ---------------------------------------------------------------------
   Responsief: beleving stapelt op smalle schermen.
   --------------------------------------------------------------------- */
@media (max-width: 900px) {
	.fleur-page--faq .fleur-faq-beleving__inner {
		grid-template-columns: 1fr;
		gap: 32px;
		padding-top: 56px;
		padding-bottom: 56px;
	}
	.fleur-page--faq .fleur-faq-beleving__media { min-height: 300px; }
	.fleur-page--faq .fleur-faq-hero { padding: 48px 0 40px; }
	.fleur-page--faq .fleur-faq-hero::before { height: 260px; }
	.fleur-page--faq .fleur-faq-hero__bg { height: 240px; }
}

/* =========================================================================
   MOBIEL (≤981px) — telefoon-layout voor de FAQ-pagina. Komt ná het
   900px-blok hierboven zodat het bij ≤900px wint op gelijke specificiteit;
   de waarden sluiten daar netjes op aan (dit blok dekt óók 901–981px, dat
   het 900px-blok niet raakte). Beleving stapelt al via ≤900; hier de hero,
   de accordeon en de intro-kop temmen. Gescoped op .fleur-page--faq.
   ========================================================================= */
@media (max-width: 981px) {
	/* HERO: aubergine band + brede foto compacter. De ::before-band en het
	   beeld hebben op desktop vaste hoogtes (316/337px); hier verkleinen we ze
	   en maken het beeld responsief via aspect-ratio zodat het niet te hoog
	   wordt op smalle schermen. */
	.fleur-page--faq .fleur-faq-hero { padding: 44px 0 36px; }
	.fleur-page--faq .fleur-faq-hero::before { height: 240px; }
	.fleur-page--faq .fleur-faq-hero__title {
		font-size: clamp(28px, 7vw, 38px);
		line-height: 1.2;
		margin-bottom: 16px;
	}
	.fleur-page--faq .fleur-faq-hero__bg {
		height: auto;
		aspect-ratio: 16 / 10;
	}

	/* BELEVING: één kolom + full-width knop (stapelen komt al uit ≤900,
	   hier de titel/media consistent maken en de knop vullen). */
	.fleur-page--faq .fleur-faq-beleving__inner {
		grid-template-columns: 1fr;
		gap: 32px;
		padding-top: 20px;   /* minder witruimte boven "Van chocolade liefhebber…" */
		padding-bottom: 48px;
	}
	.fleur-page--faq .fleur-faq-beleving__title { font-size: clamp(28px, 7vw, 40px); }
	.fleur-page--faq .fleur-faq-beleving__text { max-width: none; }
	.fleur-page--faq .fleur-faq-beleving__media {
		min-height: 0;
		aspect-ratio: 16 / 11;
	}
	.fleur-page--faq .fleur-faq-beleving__btn { display: block; width: 100%; text-align: center; }

	/* ACCORDEON: items zijn al full-width; compactere padding + iets kleinere
	   groepskoppen zodat lange vragen netjes wrappen binnen de 24px-gutter. */
	.fleur-page--faq .fleur-faq { padding-bottom: 36px; }
	.fleur-page--faq .fleur-faq__group { margin-bottom: 40px; }
	.fleur-page--faq .fleur-faq__group:last-child { margin-bottom: 0; }
	.fleur-page--faq .fleur-faq__group-title { font-size: clamp(22px, 5.5vw, 26px); }
	.fleur-page--faq .fleur-faq__q { padding: 14px 20px; }
	.fleur-page--faq .fleur-faq__a { padding: 0 20px 18px; }

	/* Workshop-CTA "Van chocolade liefhebber naar expert…": minder witruimte
	   boven de kop (de gedeelde .fleur-cta-workshop heeft 56px top op mobiel). */
	.fleur-page--faq .fleur-cta-workshop { padding: 24px 0 44px; }

	/* Reviews-blok: op FAQ iets MÉÉR lucht boven/onder. Het gedeelde .fleur-rv
	   staat globaal op 14px (goed op de meeste pagina's), maar hier oogde dat te
	   krap tussen de aubergine beleving-band en de roze workshop-CTA. Alleen
	   FAQ-gescopet → andere pagina's houden hun compacte global. */
	.fleur-page--faq .fleur-rv { padding: 30px 0 30px; }
}

/* =========================================================================
   LANDSCAPE TABLET (982–1219px) — FAQ. De desktoplayout blijft intact
   (2-koloms beleving, brede hero, full-width accordeon), maar de grote
   verticale witruimtes worden ±gehalveerd (feedback homepage-ronde: op een
   tablet voelen de 56–90px-banden te ruim). Gescoped op .fleur-page--faq;
   alle regels strikt binnen 982–1219 zodat mobiel (≤981) en desktop (≥1220)
   onaangeroerd blijven.
   ========================================================================= */
@media (min-width: 982px) and (max-width: 1219px) {
	/* BELEVING: krappere gutter (64→40) + minder band-padding (90→56). De foto
	   is een background-div met vaste aspect-ratio; op de smallere kolom wordt
	   die korter dan de tekstkolom → scheve uitlijning. Feedback B: ratio los +
	   de foto de volledige rijhoogte laten vullen (align-self:stretch) zodat
	   foto en tekst even hoog zijn. min-height houdt 'm representatief als de
	   tekst kort is. */
	.fleur-page--faq .fleur-faq-beleving__inner {
		gap: 40px;
		padding-top: 56px;
		padding-bottom: 56px;
	}
	.fleur-page--faq .fleur-faq-beleving__media {
		aspect-ratio: auto;
		align-self: stretch;
		min-height: 380px;
	}

	/* ACCORDEON: minder onderruimte vóór de aubergine beleving-band (72→48).
	   (De bovenkant blijft 0 uit FIX 1: de hero levert die ruimte zelf al.) */
	.fleur-page--faq .fleur-faq { padding-bottom: 48px; }

	/* Gedeelde banden onderaan compacter op tablet: workshop-CTA (72→48) en het
	   reviews-blok (basis 56/64 → ~halveren). FAQ-gescopet zodat andere
	   pagina's hun eigen ritme houden. */
	.fleur-page--faq .fleur-cta-workshop { padding: 48px 0; }
	.fleur-page--faq .fleur-rv { padding: 28px 0 32px; }
}