/* ==========================================================================
   Patty Bakker — genummerde stappen in een kader
   ==========================================================================
   Op vier pagina's staat hetzelfde patroon: een rijtje kaders met een cijfer,
   een kop en een zin. Ze hadden vier verschillende cijfers:

     /over-ons/            oranje bolletje van 36px     (span)
     /werkwijze/           GEEN bolletje - het cijfer is daar een <div> en de
     /interesse-in-een-pup/ regel zocht een <span>, dus stond er een kaal
                           zwart cijfertje
     /voor-fokkers/        stappen: wel een bolletje
                           kernwaarden: "01"…"04" als los oranje tekstje
     /gastgezin-worden/    oranje bolletje (via .pb-gz-step .num)

   Nu overal hetzelfde: het cijfer in een oranje bolletje, ongeacht of het in
   de opmaak een <span> of een <div> is. Vandaar `> :first-child` in plaats
   van een tagnaam - in al deze kaders staat het cijfer vooraan.
   ========================================================================== */

/* --------------------------------------------------------------------------
   De kolomindeling
   --------------------------------------------------------------------------
   Deze stond twee keer, woord voor woord hetzelfde, in pb-werkwijze.css en
   pb-over-ons.css. Op een pagina die geen van beide laadt viel er dus geen
   raster over de kaarten heen en stonden ze onder elkaar over de volle
   breedte: hoge blokken met een bolletje ver van de kop af. Zo stond het op
   /trimsalon/.

   De indeling hoort bij dit onderdeel, en dit bestand laadt overal waar de
   stappen staan. De twee paginabestanden mogen hun kopie houden; het is
   dezelfde opgave, dus er verandert daar niets.

   Drie kolommen is de maat die de andere pagina's aanhouden. Heb je vier
   stappen, dan staat er één alleen op de tweede rij; zet in dat geval de
   klasse `pb-stappen-2` op de sectie, dan worden het er twee naast elkaar.
   -------------------------------------------------------------------------- */

.pb-main .pb-step-list{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	width: min(1180px, 100%);
	max-width: 1180px;
	margin: 0 auto;
}

.pb-main .pb-stappen-2 .pb-step-list{
	grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) and (max-width: 1024px){
	.pb-main .pb-step-list,
	.pb-main .pb-stappen-2 .pb-step-list{
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px){
	.pb-main .pb-step-list,
	.pb-main .pb-stappen-2 .pb-step-list{
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------------
   Het bolletje
   -------------------------------------------------------------------------- */

.pb-main .pb-step-list > article > :first-child,
.pb-main .pb-step-num,
.pb-main .pb-fk2-step .pb-fk2-num,
.pb-main .pb-fk2-value .pb-fk2-num,
.pb-main .pb-gz-step .num{
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	margin: 0 0 14px;
	padding: 0;
	border-radius: 50%;
	background: var(--accent);
	color: #fff;
	font-family: Manrope, system-ui, sans-serif;
	font-size: 13px;
	font-weight: 900;
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
}

/* --------------------------------------------------------------------------
   Het kader eromheen
   --------------------------------------------------------------------------
   De maten liepen uiteen van 22px binnenmarge met hoekstraal 16 tot 24px met
   hoekstraal 16. Klein verschil, maar naast elkaar zie je het.
   -------------------------------------------------------------------------- */

.pb-main .pb-step-list > article,
.pb-main .pb-fk2-step,
.pb-main .pb-fk2-value,
.pb-main .pb-gz-step{
	display: flex;
	flex-direction: column;
	position: relative;
	min-width: 0;
	padding: 22px;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--paper, #fffaf5);
}

/* De kernwaarden op /voor-fokkers/ staan in een sectie met dezelfde tint als
   de kaart; daar moet de kaart juist lichter zijn, anders zie je hem niet. */
.pb-main .pb-fk2-soft .pb-fk2-value{ background: var(--paper, #fffaf5) }

/* --------------------------------------------------------------------------
   Kop en tekst in de kaart
   -------------------------------------------------------------------------- */

.pb-main .pb-step-list > article h3,
.pb-main .pb-fk2-step h3,
.pb-main .pb-fk2-value h3,
.pb-main .pb-gz-step h3{
	margin: 0 0 9px;
	color: var(--brown);
	font-family: Fraunces, Georgia, serif;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -.02em;
}

.pb-main .pb-step-list > article p,
.pb-main .pb-fk2-step p,
.pb-main .pb-fk2-value p,
.pb-main .pb-gz-step p{
	margin: 0;
	color: var(--muted);
	font-size: 14.5px;
	line-height: 1.64;
}

/* Een link onderin blijft onderaan staan, ook als de ene kaart meer tekst
   heeft dan de andere. */
.pb-main .pb-step-list > article .step-link,
.pb-main .pb-step-list > article .pb-step-link{
	align-self: flex-start;
	margin-top: auto;
	padding-top: 14px;
	color: var(--brown);
	font-size: 13px;
	font-weight: 800;
}

/* --------------------------------------------------------------------------
   MOBIEL
   -------------------------------------------------------------------------- */

@media (max-width:767px){
	.pb-main .pb-step-list > article,
	.pb-main .pb-fk2-step,
	.pb-main .pb-fk2-value,
	.pb-main .pb-gz-step{
		min-height: 0;
		padding: 18px;
	}
	.pb-main .pb-step-list > article h3,
	.pb-main .pb-fk2-step h3,
	.pb-main .pb-fk2-value h3,
	.pb-main .pb-gz-step h3{ font-size: 20px }
}