/**
 * qa-workshops.css — QA-fixes voor de Workshops-pagina zodat LOCAL 1:1 het
 * Figma-ontwerp (477:9898) volgt. Alle regels gescoped met .fleur-page--workshop
 * zodat ze (a) alleen op Workshops gelden en (b) qua specificiteit winnen van de
 * basisregels in pages.css/workchoc.css, ongeacht enqueue-volgorde.
 *
 * Fix 1 — Quote: lichte (bijna witte) tekst op de roze band + één groot,
 *          lichtroze aanhalingsteken bovenaan, gecentreerd (ipv klein donker).
 * Fix 2 — Galerij: de roze band loopt door achter de bovenkant van de 3 foto's
 *          (foto's overlappen de roze→lichte grens, ~halverwege).
 * Fix 3 — Hero: bredere foto + breder tekstblok, verticaal gecentreerd, zodat
 *          de introtekst naar ~4 regels afbreekt zoals in het ontwerp.
 */

/* ======================= Fix 1 — Quote (tekst + teken) ================== */

/* Tekst licht/bijna wit op de roze band (ipv donker aubergine). */
.fleur-page--workshop .fleur-ws-quote__text {
	color: #fff;
	max-width: 940px;      /* ontwerp: tekstblok ~928px breed, gecentreerd */
	margin: 0 auto;
}

/* Eén groot lichtroze aanhalingsteken, gecentreerd boven de tekst.
   Ontwerp: rose-roze #f3aece (band = #f6bddd), zichtbare hoogte ~73px. */
.fleur-page--workshop .fleur-ws-quote__mark {
	display: block;
	text-align: center;
	font-family: var(--fleur-font-serif);
	font-size: 140px;
	line-height: 1;
	height: 78px;          /* toont enkel de bovenkant (de haakjes) van het glyph */
	overflow: hidden;
	color: #f3aece;
	margin: 0 0 44px;
}

/* ======================= Fix 2 — Galerij overlapt roze band ============= */

/* De galerij is transparant en wordt omhoog getrokken zodat de bovenkant van
   de foto's over de roze band valt; de onderkant staat op de crème pagina-bg.
   Negatieve marge ~= helft van de fotohoogte -> ~50% overlap zoals ontwerp. */
.fleur-page--workshop .fleur-ws-gallery {
	background: transparent;
	position: relative;
	z-index: 1;
	margin-top: -190px;    /* trek galerij omhoog de roze band in */
	padding-top: 0;
	padding-bottom: 72px;
}

/* Extra onderruimte op de roze band zodat er genoeg roze is om de bovenkant
   van de opgetrokken foto's te vullen. */
.fleur-page--workshop .fleur-ws-quote {
	padding-bottom: 260px; /* 190px overlap + ~70px roze-marge boven de foto's */
}

/* ======================= Fix 3 — Hero: foto steekt uit de band ========== */

/* De band heeft GEEN onderpadding: de foto is hoger dan de band en steekt met
   z'n onderste ~kwart in de crème sectie eronder (ontwerp 520:4538: foto
   698×419 op top-299, band 520:4466 loopt 220→607 → ~111px overlap). */
.fleur-page--workshop .fleur-ws-hero {
	padding: 72px 0 0;
	overflow: visible;
}

/* Bredere content dan de standaard 1280-container: ontwerp spant ~1376px.
   Asymmetrisch: tekstkolom smaller dan de (bredere) fotokolom. Boven-uitgelijnd
   zodat titel + foto bovenaan de band beginnen (ontwerp). */
.fleur-page--workshop .fleur-ws-hero__inner {
	max-width: 1420px;
	grid-template-columns: minmax(0, 628fr) minmax(0, 698fr);
	gap: 50px;
	align-items: start;
}

/* Titel iets lager t.o.v. de bovenrand, gelijk aan het ontwerp. */
.fleur-page--workshop .fleur-ws-hero__text {
	padding-top: 20px;
}

/* Introtekst mag de volledige (bredere) tekstkolom vullen -> ~4 regels. */
.fleur-page--workshop .fleur-ws-hero__intro {
	max-width: none;
}

/* Foto op ontwerpverhouding (698×419). De negatieve ondermarge trekt de band-
   onderkant omhoog terwijl de foto zelf blijft staan → de onderkant steekt in
   de crème sectie eronder (zie form-section padding-top die 'm vrijhoudt). */
.fleur-page--workshop .fleur-ws-hero__media {
	aspect-ratio: 698 / 419;
	align-self: start;
	margin-bottom: -110px;
}

/* ======================= Fix 4 — Formulier: strak verticaal ritme ======= */

/* Ruime bovenpadding houdt de uitstekende hero-foto vrij en plaatst de
   "Plan je workshop!"-titel op ontwerphoogte (~150px onder de band).
   Onderpadding = 56px: exact de tussenruimte knop → roze band uit het ontwerp
   (voorheen 64px + een verdwaalde <p>-margin gaven ~80px witruimte). */
.fleur-page--workshop .fleur-ws-form-section {
	padding-top: 150px;
	padding-bottom: 56px;
}

