/**
 * spec-over-contact.css
 * Pagina-specifieke aanpassingen om Speciale momenten / Over Fleur / Contact
 * 1:1 op de LIVE-referentie (chocolateriefleur.sphdev.nl) te krijgen.
 *
 * Wordt automatisch ná pages.css ingeladen (alfabetisch + dependency op
 * fleur-child) zodat onderstaande regels de basisopmaak overschrijven.
 * Bewust gescoped op .fleur-page--momenten / --over / --contact zodat andere
 * pagina's ongemoeid blijven.
 *
 * @package FleurChild
 */

/* =========================================================================
   SPECIALE MOMENTEN
   ========================================================================= */

/* ---- SM4: hero-band met titel op één regel; de tegel-slider overlapt zó ver
   omhoog dat de kaarten ±60% op de aubergine band en ±40% op wit vallen
   (Figma 520:3941: band y220–707, tegels y446–869). --- */
.fleur-page--momenten .fleur-mom-hero {
	padding: 52px 0 300px; /* diepe onderruimte: band loopt ver door achter de tegels */
}
.fleur-page--momenten .fleur-mom-hero__inner {
	max-width: 1180px; /* breder dan 900px zodat de titel niet afbreekt */
}
.fleur-page--momenten .fleur-mom-hero__title {
	font-size: 46px;
	line-height: 1.1;
	margin: 0 0 16px;
	white-space: nowrap; /* dwingt één regel af op desktop */
}
.fleur-page--momenten .fleur-mom-hero__intro {
	max-width: 760px;
	margin-inline: auto;
}

/* Tegel-slider ver omhoog in de band trekken. Bij een container van 1232px zijn
   de kaarten ±412px hoog; -254px overlap ≈ 62% op de band (zoals Figma). */
.fleur-page--momenten .fleur-mom-cats {
	position: relative;
	z-index: 1;
	margin-top: -254px;
	padding: 0 0 40px;
}
/* Flankerende pijlen: standaard net over de kaartrand (veilig op elke breedte);
   op brede schermen volledig buiten de kaarten zoals in Figma (520:4004). */
.fleur-page--momenten .fleur-mom-cats .fleur-carousel--sides .fleur-carousel__nav--prev { left: -16px; }
.fleur-page--momenten .fleur-mom-cats .fleur-carousel--sides .fleur-carousel__nav--next { right: -16px; }
@media (min-width: 1360px) {
	.fleur-page--momenten .fleur-mom-cats .fleur-carousel--sides .fleur-carousel__nav--prev { left: -54px; }
	.fleur-page--momenten .fleur-mom-cats .fleur-carousel--sides .fleur-carousel__nav--next { right: -54px; }
}

/* Smaller: minder diepe band + overlap (tablet/mobiel tonen meer/andere per-view). */
@media (max-width: 1024px) {
	.fleur-page--momenten .fleur-mom-hero { padding: 48px 0 210px; }
	.fleur-page--momenten .fleur-mom-cats { margin-top: -170px; }
}
@media (max-width: 768px) {
	.fleur-page--momenten .fleur-mom-hero { padding: 44px 0 170px; }
	.fleur-page--momenten .fleur-mom-cats { margin-top: -130px; }
}

/* ---- SM1: Sinterklaas-productblok (kop + 2 productkaarten) ---- */
.fleur-page--momenten .fleur-mom-products {
	padding: 8px 0 64px;
}
.fleur-page--momenten .fleur-mom-products__title {
	font-family: var(--fleur-font-serif);
	font-weight: 400;
	font-size: 36px; /* Figma 520:4011 */
	line-height: 1.1;
	color: #000; /* zwart, niet aubergine (Figma 520:4011) */
	margin: 0;
}

/* De productlijst is nu de slider-track. display:flex expliciet zodat het Wint
   van WooCommerce' eigen `ul.products { display:grid }` (anders wrappen de
   kaarten naar een 2e rij i.p.v. horizontaal te scrollen). */
