/* ==========================================================================
   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.
   ========================================================================== */

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