/* ============================================================
   Listing: the ML Development callout card (template-parts/listing/
   results.php, 2026-10-24; designs/ML Development: "Updated Course,
   Workship List with ML Development Callout", desktop only). The last
   place of every page in views that can show Leadership (inc/
   ml-development.php): a Secondary Navy card the size of a course card
   (292 wide at 1440, stretched to its row), measured at 1440:
   - the Leadership badge 16px from the top and 19 from the left (the
     course cards' badge: White on Leadership Red, 4.99:1);
   - the title Koulen 32/38 in White, 25px under the badge (the
     design's "Mountain Leadership Development" is the page's title:
     "Mountain Leader Development");
   - the text SemiBold 14/20 in Cream, 20px under the title, a blank
     line between its paragraphs;
   - "Explore ML Development" SemiBold 14 at the foot (pinned, 30px
     from the bottom), stretched over the card. Hover and keyboard
     focus light the card's ring in Light Orange and turn the arrow
     Light Orange as it slides; the label stays (Light Orange text on
     Secondary Navy is 4.42:1). The focus ring goes round the card in
     the light-background colour (it is drawn on White).
   Its heading comes first in the source; the badge is drawn above it
   (order). Phones and tablets: the course cards' widths, as the grid
   gives them (not designed).
   ============================================================ */

.ml-callout {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 16px 20px 30px;
	border-radius: var(--radius-md);
	background-color: var(--ml-callout-bg);
	color: var(--color-text-on-dark);
}

.ml-callout::before {
	content: "";
	position: absolute;
	inset: 0;
	border: var(--border-accent) solid var(--color-accent);
	border-radius: inherit;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--transition);
}

.ml-callout__badge {
	order: -1;
	display: flex;
	align-self: flex-start;
	align-items: center;
	height: 25px;
	padding-inline: 10px;
	border-radius: var(--radius-pill);
	background-color: var(--color-leadership);
	color: var(--color-badge-text-leadership);
	font-size: var(--fs-badge);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-tag);
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
}

.ml-callout__title {
	margin-top: 22px;
	color: var(--color-heading-on-dark);
	font-size: var(--fs-ml-callout-title);
	line-height: 1.1875;
	overflow-wrap: anywhere;
}

.ml-callout__text {
	margin-top: 20px;
	font-size: var(--fs-small);
	font-weight: var(--fw-semibold);
	line-height: 20px;
}

.ml-callout__action {
	margin-top: auto;
	padding-top: 22px;
}

.ml-callout__link {
	color: var(--color-link-on-dark);
	font-size: var(--fs-small);
}

.ml-callout__link:hover .icon,
.ml-callout__link:focus-visible .icon {
	color: var(--color-accent);
}

.ml-callout__link:focus-visible {
	outline: none;
}

.ml-callout__link::after {
	border-radius: var(--radius-md);
}

.ml-callout__link:focus-visible::after {
	outline: 2px solid var(--color-focus-light);
	outline-offset: 3px;
}

.ml-callout:has(.ml-callout__link:focus-visible)::before {
	opacity: 1;
}

@media (hover: hover) {
	.ml-callout:hover::before {
		opacity: 1;
	}
}

/* Windows High Contrast: the fill goes, so a transparent outline keeps
   the card's edge; the badge keeps its pill. */
@media (forced-colors: active) {
	.ml-callout,
	.ml-callout__badge {
		outline: var(--border-hairline) solid transparent;
	}
}