/* ==========================================================================
   PX Actie
   Kop van de actiepagina: verhaal links, steunen rechts.
   Kleuren, maten en opbouw komen uit mockups/actiepagina-src/mockup.css.
   ========================================================================== */

/* Een display uit een klasse wint normaal van het hidden attribuut. Dat is hier
   niet de bedoeling: wat verborgen is, blijft verborgen. */
.px-actie [hidden] {
	display: none !important;
}


/* --------------------------------------------------------------------------
   1. Raster
   -------------------------------------------------------------------------- */

.px-actie {
	/* Het verhaal, het groepslabel en de deelknoppen delen deze breedte, zodat ze
	   onder elkaar op één lijn eindigen. Op een breed scherm is de kolom zelf
	   smaller dan deze waarde en bepaalt de kolom de breedte. Onder 1100px staat
	   alles onder elkaar en houdt deze waarde de blokken bijeen. */
	--px-actie-kolom: 44rem;
}

/* Twee kolommen: links het verhaal, rechts de gele kaart. Ze eindigen vrijwel
   gelijk, dus daaronder mag de pagina weer over de volle breedte verder. */
.px-actie__container {
	display: grid;
	/* Rechts de gele kaart: de helft van het raster, nooit smaller dan 31rem uit
	   de mockup en nooit breder dan 35rem, iets onder de kaart van de
	   landingspagina's (37,5rem). Op 1440px is dat 560px in plaats van 496px
	   (Maurits, 9 sep 2026: breder dan de mockup, maar smaller dan de lp). */
	grid-template-columns: minmax(0, 1fr) minmax(0, clamp(31rem, 50%, 35rem));
	align-items: start;
	column-gap: var(--space-d3);
	row-gap: var(--space-d2);
	max-width: var(--row-width);
	width: 100%;
	margin: var(--space-d2) auto var(--space-d3);
}

/* Voorvertoning in de bouwer buiten een actiepagina: er is geen tweede kolom om
   te vullen, dus de melding krijgt de hele breedte. */
.px-actie--leeg .px-actie__container {
	display: block;
}

.px-actie--leeg .px-actie__container p {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--text-d1);
	line-height: var(--lh-relaxed);
	color: var(--text-base);
}

.px-actie__hoofd {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-d15);
	min-width: 0;
}

.px-actie__zij {
	display: flex;
	flex-direction: column;
	gap: var(--space-d2);
	min-width: 0;
}


/* --------------------------------------------------------------------------
   2. Actievoerder
   -------------------------------------------------------------------------- */

.px-actie__persoon {
	display: flex;
	align-items: center;
	gap: var(--space-d15);
	min-width: 0;
}

.px-actie__portret {
	display: block;
	flex: none;
	width: 150px;
	height: 150px;
	border: solid 3px var(--action);
	border-radius: var(--radius-full);
	object-fit: cover;
}

/* Nog geen foto: het pakket als vervanging. Wie zich net heeft aangemeld heeft
   nog geen portret, en een leeg silhouet is een zwak begin van een actiepagina.

   Het rondje zit niet op de doos maar eromheen: een omhulsel draagt de
   achtergrond, de ring en de ronding, en de doos staat daar vrij in, zonder
   ronding en zonder eigen rand. Hoeken blijven hoeken.

   Het omhulsel neemt de maat over van de plek waar het staat (150 in de kop, 48
   in het stapeltje, 120 op een telefoon), dus de doos staat op een deel van die
   maat en niet op een vast aantal pixels. De doos is 193 bij 178, dus op 68
   procent van de binnenmaat d is hij 0,68d breed en 0,63d hoog, en ligt zijn
   hoekpunt op 0,46d van het midden. De straal is 0,5d, dus hij past overal, met
   vijf pixels lucht op 150 en anderhalve op 48. Wie de doos groter wil, houdt
   0,46 onder 0,5. */
.px-portret-pakket {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	background-color: var(--blue-light);
}

.px-portret-pakket img {
	width: 68%;
	height: auto;
	border: 0;
	border-radius: 0;
	object-fit: contain;
}

.px-actie__naam {
	display: flex;
	flex-direction: column;
	gap: var(--space-d05);
	min-width: 0;
}

/* Hetzelfde streepje dat de koppen op de site hebben (heading__divider), maar
   dan boven de rol en de naam samen. */
.px-actie__streep {
	display: block;
	width: calc(var(--text-h2) * 1.66);
	height: calc(var(--text-h2) * 0.166);
	margin-bottom: var(--space-d025);
	background-color: var(--divider-primary);
}

.px-actie__rol {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--text-body);
	font-weight: var(--weight-semibold);
	line-height: var(--lh-normal);
	color: var(--action);
}

.px-actie__titel {
	margin: 0;
}

.px-actie__tekst {
	max-width: var(--px-actie-kolom);
}


/* --------------------------------------------------------------------------
   3. Delen
   -------------------------------------------------------------------------- */

/* Extra lucht boven de deelknoppen. De blokken in deze kolom staan onderling op
   D15; delen is een nieuw onderwerp na het verhaal en het groepslabel, dus daar
   komt nog een D15 bij. */
