/* ==========================================================================
   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;
}

/* De knoppenrij.

   Deze regel stond alleen in pb-interesse.css en pb-inschrijven.css. Op een
   pagina die die twee niet laadt — /trimsalon/ bijvoorbeeld — was .pb-btn-row
   dus een gewone div, stonden de twee knoppen onder elkaar, en werd de
   rechterkolom van het raster te smal berekend. De knoppen staken dan buiten
   het paneel.

   Hij hoort hier: de knoppenrij is onderdeel van dit paneel, en dit bestand
   laadt overal waar het paneel staat. De twee paginabestanden mogen hem
   houden, het is dezelfde opgave. */

.pb-main .pb-cta-panel .pb-btn-row,
.pb-main .pb-rev-slot .pb-btn-row{
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 0;
}

/* 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% }
}