/* Velden 1:1 met ontwerp: 53px hoog (padding 15px i.p.v. 18px). */
.fleur-page--workshop .fleur-form--pills input[type="text"],
.fleur-page--workshop .fleur-form--pills input[type="email"],
.fleur-page--workshop .fleur-form--pills input[type="tel"] {
	padding: 15px 30px;
}

/* Verticale tussenruimte 24px (ontwerp) i.p.v. 16px gap + 16px rijmarge = 32px.
   De losse rijmarges worden genuld; alle ruimte komt uit gap/expliciete marges. */
.fleur-page--workshop .fleur-form--pills .fleur-form__row { margin: 0; }
.fleur-page--workshop .fleur-form--pills .fleur-form__grid {
	gap: 24px 22px;
	margin-bottom: 24px;
}
.fleur-page--workshop .fleur-form--pills .fleur-form__row--full {
	margin-bottom: 24px;
}
.fleur-page--workshop .fleur-form--pills textarea {
	min-height: 179px;
}
/* Geen extra witruimte onder de knop (de <p>-basis gaf een 1em ondermarge). */
.fleur-page--workshop .fleur-form--pills .fleur-form__actions {
	margin: 0;
}

/* =====================================================================
   LIGGENDE TABLET (982–1219px) — Workshops-pagina.
   Alle regels gescoped op .fleur-page--workshop en binnen dit bereik, dus
   desktop (≥1220) en mobiel (≤981) blijven exact zoals goedgekeurd. Staat NA
   de desktop-basisregels hierboven → wint op gelijke specificiteit via
   bronvolgorde. Aanpak: desktop-layout die smaller wordt, met strakker ritme.
   ===================================================================== */
@media (min-width: 982px) and (max-width: 1219px) {
	/* --- Hero: op de smallere tabletkolom wordt de tekstkolom HOGER dan de
	   foto (vaste 698/419-ratio) → de desktop-truc "foto steekt onder de band
	   uit" klapt om in een aubergine gat ónder de foto. Daarom hier een nette
	   rechthoekige band: de foto vult de bandhoogte (height:100% +
	   aspect-ratio:auto, verplicht om overflow te voorkomen), geen uitsteek. -- */
	.fleur-page--workshop .fleur-ws-hero {
		padding: 56px 0;            /* dichte band met onder- én bovenpadding */
		overflow: hidden;
	}
	.fleur-page--workshop .fleur-ws-hero__inner {
		gap: 36px;                  /* iets krapper dan desktop (50px) */
		align-items: stretch;       /* beide kolommen even hoog → geen gat */
	}
	.fleur-page--workshop .fleur-ws-hero__title {
		font-size: 40px;            /* 50px breekt te veel af in de smalle kolom */
	}
	.fleur-page--workshop .fleur-ws-hero__media {
		align-self: stretch;
		aspect-ratio: auto;         /* MANDATORY bij height:100% → geen brede overflow */
		height: 100%;               /* foto vult de bandhoogte (nette rechthoek) */
		margin-bottom: 0;           /* geen uitstekende foto meer op tablet */
	}

	/* --- Formulier: geen uitstekende hero-foto meer om vrij te houden →
	   normale (kleinere) bovenpadding i.p.v. de 150px van desktop. ---------- */
	.fleur-page--workshop .fleur-ws-form-section {
		padding-top: 56px;
		padding-bottom: 48px;
	}

	/* --- Quote + galerij-overlap: de foto's zijn op tablet kleiner, dus de
	   ~50%-overlap opnieuw schalen. Negatieve galerij-marge ≈ halve fotohoogte
	   (3-koloms foto's ~295–374px hoog → halve ~150px). Quote-onderpadding =
	   overlap + ~50px roze marge boven de foto's. Minder witruimte dan desktop. */
	.fleur-page--workshop .fleur-ws-quote {
		padding: 56px 0 200px;      /* was 72/260 op desktop */
	}
	.fleur-page--workshop .fleur-ws-gallery {
		margin-top: -150px;         /* was -190px; halve fotohoogte op tablet */
		padding-bottom: 56px;       /* was 72px */
	}
}

