/* [paau_featured_appeals] — a standalone "spotlight" grid of full-bleed
   image tiles (0.40.6). See class-featured-appeals.php's own header
   comment for why this is a separate, simpler surface from both
   [paau_browse_appeals] and [paau_donate_widget] rather than a variant of
   either — no filtering, no search, no modal, no JS at all; every card is
   a single plain link straight to the Appeal's own page.

   Same brand-token/!important conventions as every other stylesheet in
   this plugin — Elementor Global Colors (--e-global-color-primary/-text)
   with the PAAU brand hex as fallback, !important on every color/
   background/border/display/flex declaration (this site's active theme,
   Hello Elementor, overrides those properties otherwise). Primary, not
   Accent — see donation-form.css's own 0.39.18 correction note; the real
   brand orange lives on Elementor's "Primary" global color slot on this
   site, not "Accent". */

.paau-featured-appeals {
	width: 100% !important;
	max-width: 1200px !important;
	margin: 0 auto !important;
	box-sizing: border-box !important;
	font-family: var(--e-global-typography-text-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Calibri, Roboto, sans-serif) !important;
	color: var(--e-global-color-text, #231F20) !important;
}

.paau-featured-empty-note {
	margin: 0;
	font-size: 13px;
	color: #767676 !important;
}

/* Fixed column counts by breakpoint — the same approach
   [paau_browse_appeals]'s own grid uses (see browse-appeals.css's 0.40.2
   note): a guaranteed count at a named width rather than an auto-fill
   card-width-driven wrap. Matches that grid's 900px and 560px/2-column
   steps for visual consistency between the two shortcodes' grids, but
   deliberately DOESN'T take browse-appeals' 1366px→3-column step
   (0.40.46): this grid sits in a 1200px-max-width container, so 4
   columns still fit comfortably at 1366px, and Fouad wants it to stay
   at 4 there rather than drop early. */
.paau-featured-grid {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}

@media (max-width: 900px) {
	.paau-featured-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	.paau-featured-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}
}

/* aspect-ratio 4/5 (portrait) — a deliberate spotlight-tile shape, taller
   than [paau_browse_appeals]'s own 16/10 landscape thumbnail, since the
   image here IS the whole card rather than a header strip above title/
   description text. */
.paau-featured-card {
	position: relative;
	display: block !important;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: #ececec !important;
	border-radius: 16px !important;
	box-shadow: 0 4px 14px rgba(35, 31, 32, 0.12);
	text-decoration: none !important;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.paau-featured-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(35, 31, 32, 0.18);
}

.paau-featured-card:focus-visible {
	outline: 2px solid var(--e-global-color-primary, #FF6A00);
	outline-offset: 3px;
}

.paau-featured-card-media {
	position: absolute;
	inset: 0;
	display: block !important;
}

/* width/height/object-fit all !important on the <img> itself, not just the
   box — the same reasoning already root-caused for Program icons (0.39.8)
   and Browse Appeals cards: this theme resets `img { height: auto }`
   without asking, which silently turns a plain `height: 100%` into `auto`
   and leaves the photo letterboxed instead of filling the tile. */
.paau-featured-card-media img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
}

/* Always renders, image or not — this is what keeps the white title text
   and orange eyebrow legible even over a plain fallback fill (no banner
   image, no featured thumbnail set yet on that Appeal) rather than only
   working by luck on top of a real photo. */
.paau-featured-card-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(35, 31, 32, 0.88) 0%, rgba(35, 31, 32, 0.45) 42%, rgba(35, 31, 32, 0) 72%) !important;
}

.paau-featured-card-content {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex !important;
	flex-direction: column !important;
	gap: 6px;
	padding: 18px 16px;
}

/* Eyebrow (design system doc's H5 token: Archivo Bold, uppercase, tracked)
   — colour uses this plugin's own established --e-global-color-primary
   convention, not the design doc's separate --e-global-color-accent value
   (see donation-form.css's 0.39.18 note: Accent was never actually
   configured on this site's Elementor kit, only Primary was), so this
   reads the same real brand orange every other accent element in this
   plugin already does. */
.paau-featured-card-eyebrow {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--e-global-color-primary, #FF6A00) !important;
}

/* H4 per the design system doc's heading scale (Archivo Bold, 20-24px,
   sentence case) — white here specifically, not the doc's default dark
   neutral, since this heading sits on a photo, not a plain background;
   the scrim above guarantees enough contrast for white text regardless of
   the underlying image. */
/* font-family deliberately left off (0.40.35) — real <h4> tag; same
   0.39.2 finding as every other real heading fixed this same round (see
   appeal-fundraisers.css's own comment for the confirmed reasoning). */
.paau-featured-card-title {
	margin: 0;
	font-size: 20px;
	line-height: 1.25;
	font-weight: 700;
	color: #ffffff !important;
}

@media (max-width: 560px) {
	.paau-featured-card-content {
		padding: 14px 12px;
	}

	.paau-featured-card-title {
		font-size: 17px;
	}
}