.px-actie__acties {
	width: 100%;
	max-width: var(--px-actie-kolom);
	margin-top: var(--space-d15);
}

/* De deelknoppen stonden zonder kop onder het groepslabel en werden daardoor
   gelezen als een staartje van dat blok. Een kop maakt er een eigen onderdeel
   van. Hij is een maat kleiner dan "Steun deze actie" in de gele kaart ernaast,
   want geven blijft de eerste vraag en delen de tweede. De nav verwijst met
   aria-labelledby naar deze kop, dus een schermlezer noemt dezelfde tekst. */
.px-actie__deel-titel {
	margin: 0 0 var(--space-d1);
}

/* Drie knoppen die samen exact zo breed zijn als het groepslabel erboven. */
.px-actie .px-share {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: stretch;
	gap: var(--space-d075);
	width: 100%;
	max-width: var(--px-actie-kolom);
	margin: 0;
}

.px-actie .px-share__btn {
	justify-content: center;
	width: 100%;
}


/* --------------------------------------------------------------------------
   4. Onderdeel van actiegroep
   -------------------------------------------------------------------------- */

.px-actie-groep-label {
	display: flex;
	align-items: center;
	gap: var(--space-d125);
	width: 100%;
	max-width: var(--px-actie-kolom);
	padding: var(--space-d1) var(--space-d125);
	background-color: var(--white);
	box-shadow: var(--shadow-subtle);
}

.px-actie-groep-label__stapel {
	display: flex;
	flex: none;
	align-items: center;
}

/* Alles wat in de stapel staat is even groot en even rond: de portretten, het
   omhulsel met het pakket en het bolletje met het aantal. Daarom staan de maten
   op de kinderen van de stapel en niet op img; het pakket zit namelijk in een
   omhulsel en zijn beeld moet die ring juist niet krijgen. */
.px-actie-groep-label__stapel > * {
	width: 48px;
	height: 48px;
	border: solid 2px var(--white);
	border-radius: var(--radius-full);
	object-fit: cover;
}

.px-actie-groep-label__stapel > * + * {
	margin-left: calc(var(--space-d1) * -1);
}

.px-actie-groep-label__meer {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--blue-light);
	font-family: var(--font-display);
	font-size: var(--text-d075);
	font-weight: var(--weight-semibold);
	color: var(--navy);
}

.px-actie-groep-label__tekst {
	display: flex;
	flex-direction: column;
	gap: 0.15em;
	min-width: 0;
}

/* Donkerblauw in plaats van grijs. Het grijs is --gray-mid, en dat haalt op wit
   3,3 op 1 terwijl gewone tekst 4,5 op 1 nodig heeft; op de zandkleurige
   achtergrond zakt het naar 2,9 op 1. Donkerblauw komt uit op 8,7 op 1. */
.px-actie-groep-label__rol {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--text-d075);
	font-weight: var(--weight-medium);
	line-height: var(--lh-normal);
	color: var(--navy);
}

.px-actie-groep-label__naam {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--text-body);
	font-weight: var(--weight-semibold);
	line-height: var(--lh-snug);
	color: var(--gray-dark);
}

.px-actie-groep-label__naam a {
	color: inherit;
	text-decoration: none;
}

.px-actie-groep-label__naam a:hover {
	color: var(--action);
	text-decoration: underline;
}


/* --------------------------------------------------------------------------
   5. Steunkaart
   -------------------------------------------------------------------------- */

.px-steun {
	display: flex;
	flex-direction: column;
	gap: var(--space-d15);
	padding: var(--space-d2);
	background-color: var(--yellow);
	box-shadow: var(--shadow-elevated-fluid);
}

.px-steun__titel {
	margin: 0;
}

/* Stand */

.px-steun__stand {
	display: flex;
	flex-direction: column;
	gap: var(--space-d025);
}

/* De marge die een alinea van huis uit meekrijgt zit hier in de weg: die zette
   het bedrag ver van de balk af. De ruimte komt nu van de kaart zelf. */
.px-steun__bedrag {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-d05);
	margin: 0;
	font-family: var(--font-display);
	color: var(--gray-dark);
}

.px-steun__bedrag strong {
	font-size: var(--text-d3);
	font-weight: var(--weight-semibold);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-tight);
}

.px-steun__bedrag span {
	font-size: var(--text-d1);
	font-weight: var(--weight-medium);
}

/* De balk loopt door tot de rand van de kaart, net als de knop eronder.
   crowdfunding-public.css kapt hem af op 355 pixels; dat is een maat uit de oude
   hero-indeling die hier niets meer betekent. */
.px-steun .crowdfunding-bar-container {
	max-width: none;
	background-color: var(--white);
	border-color: var(--gray-dark);
}


/* --------------------------------------------------------------------------
   6. Donatieformulier
   Het formulier komt uit Gravity Forms. De klassen hieronder zijn de klassen die
   op de velden staan; px-donation-form-choose-amount en px-crowdfunding-doel
   bestaan al, de rest zet de beheerder per veld. De sectienaam staat er telkens
   voor, want base.css stuurt dezelfde eigenschappen aan met evenveel gewicht. */

