/**
 * AOH Online Archive — front-page (home) additions.
 * Owned by: HOME squad. Auto-enqueued by the theme's assets/css/*.css glob.
 *
 * SCOPE: styles ONLY the home page's new "Explore more of the archive" section
 * (the three entry-point cards for Leadership & Honors, the Hibernian Digest,
 * and Church Gifts & Windows). All selectors use home-specific class names
 * (.aoh-more*, .aoh-mcard*) that do NOT appear in main.css, so this file never
 * overrides the shared stylesheet and is order-independent of it. Everything
 * reuses the §2 design tokens (colors, spacing, radius, fonts) so the new
 * section matches the established visual language in both light and dark
 * themes. The section head (.aoh-sechead) reuses the shared style from main.css.
 */

/* Short framing line under the section head. */
.aoh-more__intro {
	max-width: 62ch;
	margin: 0 0 var(--aoh-space-5);
	color: var(--aoh-ink-soft);
	font-family: var(--aoh-font-serif);
	font-size: 1.08rem;
}

/* Three feature cards. auto-fit keeps them 3-up on wide screens and reflows to
   2-up / 1-up as space tightens, with no fixed breakpoints to maintain. */
.aoh-more {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: var(--aoh-space-4);
}

/* Echoes the browse card (.aoh-bcard) but reads as a higher-level entry point:
   a gold top rule and a larger icon mark it as a distinct area of the site. */
.aoh-mcard {
	display: flex;
	flex-direction: column;
	gap: var(--aoh-space-2);
	border: var(--aoh-border-width) solid var(--aoh-line);
	border-top: 3px solid var(--aoh-gold-line);
	border-radius: var(--aoh-radius);
	background: var(--aoh-surface);
	padding: var(--aoh-space-5);
	text-decoration: none;
	color: var(--aoh-ink);
	transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}

.aoh-mcard:hover,
.aoh-mcard:focus-visible {
	border-color: var(--aoh-brand);
	transform: translateY(-2px);
	box-shadow: var(--aoh-shadow);
}

.aoh-mcard__icon {
	font-size: 1.9rem;
	line-height: 1;
}

.aoh-mcard__title {
	font-family: var(--aoh-font-serif);
	font-size: 1.2rem;
	color: var(--aoh-ink);
}

.aoh-mcard:hover .aoh-mcard__title,
.aoh-mcard:focus-visible .aoh-mcard__title {
	color: var(--aoh-brand);
}

/* flex:1 pushes the "Explore" cue to the bottom so cards of uneven caption
   length keep their cue baselines aligned. */
.aoh-mcard__caption {
	flex: 1;
	font-size: 0.95rem;
	color: var(--aoh-ink-soft);
}

.aoh-mcard__cue {
	margin-top: var(--aoh-space-1);
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--aoh-brand-2);
}

/* Respect reduced-motion: drop the lift, keep the color/shadow affordance. */
@media (prefers-reduced-motion: reduce) {
	.aoh-mcard {
		transition: border-color 0.15s, box-shadow 0.15s;
	}

	.aoh-mcard:hover,
	.aoh-mcard:focus-visible {
		transform: none;
	}
}

/* ==========================================================================
   Home landing-page vertical rhythm
   --------------------------------------------------------------------------
   Home-only layout (.aoh-landing / .aoh-block / .aoh-callout markup lives only
   in front-page.php), so it belongs here rather than in the shared main.css.
   NOTE ON CASCADE: this file and main.css are both auto-globbed, and glob order
   is not guaranteed. main.css still carries a mobile `.aoh-block` padding rule
   (single-class, inside a max-width media query). The base `.aoh-block` rule
   below is single-class too and only sets desktop padding — the mobile rule is
   allowed to win when its query matches. The `+`/`--tight` rules use two-class
   / sibling selectors (higher specificity) so they win over that mobile rule
   regardless of which stylesheet loads first.
   ========================================================================== */

/* The parent theme (Twenty Twenty-One) puts large margins (up to ~100px) on
 * headings/content; on our custom section markup those margins were ESCAPING
 * the sections (padding-top is collapsed on adjacent blocks) and ballooning the
 * gaps between browse / material type / callouts. Stacking the sections as flex
 * items makes each a margin-containing context — no margin escape, no sibling
 * margin-collapse — so the space between sections is exactly our padding. */
.aoh-landing {
	display: flex;
	flex-direction: column;
}

.aoh-landing > * {
	margin-block: 0;
}

/* A contained heading/first-child margin must not re-open space at the top of
 * a section or callout card. */
.aoh-block > .aoh-container > :first-child,
.aoh-callout > :first-child {
	margin-top: 0;
}

.aoh-block {
	padding-block: var(--aoh-space-5);
}

/* Consecutive sections must not stack top+bottom padding — that doubling (plus
 * each callout's own margin) is what left a huge gap between the stacked
 * callouts (How to use / What you won't find / Scope & sources). Collapse the
 * following section's top padding so every section gap is one consistent rhythm.
 * Sibling selector (0,2,0) beats the mobile single-class .aoh-block rule. */
.aoh-block + .aoh-block {
	padding-top: 0;
}

/* The informational callouts (How to use / What you won't find / Scope &
 * sources) read as one tight group: a small bottom padding pulls consecutive
 * cards close together, while the full padding-bottom of the section ABOVE
 * still sets the group apart from the browse/type area. Two-class selector
 * (0,2,0) so it wins over the mobile .aoh-block padding rule in main.css. */
.aoh-block.aoh-block--tight {
	padding-bottom: var(--aoh-space-3);
}