/* Appeal fundraisers carousel — [paau_appeal_fundraisers] shortcode output.
   Horizontal scroll with CSS scroll-snap rather than a JS carousel library
   — native swipe/scroll behavior is already a familiar pattern, and this
   avoids the maintenance cost of a JS dependency for something scroll-snap
   handles natively. Loaded only on singular Appeal pages — see
   class-appeal-fundraisers-display.php's enqueue_assets().

   Accent orange and dark text read from Elementor's Global Colors
   (--e-global-color-primary / --e-global-color-text) with the brand hex as
   fallback — see the README's "Elementor global color tokens" section.

   font-family now reads from Elementor's Global Fonts too, same treatment
   applied across the rest of this plugin — see donation-form.css's
   correction note for the full reasoning. Set once on the root below,
   inherited by everything inside; the card title (a real <h3>) gets the
   "primary" font slot instead via its own rule further down. */

.paau-appeal-fundraisers {
	display: flex !important;
	gap: 16px !important;
	overflow-x: auto !important;
	scroll-snap-type: x mandatory !important;
	padding-bottom: 10px !important;
	-webkit-overflow-scrolling: touch !important;
	scrollbar-width: thin !important;
	font-family: var(--e-global-typography-text-font-family, inherit) !important;
}

.paau-appeal-fundraiser-card {
	/* Two cards visible at once on desktop — card width accounts for
	   sharing the one gap between them (16px gap, 8px "belongs" to each
	   card's side of it). */
	flex: 0 0 calc(50% - 8px) !important;
	scroll-snap-align: start !important;
	background: #ffffff !important;
	border: 1px solid #ececec !important;
	border-radius: 14px !important;
	overflow: hidden !important;
	box-shadow: 0 2px 4px rgba(35, 31, 32, 0.04) !important;
	display: flex !important;
	flex-direction: column !important;
}

@media (max-width: 600px) {
	.paau-appeal-fundraiser-card {
		/* Mostly one card, with a deliberate peek of the next one — the
		   visual cue that there's more to scroll to, rather than two
		   cramped cards or a full-width card giving no hint at all. */
		flex: 0 0 82% !important;
	}
}

.paau-appeal-fundraiser-image {
	width: 100% !important;
	aspect-ratio: 16 / 10 !important;
	overflow: hidden !important;
}

.paau-appeal-fundraiser-image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
}

.paau-appeal-fundraiser-body {
	padding: 16px !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 8px !important;
	flex: 1 1 auto !important;
}

/* font-family deliberately unset (0.40.35) — real <h3> tag; same 0.39.2
   finding as class-donate-widget.php's own headings: PAAU's actual
   heading font isn't carried by Elementor's Global Fonts kit at all, it's
   set via Site Settings → Typography, which styles real heading tags
   directly. Forcing this CSS variable with !important was overriding
   that with higher specificity, silently blocking the real brand heading
   font from ever reaching this tag. Removed here, and the same audit
   applied across every other real heading in the plugin still carrying
   this — see README for the full list. */
.paau-appeal-fundraiser-title {
	margin: 0 !important;
	font-size: 16px !important;
	font-weight: 800 !important;
	line-height: 1.3 !important;
}

.paau-appeal-fundraiser-title a {
	color: var(--e-global-color-text, #231F20) !important;
	text-decoration: none !important;
}

.paau-appeal-fundraiser-title a:hover {
	color: var(--e-global-color-primary, #FF6A00) !important;
}

.paau-appeal-fundraiser-organiser {
	margin: 0 !important;
	font-size: 13px !important;
	color: #767676 !important;
}

/* Thermometer styling is deliberately NOT duplicated here — the carousel
   now renders through the same shared PAAU_D_Donation_Engine::render_thermometer()
   helper used by [paau_appeal_box], [paau_fundraiser_box], and
   [paau_thermometer], which relies on .paau-appeal-progress /
   -progress-bar / -progress-label from donation-form.css — already loaded
   broadly, not scoped to Appeal pages the way this file's own styles are.
   A previous version of this file had its own separate, near-identical
   copy of this styling; consolidated to avoid two places needing to be
   remembered for one visual tweak. */

.paau-appeal-fundraiser-cta {
	margin-top: auto !important;
	display: block !important;
	text-align: center !important;
	background: #FFF4E8 !important;
	color: var(--e-global-color-primary, #FF6A00) !important;
	font-weight: 700 !important;
	font-size: 13px !important;
	padding: 10px !important;
	border-radius: 999px !important;
	text-decoration: none !important;
}

.paau-appeal-fundraiser-cta:hover {
	background: var(--e-global-color-primary, #FF6A00) !important;
	color: #ffffff !important;
}