.px-steun__formulier {
	display: flex;
	flex-direction: column;
	gap: var(--space-d15);
}

/* De onderdelen van het formulier staan los van elkaar; de velden die naast
   elkaar passen houden hun eigen, kleinere tussenruimte. */
.px-actie .px-steun .gform_fields {
	row-gap: var(--space-d15);
	column-gap: var(--space-d075);
}

.px-actie .px-steun .gform_footer,
.px-actie .px-steun .gform_page_footer {
	margin-top: var(--space-d15);
}

/* Pakketten: de opmaak van de keuze "Mijn gift gaat naar" staat in
   assets/css/px-doelkeuze.css, want de landingspagina gebruikt dezelfde
   tegels. De wikkel px-steun__formulier draagt daarvoor de klasse
   px-doelkeuze. */

/* Bedragen: bestaande stijl px-donation-form-choose-amount, alleen de rij
   uitvullen zodat de knoppen de kaart precies vullen. */
.px-actie .px-steun :is(.px-steun__bedragen, .px-donation-form-choose-amount) {
	margin: 0;
	padding: 0;
	border: 0;
}

/* Vier gelijke knoppen zolang ze passen; op een smal scherm zakken ze vanzelf
   naar drie of twee, zodat "Anders" heel blijft. */
.px-actie .px-steun :is(.px-steun__bedragen, .px-donation-form-choose-amount) .gfield_radio {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(5.25rem, 1fr));
	gap: var(--space-d05);
}

.px-actie .px-steun :is(.px-steun__bedragen, .px-donation-form-choose-amount) .gchoice {
	margin: 0;
}

.px-actie .px-steun :is(.px-steun__bedragen, .px-donation-form-choose-amount) label {
	width: 100%;
	text-align: center;
}

/* De twee keuzes van de aanhef staan naast elkaar. Gravity Forms zet elke keuze
   standaard op een eigen regel, wat hier zonde is: samen zijn ze ruim smaller
   dan de kaart. Ze wikkelen wel, zodat een langere aanhef op een smal scherm
   heel blijft. */
.px-actie .px-steun .px-steun__aanhef {
	margin: 0;
	padding: 0;
	border: 0;
}

.px-actie .px-steun .px-steun__aanhef .gfield_radio {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-d05) var(--space-d15);
}

.px-actie .px-steun .px-steun__aanhef .gchoice {
	margin: 0;
}

.px-actie .px-steun .px-steun__veld--breed {
	grid-column: 1 / -1;
}

.px-actie .px-steun .px-steun__afsluiting,
.px-actie .px-steun .px-steun__afsluiting p {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--text-d075);
	line-height: var(--lh-normal);
	color: var(--gray-dark);
}

.px-actie .px-steun :is(.gform_footer, .gform_page_footer) :is(input[type="submit"], .gform_button, .px-steun__knop) {
	width: 100%;
	justify-content: center;
}

.px-steun__leeg {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--text-d075);
	line-height: var(--lh-normal);
	color: var(--gray-dark);
}


/* --------------------------------------------------------------------------
   7. Responsief
   -------------------------------------------------------------------------- */

/* Het verhaal scrolt mee op een breed scherm. De kolom links is bijna altijd
   korter dan het formulier, en op stap 2 nog veel korter; zonder dit bleef daar
   een lange lege ruimte over (Maurits, 9 sep 2026). Past de kolom onder de
   header in het venster, dan blijft hij daar hangen. Is hij hoger, dan hangt hij
   aan de onderkant, zodat de deelknoppen in beeld blijven; frontend.js.php
   rekent dat uit en zet de bovenrand in --px-actie-vast-top. Zonder JavaScript
   geldt de headerhoogte. */
@media screen and (min-width: 1101px) {
	.px-actie__hoofd {
		position: sticky;
		top: var(--px-actie-vast-top, var(--header-height, 80px));
	}
}

@media screen and (max-width: 1100px) {
	.px-actie__container {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--space-d15);
	}

	/* Op een smal scherm valt de tweedeling weg en bepalen de blokken zelf hun
	   volgorde: eerst het verhaal, dan meteen kunnen geven, en daarna de rest. */
	.px-actie__hoofd,
	.px-actie__zij {
		display: contents;
	}

	.px-actie__persoon {
		order: 1;
	}

	.px-actie__tekst {
		order: 2;
	}

	.px-steun {
		order: 3;
		max-width: var(--px-actie-kolom);
	}

	.px-actie-groep-label {
		order: 4;
	}

	.px-actie__acties {
		order: 5;
	}
}

@media screen and (max-width: 767px) {
	.px-actie__persoon {
		align-items: flex-start;
		flex-direction: column;
		gap: var(--space-d1);
	}

	.px-actie__portret {
		width: 120px;
		height: 120px;
	}

	.px-actie-groep-label {
		flex-wrap: wrap;
	}

	.px-actie .px-share {
		grid-template-columns: minmax(0, 1fr);
	}
}