/**
 * PX Actie sponsors: sponsorlijst en agenda van een actiepagina.
 *
 * Maten en kleuren komen uit mockups/actiepagina-src/mockup.css en gebruiken
 * alleen bestaande tokens uit base.css. Het agendaitem zelf staat in
 * assets/css/px-agenda-item.css; hier staan alleen de afwijkende maten.
 */

/* --------------------------------------------------------------------------
   Raster
   -------------------------------------------------------------------------- */

/* Sponsors en agenda delen exact dezelfde kolommen als de sectie erboven.
   Daardoor staat de agenda onder de gele kaart en even breed, en begint de
   sponsorlijst op dezelfde lijn als het verhaal.

   De koppen staan in een eigen rij, zodat de witte sponsorlijst en de agenda
   allebei in de tweede rij beginnen en dus op dezelfde hoogte staan. Boven deze
   sectie ligt D3 uit de sectie erboven plus D3 hier, samen de ruimte die de kop
   nodig heeft om los te staan van de actie. */
.px-actie-sponsors__container {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 31rem);
	align-items: start;
	column-gap: var(--space-d3);
	row-gap: var(--space-d15);
	max-width: var(--row-width);
	width: 100%;
	margin: var(--space-d3) auto var(--space-d3);
}

.px-actie-sponsors__titel {
	grid-column: 1;
	grid-row: 1;
	margin: 0;
}

/* Variant zonder agenda: de sponsorlijst krijgt de plek van allebei de kolommen.
   Zonder deze regel blijft de lijst in de linkerkolom staan en houdt de pagina
   een leeg vak van 31rem over, want de kolommaat staat vast. */
.px-zonder-agenda .px-actie-sponsors__container {
	grid-template-columns: minmax(0, 1fr);
}

/* Spiegelbeeld daarvan: staat er wel een agenda maar nog geen sponsorlijst, dan
   schuift de agenda naar de eerste kolom. */
.px-zonder-sponsors .px-actie-sponsors__container {
	grid-template-columns: minmax(0, 1fr);
}

.px-zonder-sponsors .px-actie-agenda__titel,
.px-zonder-sponsors .px-actie-agenda {
	grid-column: 1;
}

/* In de bouwer staat er op een gewone pagina alleen een regel uitleg. */
.px-actie-sponsors--placeholder .px-actie-sponsors__container {
	display: block;
}

/* --------------------------------------------------------------------------
   Sponsors
   -------------------------------------------------------------------------- */

/* De sponsors staan in de brede kolom, op dezelfde lijn als het verhaal
   erboven, en in de tweede rij, naast de agenda. */
.px-sponsors {
	grid-column: 1;
	grid-row: 2;
	display: flex;
	flex-direction: column;
	gap: var(--space-d15);
	width: 100%;
	min-width: 0;
}

/* Het vak om de sponsors heen. Dit is de gastheer van de scrollaanwijzing uit
   het thema: de vervaging en de ronde knop staan er los in, dus het vak moet
   zelf een positie hebben. Zelfde opzet als de agenda op de winkelpagina. */
.px-sponsors__vak {
	position: relative;
	width: 100%;
	min-width: 0;
}

/* De lijst staat in een wit vlak, net als de agenda ernaast. */
.px-sponsors__vak--lijst {
	background-color: var(--white);
	box-shadow: var(--shadow-subtle);
}

/* Het gebied dat scrolt. De hoogte komt uit de meting in js/frontend.js: een
   aantal hele items plus een deel van het volgende. Zonder meting valt het
   terug op de volle hoogte, dus zonder JavaScript blijft alles leesbaar.

   De scrollbalk blijft verborgen, net als bij de agenda. De vervaging en de
   knop eronder vertellen dat er meer is. */
