/*
 * Homepage "This Month's Initiative" card — inc/initiative-template.php.
 * Lives in the hero's visual column (where the Ijtima event card was) and uses
 * that card's frosted-glass treatment on the hero's dark surface.
 *
 * Contrast: small red text on the dark hero is only ~3.2:1, so red is used for
 * the hadith rule and white-on-red fills (5.6:1), never as small text.
 */

.ah-initiative {
	position: relative;
	max-width: 460px;
	margin-left: auto;
	background: rgba(255,255,255,0.07);
	border: 1px solid rgba(255,255,255,0.16);
	border-top: 4px solid var(--color-red);
	border-radius: var(--radius-lg);
	overflow: hidden;
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	box-shadow: 0 24px 56px rgba(0,0,0,0.5), 0 4px 12px rgba(0,0,0,0.3);
	color: var(--color-grey-200);
}

/* Poster header — cropped to its top band (title + crest + photos); the
   whole poster opens full size in a new tab. */
.ah-initiative__thumb {
	position: relative;
	display: block;
	height: 200px;
	overflow: hidden;
	background: var(--color-white);
}
.atfal-home .ah-initiative__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	transition: transform 0.3s ease-out;
}
.ah-initiative__thumb:hover img,
.ah-initiative__thumb:focus-visible img {
	transform: scale(1.03);
}
.ah-initiative__thumb--crest {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--color-red-deep), var(--color-ink));
}
.atfal-home .ah-initiative__thumb--crest img {
	width: auto;
	height: 150px;
	object-fit: contain;
}
.ah-initiative__thumb-hint {
	position: absolute;
	right: var(--space-3);
	bottom: var(--space-3);
	padding: var(--space-1) var(--space-3);
	border-radius: 999px;
	background: rgba(23,24,26,0.85);
	color: var(--color-white);
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
}

.ah-initiative__body {
	padding: var(--space-5);
}
.ah-initiative__eyebrow {
	display: inline-block;
	margin-bottom: var(--space-3);
	padding: var(--space-1) var(--space-3);
	border-radius: 999px;
	background: var(--color-red);
	color: var(--color-white);
	font-size: var(--text-xs);
	font-weight: var(--weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
.atfal-home .ah-initiative__title {
	margin: 0 0 var(--space-4);
	font-family: var(--font-body);
	font-size: var(--text-h2);
	font-weight: var(--weight-heavy);
	letter-spacing: -0.01em;
	line-height: var(--leading-tight);
	color: var(--color-white);
}
.ah-initiative__subtitle {
	display: block;
	margin-top: var(--space-1);
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	letter-spacing: 0;
	color: var(--color-grey-300);
}

/* Religious greeting — serif italic, set apart from the body copy.
   Deliberately NOT --font-display: Fraunces's own ā glyph draws its macron
   over the following letter ("Barakat̄uh"), confirmed at large size in both
   roman and italic, with Google's latin-ext subset loaded. Georgia (and Noto
   Serif, Android's system serif) place transliteration macrons correctly. */
.atfal-home .ah-initiative__greeting {
	margin: 0 0 var(--space-2);
	font-family: Georgia, "Noto Serif", "Times New Roman", serif;
	font-style: italic;
	font-weight: 400;
	font-size: var(--text-lg);
	line-height: var(--leading-snug);
	color: var(--color-white);
}
.atfal-home .ah-initiative__text {
	margin: 0 0 var(--space-4);
	font-size: var(--text-sm);
	line-height: var(--leading-relaxed);
	color: var(--color-grey-200);
}

/* Hadith — a quotation, not the department's words. Resets the parent
   theme's global blockquote/cite styling (grey fill, inline-block, faded
   cite). core-mobile.css also centers every blockquote on phones —
   text-align is reset here for that; its !important display:table/margin
   are left alone (harmless: full-width, 30px below). */
.atfal-home .ah-initiative__hadith {
	display: block;
	text-align: left;
	margin: 0 0 var(--space-4);
	padding: var(--space-1) 0 var(--space-1) var(--space-4);
	border-left: 3px solid var(--color-red);
	border-radius: 0;
	background: none;
	overflow: visible;
	font-size: inherit;
}
.atfal-home .ah-initiative__hadith p {
	margin: 0 0 var(--space-2);
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 500;
	font-size: var(--text-lg);
	line-height: var(--leading-normal);
	color: var(--color-white);
}
.atfal-home .ah-initiative__hadith cite {
	display: block;
	margin: 0;
	padding: 0;
	background: none;
	opacity: 1;
	font-style: normal;
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--color-grey-300);
}
.atfal-home .ah-initiative__hadith cite::before {
	content: "\2014\00a0";
}
/* ﷺ — Amiri (already loaded by tokens.css) carries a proper glyph for it;
   at the cite's 13px uppercase Inter it is illegible, so it gets its own
   face and size and is exempt from the cite's text-transform/tracking. */
.atfal-home .ah-initiative__honorific {
	font-family: "Amiri", "Geeza Pro", "Noto Naskh Arabic", serif;
	font-size: 2em;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
	vertical-align: -0.2em;
	color: var(--color-grey-200);
}

.atfal-home .ah-initiative__dua {
	margin: 0 0 var(--space-5);
	font-size: var(--text-sm);
	line-height: var(--leading-relaxed);
	color: var(--color-grey-200);
}
.ah-initiative__cta {
	width: 100%;
	justify-content: center;
	min-height: 48px;
}
.ah-initiative__cta span {
	display: inline-block;
	transition: transform 0.15s ease;
}
.ah-initiative__cta:hover span,
.ah-initiative__cta:focus-visible span {
	transform: translateX(3px);
}
.atfal-home .ah-initiative__attribution {
	margin: var(--space-3) 0 0;
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-normal);
	text-align: center;
	color: var(--color-grey-300);
}

/* Hero stacks at 900px (homepage.css) — card goes full width below the text. */
@media (max-width: 900px) {
	.ah-initiative { margin-left: 0; max-width: none; }
	.ah-initiative__thumb { height: 240px; }
}
@media (max-width: 640px) {
	.ah-initiative__thumb { height: 180px; }
	.ah-initiative__body { padding: var(--space-4); }
}

@media (prefers-reduced-motion: reduce) {
	.ah-initiative__cta span,
	.atfal-home .ah-initiative__thumb img { transition: none; }
}