/* ═══════════════════════════════════════════════════════════════════════════
   Donations page (4487) — "Every Dollar Counts" loop grid (.aaps-donations-grid)
   Figma desktop layout: row 1 = 2 cards, row 2 = 2 cards, row 3 = 3 cards.
   Done with a 6-track grid: cards 1–4 span 3 tracks, cards 5–7 span 2 tracks.
   Tablet/mobile keep the widget's own 2-column grid.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 1025px) {
	.aaps-donations-grid .elementor-loop-container.elementor-grid {
		grid-template-columns: repeat(6, 1fr) !important;
	}

	/* nth-OF-TYPE, not nth-child: Elementor prints the loop template's CSS as
	   <style> siblings between the cards, which would throw off nth-child. */
	.aaps-donations-grid .elementor-loop-container.elementor-grid > div.e-loop-item {
		grid-column: span 3;
	}

	.aaps-donations-grid .elementor-loop-container.elementor-grid > div.e-loop-item:nth-of-type(n + 5) {
		grid-column: span 2;
	}
}

/* The loop item was cloned from the Swap card, whose TITLE pulls up (-8px
   desktop / -12px mobile) to sit tight under the tag pill. On cards without a
   pill the title becomes the first child of the content box — restore the
   original 0 top margin there (the pill itself has 0, so it's unaffected). */
.aaps-donations-grid .e-con > .elementor-widget-heading:first-child {
	margin-top: 0 !important;
}

/* The .e-loop-item wrapper stretches to its grid row; make the card container
   inside fill it so cards sharing a row keep equal height (as the hand-built
   grid-children cards did). */
.aaps-donations-grid .e-loop-item {
	display: flex;
}

.aaps-donations-grid .e-loop-item > .e-con {
	width: 100%;
	min-height: 100%;
}