.px-sponsors__scroll {
	height: var(--px-sponsors-hoogte, auto);
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.px-sponsors__scroll::-webkit-scrollbar {
	display: none;
	width: 0;
	height: 0;
}

/* De ronde knop hangt 32 pixels onder het vak uit en heeft daar ruimte voor
   nodig: die 2rem is de knop zelf, de D1 is de ruimte eronder. Alleen wanneer er
   echt te scrollen valt, want anders staat de knop er niet. Op een breed scherm
   valt dit weg tegen de hogere agenda ernaast. */
.px-sponsors__vak.px-scroll-cue-host--overflow {
	margin-bottom: calc(2rem + var(--space-d1));
}

/* De vervaging uit het thema loopt naar wit over een hoogte van 5,5 rem. Dat is
   gemaakt voor de agenda, waar de kaarten veel hoger zijn. Hier zou het bijna
   een hele sponsor bedekken, dus hij is korter. */
.px-sponsors__vak.px-scroll-cue-host--overflow .px-scroll-cue__fade {
	height: 3.5rem;
}

/* Het scrollgebied is met de tab bereikbaar zodra er te scrollen valt. Dan moet
   je ook zien waar je bent. */
.px-sponsors__scroll:focus-visible {
	outline: 3px solid var(--gray-dark);
	outline-offset: -3px;
}

.px-sponsors__lijst {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.px-sponsor {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: baseline;
	column-gap: var(--space-d15);
	row-gap: var(--space-d025);
	padding: var(--space-d075) var(--space-d15);
}

.px-sponsor + .px-sponsor {
	border-top: solid 1px var(--sand-light);
}

.px-sponsor__naam {
	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-sponsor__bedrag {
	grid-row: 1;
	grid-column: 2;
	font-family: var(--font-display);
	font-size: var(--text-d125);
	font-weight: var(--weight-semibold);
	line-height: var(--lh-snug);
	white-space: nowrap;
	color: var(--navy);
}

.px-sponsor__bericht {
	grid-column: 1 / -1;
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--text-d1);
	line-height: var(--lh-relaxed);
	color: var(--text-base);
}

.px-sponsor__datum {
	grid-column: 1 / -1;
	font-family: var(--font-display);
	font-size: var(--text-d075);
	font-weight: var(--weight-medium);
	color: var(--gray-mid);
}

/* Nog geen donaties. Zelfde ruimte en zelfde tekstmaat als een bericht in de
   lijst, zodat het vak er hetzelfde uitziet. */
.px-sponsors__leeg {
	margin: 0;
	padding: var(--space-d075) var(--space-d15);
	font-family: var(--font-body);
	font-size: var(--text-d1);
	line-height: var(--lh-relaxed);
	color: var(--text-base);
}

/* --------------------------------------------------------------------------
   Agenda, kleine variant
   -------------------------------------------------------------------------- */

/* Op de plek waar eerst de QR-code stond. Het is hetzelfde agendaitem als op de
   winkelpagina, met dezelfde markup en dezelfde regels; alleen de maatvoering
   is kleiner.

   Het datumblok van het component loopt op tot 190 pixels en de koppen tot 40;
   dat past niet in een kolom van 496 naast een lijst met sponsors. */
.px-actie-agenda {
	grid-column: 2;
	grid-row: 2;
	padding: var(--space-d15);
	background-color: var(--white);
	/* Dezelfde schaduw als het sponsorvak ernaast en de kaartjes bij de groep. */
	box-shadow: var(--shadow-subtle);
	display: flex;
	flex-direction: column;
}

/* De kop staat in de eerste rij, naast "Sponsors, bedankt", en heeft dezelfde
   maat. Het streepje van heading__divider staat bovenaan, dus beide koppen
   beginnen op precies dezelfde lijn. */
.px-actie-agenda__titel {
	grid-column: 2;
	grid-row: 1;
	margin: 0;
}

/* De maten van het agendaitem staan als variabelen op het item zelf. Een eigen
   waarde hoort daarom ook op het item te staan en niet op de lijst eromheen. */
.px-actie-sponsors .px-agenda-item {
	--px-agenda-date-size: var(--space-d5);
	--px-agenda-day-size: var(--text-d2);
	--px-agenda-month-size: var(--text-d075);
	--px-agenda-title-size: var(--text-d125);
	--px-agenda-body-size: var(--text-d075);
	--px-agenda-item-gap: var(--space-d15);
}

/* De lijn tussen twee activiteiten hangt in het component aan een vaste
   1.8125rem, de helft van de ruimte die daar tussen zit. Met een andere
   tussenruimte rekent hij mee. */
.px-actie-sponsors .px-agenda-item + .px-agenda-item::before {
	top: calc(var(--px-agenda-item-gap) / -2);
}

/* Zonder omschrijving heeft de tekst minder lucht nodig. */
.px-actie-sponsors .px-agenda-item__meta {
	margin-top: var(--space-d05);
}

/* --------------------------------------------------------------------------
   Responsief
   -------------------------------------------------------------------------- */

@media screen and (max-width: 1100px) {
	/* Sponsors en agenda komen onder elkaar, in dezelfde volgorde als op een
	   breed scherm: eerst de kop, dan wie er al gaf, dan wat er te doen is. Boven
	   de kop is de D3 van de sectie erboven genoeg; een tweede D3 zou op een smal
	   scherm een gat worden. */
	.px-actie-sponsors__container {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--space-d15);
		margin-top: 0;
	}

	/* De agenda houdt hier dezelfde breedte als de sponsorlijst erboven. De twee
	   koppen staan niet meer naast elkaar maar boven hun eigen lijst. */
	.px-actie-sponsors__titel,
	.px-sponsors,
	.px-actie-agenda__titel,
	.px-actie-agenda {
		grid-column: 1;
		grid-row: auto;
	}
}

@media screen and (max-width: 767px) {
	/* Het agendaitem maakt op deze breedte elke activiteit 180 pixels hoog, wat
	   hoort bij het grote datumblok van een brede sectie. In de kleine variant is
	   het datumblok zelf de ondergrens. */
	.px-actie-sponsors .px-agenda-item {
		min-height: var(--px-agenda-date-size);
	}

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

	.px-sponsor__bedrag {
		grid-row: auto;
		grid-column: 1;
	}
}