/* ==========================================================================
   Patty Bakker — het bruine CTA-paneel onderaan een pagina
   ==========================================================================
   Bijna elke pagina sluit af met hetzelfde blok: bruin vlak, kopje in
   perzik, titel, een zin en twee knoppen. Het stond in ZES paginabestanden
   en die waren in twee families uit elkaar gegroeid:

     inschrijven / interesse    gap 24, titel vast op 34px, tekst max 520px
     verwachte-nestjes

     werkwijze / over-ons       gap 22, titel clamp(30-54px), tekst max 760px
     dekbegeleiding

   Op /verwachte-nestjes/ ging het daardoor ook echt mis: de sectie zette
   `.pb-nest-contact-section .h2{color:var(--brown)}` en die regel staat
   verderop in hetzelfde bestand dan `.pb-cta-panel .h2{color:#fff}`. Even
   zwaar, dus won de laatste - bruine titel op een bruin vlak.

   Vanaf nu bepaalt dit bestand hoe het paneel eruitziet. Het laadt na de
   paginabestanden. De BREEDTE blijft wel per pagina: de ene pagina houdt
   1140px aan, de andere 1180px, en dat hoort bij de rest van die pagina.

   /reviews/ had een eigen slotblok (.pb-rev-slot): licht, gecentreerd, met
   een lijntje eromheen. Dat staat hier ook in, zodat die pagina hetzelfde
   afsluit als de rest.
   ========================================================================== */

.pb-main .pb-cta-panel,
.pb-main .pb-rev-slot{
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 24px;
	align-items: center;
	padding: 34px 38px;
	border: 0;
	border-radius: var(--r-lg);
	background: var(--brown);
	color: #fff;
	text-align: left;
}

/* Het kopje boven de titel. Twee namen, want de ene pagina gebruikt .eyebrow
   en de andere .hero-eyebrow.light. */

.pb-main .pb-cta-panel .eyebrow,
.pb-main .pb-cta-panel .hero-eyebrow.light{
	color: #f1c7aa;
	background: transparent;
}

.pb-main .pb-cta-panel h2,
.pb-main .pb-cta-panel .h2,
.pb-main .pb-rev-slot h2,
.pb-main .pb-rev-slot .h2{
	margin: 0 0 10px;
	color: #fff;
	font-family: Fraunces, Georgia, serif;
	font-size: clamp(26px, 3vw, 36px);
	font-weight: 700;
	line-height: 1.06;
	letter-spacing: -.03em;
}

.pb-main .pb-cta-panel p,
.pb-main .pb-rev-slot p{
	margin: 0;
	max-width: 640px;
	color: #f4e9e1;
	font-size: 15px;
	line-height: 1.65;
}

/* ---- de twee knoppen ---------------------------------------------------
   Op een bruin vlak is de eerste knop wit met bruine tekst en de tweede
   alleen een witte omtrek. */

.pb-main .pb-cta-panel .hero-btn.light-btn,
.pb-main .pb-rev-knoppen .cta:not(.ghost){
	background: #fff;
	color: var(--brown);
	border: 0;
	box-shadow: none;
}
.pb-main .pb-cta-panel .hero-btn.light-btn:hover,
.pb-main .pb-rev-knoppen .cta:not(.ghost):hover{
	background: #f4e9e1;
}

.pb-main .pb-cta-panel .hero-btn.light-ghost,
.pb-main .pb-rev-knoppen .cta.ghost{
	background: transparent;
	border: 1px solid rgba(255, 255, 255, .4);
	color: #fff;
	box-shadow: none;
}
.pb-main .pb-cta-panel .hero-btn.light-ghost:hover,
.pb-main .pb-rev-knoppen .cta.ghost:hover{
	background: rgba(255, 255, 255, .12);
	border-color: rgba(255, 255, 255, .6);
	color: #fff;
}

/* ---- /reviews/ ---------------------------------------------------------
   Daar staan de titel, de zin en de knoppenrij als drie broers en zussen
   naast elkaar, terwijl het paneel elders een tekstblok en een knoppenrij
   heeft. Met een expliciete plaatsing in het raster komt het op hetzelfde
   neer: tekst links onder elkaar, knoppen rechts ernaast. */

.pb-main .pb-rev-slot{
	width: min(1140px, 100%);
	margin: 0 auto;
}
.pb-main .pb-rev-slot > h2{ grid-column: 1; grid-row: 1 }
.pb-main .pb-rev-slot > p { grid-column: 1; grid-row: 2 }
.pb-main .pb-rev-slot > .pb-rev-knoppen{
	grid-column: 2;
	grid-row: 1 / span 2;
	justify-content: flex-end;
	margin-top: 0;
}

/* ==========================================================================
   MOBIEL
   ========================================================================== */

@media (max-width:767px){
	.pb-main .pb-cta-panel,
	.pb-main .pb-rev-slot{
		grid-template-columns: 1fr;
		gap: 18px;
		padding: 24px 20px;
	}
	.pb-main .pb-rev-slot > h2,
	.pb-main .pb-rev-slot > p,
	.pb-main .pb-rev-slot > .pb-rev-knoppen{
		grid-column: 1;
		grid-row: auto;
	}
	.pb-main .pb-rev-slot > .pb-rev-knoppen{ justify-content: stretch }

	/* Twee knoppen naast elkaar zijn op een telefoon allebei te smal. */
	.pb-main .pb-cta-panel .pb-btn-row,
	.pb-main .pb-rev-knoppen{ flex-direction: column }
	.pb-main .pb-cta-panel .hero-btn,
	.pb-main .pb-rev-knoppen .cta{ width: 100% }
}