/* =====================================================================
   MOBIEL (≤981px) — Workshops-pagina responsive.
   Alle regels gescoped op .fleur-page--workshop. Raakt NIETS ≥982px:
   desktop (≥1220) en liggende tablet (982–1219) blijven identiek.
   Consolideert de vroegere 980px-regels naar 981px (de theme-breakpoint,
   zie 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, geen uitstekende foto, kleinere titel --------- */
	/* Op smalle schermen weer een gewone band: geen uitstekende foto. */
	.fleur-page--workshop .fleur-ws-hero {
		padding: 48px 0;
		overflow: hidden;
	}
	.fleur-page--workshop .fleur-ws-hero__inner {
		grid-template-columns: 1fr;
		gap: 28px;
		align-items: start;
	}
	.fleur-page--workshop .fleur-ws-hero__text {
		padding-top: 0;
	}
	/* Grote serif-titel kleiner op mobiel (~34px). */
	.fleur-page--workshop .fleur-ws-hero__title {
		font-size: 34px;
		margin-bottom: 18px;
	}
	.fleur-page--workshop .fleur-ws-hero__intro {
		max-width: none;
	}
	.fleur-page--workshop .fleur-ws-hero__media {
		aspect-ratio: 16 / 10;
		margin-bottom: 0;
	}
	.fleur-page--workshop .fleur-ws-hero__media img,
	.fleur-page--workshop .fleur-ws-hero__img {
		max-width: 100%;
	}

	/* --- Formulier: normale padding + full-width knop ------------------- */
	/* Geen uitstekende foto meer om vrij te houden → normale bovenpadding.
	   Onderpadding iets kleiner (was 56px op design) voor rustiger ritme. */
	.fleur-page--workshop .fleur-ws-form-section {
		padding-top: 48px;
		padding-bottom: 48px;
	}
	/* Velden in één kolom (pages.css doet dit pas ≤860px). */
	.fleur-page--workshop .fleur-form--pills .fleur-form__grid {
		grid-template-columns: 1fr;
		gap: 16px;
		margin-bottom: 16px;
	}
	.fleur-page--workshop .fleur-form--pills .fleur-form__row--full {
		margin-bottom: 16px;
	}
	/* Verstuur-knop over de volle breedte. */
	.fleur-page--workshop .fleur-ws-form-section .fleur-form__actions {
		display: flex;
		justify-content: stretch;
	}
	.fleur-page--workshop .fleur-ws-form-section .fleur-form__actions .button {
		width: 100%;
	}

	/* --- Quote: tekst wat kleiner; extra roze onderruimte houdt de bovenste
	   helft van de galerij-marquee vast (zie galerij-margin hieronder). ---- */
	.fleur-page--workshop .fleur-ws-quote {
		/* 150px onder = roze zone die de bovenkant van de opgetrokken
		   foto-strook opvangt (~115px overlap + ~35px roze marge boven de
		   foto's), net als de ~50% overlap op desktop. */
		padding: 48px 0 150px;
	}
	.fleur-page--workshop .fleur-ws-quote__text {
		font-size: 16px;
	}
	/* Serif-aanhalingsteken kleiner zodat het niet buiten de band valt. */
	.fleur-page--workshop .fleur-ws-quote__mark {
		font-size: 96px;
		height: 54px;
		margin-bottom: 28px;
	}

	/* --- Galerij: doorlopende (infinity) marquee die ~50% in de roze band
	   steekt, net als de overlap op desktop. De strook wordt met een negatieve
	   bovenmarge omhoog getrokken zodat de bovenste ~helft van elke (vierkante)
	   foto over de roze quote-band valt en de onderste helft op de crème
	   pagina-bg staat. theme.js kloont de kinderen van [data-marquee-inner] en
	   zet .is-marquee op de sectie; de animatie hieronder laat de baan lopen. */
	.fleur-page--workshop .fleur-ws-gallery {
		position: relative;
		z-index: 1;
		overflow: hidden;
		/* Trek de foto-strook ~115px (halve fotohoogte) omhoog de roze band in. */
		margin-top: -115px;
		padding: 0 0 20px;   /* minder grijze witruimte vóór het reviews-blok */
	}
	/* Basis (vóór JS / als er te weinig foto's zijn): 2 nette kolommen, maar
	   nog steeds met de overlap-marge hierboven. */
	.fleur-page--workshop .fleur-ws-gallery__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}
	/* Marquee-modus (JS heeft .is-marquee gezet): nowrap-flexrij die -50%
	   scrollt → naadloze lus. */
	.fleur-page--workshop .fleur-ws-gallery.is-marquee .fleur-ws-gallery__grid {
		display: flex;
		flex-wrap: nowrap;
		width: max-content;
		max-width: none;
		gap: 16px;
		grid-template-columns: none;
		animation: fleur-ws-gallery-marquee 26s linear infinite;
	}
	.fleur-page--workshop .fleur-ws-gallery.is-marquee .fleur-ws-gallery__photo {
		flex: 0 0 auto;
		width: 230px;   /* vierkant (aspect-ratio 1/1) → ~230px hoog; halve
		                   hoogte ≈ 115px = de overlap-marge hierboven. */
	}
	.fleur-page--workshop .fleur-ws-gallery.is-marquee:hover .fleur-ws-gallery__grid {
		animation-play-state: paused;
	}
}

@keyframes fleur-ws-gallery-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* Zeer smalle telefoons: titel kleiner. De galerij blijft de marquee (geen
   1-koloms grid meer, want dat zou de doorlopende slider breken). */
@media (max-width: 600px) {
	.fleur-page--workshop .fleur-ws-hero__title {
		font-size: 30px;
	}
	/* Iets kleinere foto's op smalle telefoons; halve hoogte ≈ 95px → pas de
	   overlap-marge daarop aan zodat de ~50%-overlap klopt. */
	.fleur-page--workshop .fleur-ws-gallery {
		margin-top: -95px;
	}
	.fleur-page--workshop .fleur-ws-gallery.is-marquee .fleur-ws-gallery__photo {
		width: 190px;
	}
}