/*
	Grid and Callout — template-parts/ministry-opportunity-card.php's .card
	markup is also shared with the /ministry-opportunities/ archive page,
	which is why this is scoped to .ministry-opportunities--grid /
	.ministry-opportunities--callout (the section classes as_section_class()
	adds for each layout) rather than touching .card globally — the archive
	page keeps the plain, unstyled card.

	Image padding is on .card__media itself, not the card or its body — the
	image sits inset from the card's left/right border with its own 8px
	gutter, but stays flush against the top border. object-fit: cover (the
	shared .card__media rule) sizes within that padded box automatically.
	Callout's cards never render .card__media (show_image is always false
	there), so this rule simply doesn't match anything on that layout.
*/
.ministry-opportunities--grid .card,
.ministry-opportunities--callout .card {
	position: relative;
	overflow: visible;
	border-radius: 0;
	border: 1px solid var(--color-accent-bg);
	background-color: transparent;

	&:hover {
		transform: none;
		box-shadow: none;
	}
}

.ministry-opportunities--grid .card__media,
.ministry-opportunities--callout .card__media {
	aspect-ratio: 2 / 1;
	padding-inline: var(--space-2);
}

/* Callout only — top/left border stays, right/bottom dropped. */
.ministry-opportunities--callout .card {
	border-right: none;
	border-bottom: none;
}

/* Mobile-first, matching the Feature layout's own .card__content below:
   var(--space-5) (24px, the shared component's own default — components.css
   — so this is a no-op below the breakpoint) up to var(--space-7) (40px)
   once there's room for it. */
.ministry-opportunities--grid .card__content,
.ministry-opportunities--callout .card__content {
	padding: var(--space-5);
}

@media (min-width: 61.75em) {
	.ministry-opportunities--grid .card__content,
	.ministry-opportunities--callout .card__content {
		padding: var(--space-7);
	}
}

/*
	Status pill — shared look across Grid, Callout and the Feature layout
	below, so it's one rule set keyed off the three section classes rather
	than duplicated. All three position it as an absolute, overlapping badge;
	only the anchor differs (.card for Grid/Callout, .card__content for
	Feature — see below).
*/
.ministry-opportunities--grid .card__type,
.ministry-opportunities--callout .card__type,
.ministry-opportunities--feature .card__type {
	margin: 0;
	padding-block: var(--space-1);
	padding-inline: var(--space-5);
	border-radius: var(--radius-full);
	font-size: var(--font-size-2);
	font-weight: var(--font-weight-semibold);
	text-transform: uppercase;
	background-color: var(--color-status-filled-bg);
	color: var(--color-status-filled-fg);
}

.ministry-opportunities--grid .card__type--open,
.ministry-opportunities--callout .card__type--open,
.ministry-opportunities--feature .card__type--open {
	background-color: var(--color-status-open-bg);
	color: var(--color-status-open-fg);
}

.ministry-opportunities--grid .card__type--coming-soon,
.ministry-opportunities--callout .card__type--coming-soon,
.ministry-opportunities--feature .card__type--coming-soon {
	background-color: var(--color-status-coming-soon-bg);
	color: var(--color-status-coming-soon-fg);
}

/*
	Grid/Callout: positioned absolute against .card — the pill is a direct
	sibling of .card__content, not nested inside it, so this just needs the
	offset, not an escape from the content flow. overflow: visible on .card
	above is required for this to actually show — the base .card rule
	(components.css) clips overflow for its image's border-radius, which
	these layouts don't use. Callout has no .card__media, so .card's top
	edge and .card__content's top edge are the same point there — same
	visual result as Grid, just without an image to overlap.

	Feature: positioned absolute against .card__content instead — there the
	pill IS nested inside .card__content (as its first child), overlapping
	the white panel's own top edge rather than the whole photo-backed
	.mo-feature card, so it needs .card__content: position: relative (below)
	as its anchor, not .card__content's own top edge.

	All three share the same offset: translateY(-50%) — not a fixed negative
	margin — is the only way to shift by half of the pill's OWN rendered
	height; a percentage margin resolves against the containing block's
	width, not the element's height.
*/
.ministry-opportunities--grid .card__type,
.ministry-opportunities--callout .card__type,
.ministry-opportunities--feature .card__type {
	position: absolute;
	top: 0;
	left: var(--space-5);
	transform: translateY(-50%);
}

/*
	Feature layout. The image (if any) is a full-bleed background behind the
	whole thing, same technique as .flex-section--cta.has-bg-image
	(blocks/cta/cta.css) — a ::before layers the image, z-index: -1 below the
	content, with isolation: isolate on the root keeping that -1 from
	escaping to stack beneath the section itself. Unlike CTA, no scrim: text
	sits on .card__content's own solid white panel here, not directly on the
	photo, so nothing needs to darken the image for contrast.
*/
.mo-feature {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: var(--space-6);
}

@media (min-width: 61.75em) {
	.mo-feature {
		/* 80px / 96px / 80px / 96px — exact matches for --space-10 / --space-11. */
		padding: var(--space-10) var(--space-11);
	}
}