.fleur-page--momenten .fleur-mom-products .products {
	display: flex;
	gap: 22px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.fleur-page--momenten .fleur-mom-products .products::before,
.fleur-page--momenten .fleur-mom-products .products::after {
	content: none;
	display: none;
}

/* Kaart — herbruikt de .fleur-card-opmaak uit shop.css, hier los gescoped
   omdat de pagina geen body.woocommerce-context heeft. */
.fleur-page--momenten .fleur-mom-products li.product.fleur-card {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	display: flex;
	flex-direction: column;
	text-align: left;
	list-style: none;
}
.fleur-page--momenten .fleur-mom-products li.product.fleur-card::marker {
	content: none;
}
.fleur-page--momenten .fleur-mom-products .fleur-card__media {
	position: relative;
	display: block;
	border-radius: 5px;
	overflow: hidden;
	background: #f1eef0;
	aspect-ratio: 299 / 325;
	margin-bottom: 12px;
}
.fleur-page--momenten .fleur-mom-products .fleur-card__media a {
	display: block;
	width: 100%;
	height: 100%;
}
.fleur-page--momenten .fleur-mom-products .fleur-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .35s ease;
}
.fleur-page--momenten .fleur-mom-products .fleur-card:hover .fleur-card__media img {
	transform: scale(1.04);
}
.fleur-page--momenten .fleur-mom-products .fleur-card__media .onsale {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2; /* boven de hover-zoom van de afbeelding (transform → stacking context) */
	margin: 0;
	min-height: 0;
	min-width: 0;
	padding: 4px 12px;
	border-radius: 100px;
	background: var(--fleur-pink);
	color: #fff;
	font-family: var(--fleur-font-sans);
	font-weight: 700;
	font-size: 12px;
	line-height: 1.4;
}
.fleur-page--momenten .fleur-mom-products .fleur-card__body {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}
.fleur-page--momenten .fleur-mom-products .fleur-card__info {
	min-width: 0;
	flex: 1 1 auto;
}
.fleur-page--momenten .fleur-mom-products .woocommerce-loop-product__title {
	font-family: var(--fleur-font-serif);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.25;
	color: var(--fleur-aubergine);
	margin: 0 0 4px;
	padding: 0;
}
.fleur-page--momenten .fleur-mom-products .price {
	font-family: var(--fleur-font-sans);
	font-weight: 400;
	font-size: 14px;
	line-height: 1.3;
	color: var(--fleur-aubergine);
	margin: 0;
}
.fleur-page--momenten .fleur-mom-products .price del { opacity: .5; margin-right: 6px; font-weight: 400; }
.fleur-page--momenten .fleur-mom-products .price ins { text-decoration: none; font-weight: 600; }
.fleur-page--momenten .fleur-mom-products .fleur-card__add {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 41px;
	padding: 0;
	border-radius: 5px;
	background: var(--fleur-pink-soft);
	color: var(--fleur-cream); /* crème/wit boodschappentas-icoon (Figma 520:4028) */
	border: 0;
	margin-top: 2px;
	transition: background .15s ease, transform .15s ease;
}
.fleur-page--momenten .fleur-mom-products .fleur-card__add:hover {
	background: var(--fleur-pink);
	color: #fff;
	transform: none; /* geen lift */
	box-shadow: none; /* geen schaduw op hover (overschrijft de globale .button:hover) */
}
.fleur-page--momenten .fleur-mom-products .fleur-card__add .fleur-card__icon {
	width: 19px;
	height: 16px;
	display: block;
}
.fleur-page--momenten .fleur-mom-products .added_to_cart {
	display: block;
	font-size: 12px;
	margin-top: 6px;
	color: var(--fleur-pink);
}
.fleur-page--momenten .fleur-mom-products .fleur-card__add.loading { opacity: .6; }

/* ---- SM2: tekstblok "Speciale momenten om te vieren" — kop én platte tekst
   zwart (Figma 520:4055/4056 = #000, i.p.v. aubergine). --- */
.fleur-page--momenten .fleur-mom-block__title,
.fleur-page--momenten .fleur-mom-block__body,
.fleur-page--momenten .fleur-mom-block__body p {
	color: #000;
}

/* ---- SM3: CTA-knop "Bestel jouw chocolade op maat" — compactere tekst (14px)
   in een ruimere pil (Figma 520:4058/4059 = 342×53, tekst 14px). --- */
.fleur-page--momenten .fleur-mom-cta .button.fleur-btn--dark {
	font-size: 14px;
	padding: 18px 42px;
	letter-spacing: .01em;
}

/* ---- SM6: bredere tekstkolom zodat de CTA-kop op 2 regels breekt met
   "een passende verpakking" samen op regel 2 (Figma 520:4061 = tekstblok 659px). */
.fleur-page--momenten .fleur-mom-cta__inner {
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
	gap: 44px;
}
/* Desktop: dwing de handmatige regelafbreking af (geen extra wrap van
   "verpakking"). Op mobiel (≤860px, 1 kolom) mag hij normaal breken. */
@media (min-width: 861px) {
	.fleur-page--momenten .fleur-mom-cta__title { white-space: nowrap; }
}

/* ---- SM5: reviews-kop — "chocoladeliefhebbers" in zacht roze (#f6bddd) en de
   rest zwart (Figma 477:6405). Gescoped zodat andere pagina's ongemoeid blijven. */
.fleur-page--momenten .fleur-rv__title { color: #000; }
.fleur-page--momenten .fleur-rv__title em { color: var(--fleur-pink-soft); }

/* Mobiel: op de smalle 2-koloms productkaarten kan een lange, spatieloze
   productnaam ("Chocoladepepernotletter") niet afbreken en loopt hij ónder de
   winkelwagen-knop door (zie feedback). Laat lange woorden afbreken. Strikt
   ≤981px → desktop ongewijzigd. */
@media (max-width: 981px) {
	.fleur-page--momenten .fleur-mom-products .fleur-card__body { gap: 10px; align-items: flex-start; }
	.fleur-page--momenten .fleur-mom-products .fleur-card__info { min-width: 0; }
	.fleur-page--momenten .fleur-mom-products .woocommerce-loop-product__title {
		overflow-wrap: anywhere;
		word-break: break-word;
		hyphens: auto;
	}
}

/* =========================================================================
   OVER FLEUR
   ========================================================================= */

/* Alle Over-Fleur-regels staan nu in qa-over-fleur.css (laadt vóór dit bestand,
   maar bevat de volledige, gezaghebbende opmaak voor deze pagina). Hier bewust
   niets meer: een regel op .fleur-page--over .fleur-cta-workshop zou anders het
   band-/paddinggedrag uit qa-over-fleur.css overschrijven. */

/* =========================================================================
   CONTACT — 1:1 op Figma 520:4603 (niet de eerdere full-bleed live-variant)
   ========================================================================= */

/* ---- CT1: hero = twee even hoge kaarten binnen de container die in het midden
   strak op elkaar aansluiten (geen gat, rechte naad). Links de aubergine
   tekstkaart (buitenhoeken rond), rechts de foto (buitenhoeken rond). Inhoud
   stroomt van bovenaf (titel bovenaan), niet onderaan uitgelijnd. --- */
.fleur-page--contact .fleur-contact-hero {
	padding: 56px 0 0; /* onderruimte wordt door de form-sectie geleverd (CT2) */
}
.fleur-page--contact .fleur-contact-hero__inner {
	gap: 0;
	align-items: stretch;
	grid-template-columns: 1fr 1fr;
}
.fleur-page--contact .fleur-contact-hero__card {
	border-radius: 10px 0 0 10px;
	padding: 52px 48px 60px;   /* smallere zijpadding: de site-container (1232px) is
	                              smaller dan Figma's ~1410px, dus met 72px paste de
	                              introzin niet op één regel. */
	display: block; /* natuurlijke flow: titel bovenaan (geen flex/justify-end) */
}
.fleur-page--contact .fleur-contact-hero__intro {
	max-width: none;           /* introzin "…persoonlijk advies?" op één regel */
	margin-bottom: 40px;
}
/* Icoon-glyph wit i.p.v. aubergine (Figma: witte icoontjes in roze cirkels). */
.fleur-page--contact .fleur-contact-hero__ico {
	color: #fff;
}
.fleur-page--contact .fleur-contact-hero__media {
	border-radius: 0 10px 10px 0;
	min-height: 0; /* stretcht mee met de kaarthoogte i.p.v. vaste 360px */
	overflow: hidden;
}
.fleur-page--contact .fleur-contact-hero__media .fleur-img {
	border-radius: 0; /* naad-hoeken worden door de media-clip afgerond */
}

/* ---- CT2: extra witruimte boven "Neem contact met ons op" (Figma: ±66px
   tussen de hero-kaart en de kop), en minder ruimte ONDER het formulier vóór de
   workshop-band (Figma-gat form→workshop ≈ 172px). --- */
.fleur-page--contact .fleur-contact-form-section {
	padding: 64px 0 48px;
}

/* ---- CT3: gelijkmatige veldafstand. In het basis-grid stapelen de row-gap
   (16px) én de row-marge (16px) zich op tot 32px boven de e-mail/telefoon-rij;
   dat oogt als een gat. Eén consistente 24px-afstand (Figma) i.p.v. dubbel. --- */
.fleur-page--contact .fleur-form__grid {
	row-gap: 24px;
	margin-bottom: 24px;
}
.fleur-page--contact .fleur-form__grid .fleur-form__row {
	margin: 0;
}
.fleur-page--contact .fleur-form__row--full {
	margin: 0 0 24px;
}

/* =========================================================================
   MOBIEL (≤981px) — Contact HERO + formuliergrid.
   Dit bestand laadt als laatste van de over/contact-stylesheets (alfabetisch:
   spec > qa), dus de gezaghebbende mobiele hero-regels horen híer. De hero is
   op desktop twee naadloos aansluitende kaarten (CT1: 1fr 1fr, gap:0, naad-
   hoeken); op mobiel stapelen we naar boven-tekstkaart + onder-foto met nette
   buitenhoeken. Raakt geen desktopregel (≥982px identiek).
   ========================================================================= */
@media (max-width: 981px) {
	/* Mobiel = bonbons-hero-gevoel (.fleur-bon-hero ≤981px): één egale aubergine
	   band met genereuze padding, links de titel + verticaal gestapelde items,
	   daaronder de foto als eigen afgeronde blok (geen naad-/kaart-splitsing).
	   De hele hero-band is nu aubergine (i.p.v. een losse kaart binnen de crème
	   sectie), zoals bonbons. Desktop (≥982px) blijft de naadloze 2-kaart-layout. */
	.fleur-page--contact .fleur-contact-hero {
		background: var(--fleur-aubergine);
		padding: 40px 0 44px;
	}
	.fleur-page--contact .fleur-contact-hero__inner {
		grid-template-columns: 1fr;
		gap: 28px;
		align-items: stretch;
	}
	/* Kaart lost op in de band: geen eigen achtergrond/afronding/padding meer —
	   de sectie levert nu de aubergine + gutter (net als bonbons). */
	.fleur-page--contact .fleur-contact-hero__card {
		background: none;
		border-radius: 0;
		padding: 0;
	}
	.fleur-page--contact .fleur-contact-hero__intro {
		max-width: none;
		margin-bottom: 28px;
	}
	/* Contactrijen als nette, luchtige lijst (bonbons-USP-ritme). */
	.fleur-page--contact .fleur-contact-hero__details {
		gap: 18px;
	}
	/* Foto = eigen afgerond blok onder de tekst (alle hoeken rond), bonbons-media. */
	.fleur-page--contact .fleur-contact-hero__media {
		border-radius: 5px;
		min-height: 240px;
		overflow: hidden;
	}
	.fleur-page--contact .fleur-contact-hero__media .fleur-img {
		border-radius: 5px;
	}
	.fleur-page--contact .fleur-contact-hero__title {
		font-size: 34px;
		line-height: 1.12;
		margin-bottom: 20px;
	}

	/* Form-sectie: minder padding op mobiel. */
	.fleur-page--contact .fleur-contact-form-section {
		padding: 44px 0 40px;
	}

	/* Formuliergrid al 1-koloms (pages.css ≤860 + qa-forms.css); marges houden. */
	.fleur-page--contact .fleur-form__grid {
		row-gap: 20px;
		margin-bottom: 20px;
	}
	.fleur-page--contact .fleur-form__row--full {
		margin: 0 0 20px;
	}
}

@media (max-width: 600px) {
	.fleur-page--contact .fleur-contact-hero__title { font-size: 30px; }
	/* Kaart blijft flush in de aubergine band (bonbons-stijl): geen eigen padding. */
	.fleur-page--contact .fleur-contact-hero__card { padding: 0; }
}