.mo-feature.has-bg-image {
	/* The image can be anything, so force the light-on-dark pairing rather
	   than trusting whatever text colour the surrounding section has.
	   --section-bg/--section-fg are also set here — same reason as
	   .banner (components.css): without them, .button--outline's hover
	   (which inverts against --section-fg/--section-bg) falls through to
	   its default-light fallback, wrong on a photo background. */
	color: var(--color-dark-fg);
	--section-bg: var(--color-dark-bg);
	--section-fg: var(--color-dark-fg);

	/*
		inset is pulled in past the edge (rather than 0) and filter: blur is
		applied here, not on .mo-feature itself — blur() softens an element's
		own edges outward, which right at inset: 0 would fade the photo to
		nothing exactly at the card's border instead of staying full-bleed.
		Overshooting the box and letting .mo-feature's own overflow: hidden
		(above) crop the excess keeps the blur itself fully contained within
		the card with no faded edge.
	*/
	&::before {
		content: "";
		position: absolute;
		inset: -0.5rem;
		z-index: -1;
		background-image: var(--mo-feature-bg-image);
		background-position: var(--mo-feature-bg-position, 50% 50%);
		background-size: cover;
		background-repeat: no-repeat;
		filter: blur(var(--mo-feature-image-blur));
	}
}

/*
	.card__content already provides the flex column + gap (components.css,
	shared with the Grid/Callout card's own .card__content) — this only adds
	what's specific to sitting over a full-bleed photo: on its own white
	panel (color goes back to the default dark-on-light pairing here,
	overriding .has-bg-image's light-on-dark — that pairing was for text
	sitting directly on the photo, which this box no longer does) rather
	than text floating directly over the image. No max-width — the panel
	fills the full width .mo-feature's own padding leaves available, rather
	than a capped, centred column. The big padding lives on .mo-feature
	itself (above) so the photo still shows as a frame around this white
	panel — this is just the panel's own internal spacing.
*/
.mo-feature .card__content {
	position: relative;
	/* Mobile-first — var(--space-5) (24px) up to var(--space-7) (40px), same
	   breakpoint and values as the Grid/Callout card__content above. */
	padding: var(--space-5);
	background-color: var(--color-default-bg);
	color: var(--color-default-fg);
}

@media (min-width: 61.75em) {
	.mo-feature .card__content {
		padding: var(--space-7);
	}
}

/*
	Extra top padding, on top of whichever of the two padding values above
	applies, when a card__content actually has a pill overlapping its top
	edge — otherwise the title sits right where the pill's own bottom half
	overlaps into the panel. :has(> .card__type) rather than assuming every
	card always has one — Status isn't guaranteed to have a value, and no
	pill renders at all when it doesn't (template-parts/ministry-opportunity-card.php),
	so this only adds the space where there's actually a pill to clear.

	Grid/Callout: .card__type is a sibling of .card__content, not a child of
	it (see the pill positioning comment above), so the :has() has to check
	.card for a .card__type child and apply the padding to its
	.card__content sibling instead of checking .card__content itself.
	Feature: .card__type IS a child of .card__content, so :has() checks it
	directly.
*/
.ministry-opportunities--grid .card:has(> .card__type) .card__content,
.ministry-opportunities--callout .card:has(> .card__type) .card__content,
.mo-feature .card__content:has(> .card__type) {
	padding-top: calc(var(--space-5) + var(--space-4));
}

@media (min-width: 61.75em) {
	.ministry-opportunities--grid .card:has(> .card__type) .card__content,
	.ministry-opportunities--callout .card:has(> .card__type) .card__content,
	.mo-feature .card__content:has(> .card__type) {
		padding-top: calc(var(--space-7) + var(--space-4));
	}
}

/*
	Callout layout — a 3-column grid. The header spans every row CSS Grid
	generates for the cards (grid-row: 1 / -1 works even though the row count
	is dynamic, since -1 always resolves to the last implicit line), so
	auto-placement skips column 1 for every subsequent card and fills columns
	2 and 3 instead — two cards per row, one header running down the side.

	Mobile-first: one column, header above the (single-column) cards, same as
	every other block on this theme, until there's room for the 3-column grid.
*/
.mo-callout {
	display: grid;
	gap: var(--space-6);
}

/* 71.875em (1150px), not the theme's usual 61.75em — three columns need more
   width each than two do, same reasoning as .grid-3 in layout.css. */
@media (min-width: 71.875em) {
	.mo-callout {
		grid-template-columns: minmax(0, 16rem) repeat(2, 1fr);
		gap: var(--space-8) var(--space-6);
	}

	.mo-callout__header {
		grid-row: 1 / -1;
	}
}

/*
	Fixed Accent colour regardless of whichever heading style the editor
	picks in the Heading field — an explicit rule here beats the inherited
	--section-fg (bg-tint's colour, layout.css) since inheritance always
	loses to any rule declared directly on the element, no specificity
	contest needed.
*/
.mo-callout__header h2 {
	color: var(--color-accent-bg);
}