/*
 * Hover List block - always-visible text cards.
 *
 * The old design hid each item's description behind a jQuery mouseover
 * (transform: scale(0); height: 0) and dimmed every item to opacity: .3. Touch
 * devices do not fire mouseover/mouseout reliably, so on a phone the list stayed
 * greyed out with its descriptions unreachable. Everything is visible now and the
 * block needs no JavaScript.
 *
 * Plain CSS, enqueued directly by the plugin, so it reads the custom properties
 * emitted on :root by scss/_tokens.scss with literal fallbacks - the same
 * approach as team.css and resources.css.
 *
 * The global prefers-reduced-motion block in styles.css uses
 * `*, *::before, *::after { transition-duration: 0.01ms !important }`, which
 * covers the transitions below. No need to repeat it here.
 *
 * ⚠️ DARK SURFACES ONLY. The surface and border colours are white at low alpha
 * and the text is solid white, so this block reads only on a dark background.
 * That was already true - the previous version hardcoded `color: white` - and the
 * one place it is used (homepage, "A full suite of comprehensive services") is a
 * dark section. Anyone placing it on a light background needs a light variant.
 */

.hover-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: -ms-grid;
	display: grid;
	gap: 1rem;
}

.hover-list li {
	/* Anchors the stretched ::after that makes the whole card clickable. */
	position: relative;
	padding: 1.5rem 1.75rem;
	background-color: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--radius-lg, 20px);
	/* Longhand after the shorthand deliberately, to keep the gold accent bar.
	   It used to appear only on the hovered item; it is permanent now. */
	border-left: 3px solid var(--color-secondary, #e8b535);
	/* Overrides the theme's `ul li { margin-bottom }`; the grid gap spaces these. */
	margin-bottom: 0;
	-webkit-transition: background-color var(--duration-base, 250ms) var(--ease, ease), border-color var(--duration-base, 250ms) var(--ease, ease), -webkit-transform var(--duration-base, 250ms) var(--ease, ease);
	transition: background-color var(--duration-base, 250ms) var(--ease, ease),
	            border-color var(--duration-base, 250ms) var(--ease, ease),
	            box-shadow var(--duration-base, 250ms) var(--ease, ease),
	            transform var(--duration-base, 250ms) var(--ease, ease);
}

/* The theme draws bullets with a li::before pseudo-element, which these cards
   must not inherit. */
.hover-list li::before {
	display: none;
}

.hover-list li:hover {
	background-color: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.24);
	border-left-color: var(--color-secondary, #e8b535);
	/* The section behind this is #192730, not black, so a dark shadow still
	   registers against it. */
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
	-webkit-transform: translateY(-2px);
	transform: translateY(-2px);
}

/* The card, not the anchor, takes the ring - the anchor is only the heading but
   the whole card is the hit area. Gold because a green ring is invisible here. */
.hover-list li:focus-within {
	outline: 3px solid var(--color-secondary, #e8b535);
	outline-offset: 2px;
}

.hover-list .hover-list__heading {
	/* !important is load-bearing: `.container p` sets font-size: 1rem. */
	font-size: 1.375em !important;
	line-height: 1.25;
	color: #fff;
	margin-bottom: 0.4em;
	font-weight: var(--weight-heading, 700);
}

.hover-list .hover-list__heading a {
	color: inherit;
	text-decoration: none;
}

/* Stretched link: the anchor wraps only the heading text, so this covers the card
   to make all of it clickable. Same pattern as the partner cards in _site.scss. */
.hover-list .hover-list__heading a::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	border-radius: var(--radius-lg, 20px);
}

.hover-list .hover-list__heading a:focus-visible {
	/* :focus-within on the card draws the ring instead. */
	outline: none;
}

.hover-list .hover-list__text {
	font-size: 15px !important;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.82);
	margin-bottom: 0;
	font-weight: var(--weight-body, 400);
}

.hover-list .hover-list__more {
	display: block;
	margin-top: 0.85rem;
	color: var(--color-secondary, #e8b535);
	font-size: 14px;
	font-weight: 700;
}

.hover-list .hover-list__more::after {
	content: "\2192"; /* → */
	display: inline-block;
	margin-left: 0.4em;
	-webkit-transition: -webkit-transform var(--duration-fast, 150ms) var(--ease, ease);
	transition: transform var(--duration-fast, 150ms) var(--ease, ease);
}

.hover-list li:hover .hover-list__more::after,
.hover-list li:focus-within .hover-list__more::after {
	-webkit-transform: translateX(4px);
	transform: translateX(4px);
}

@media only screen and (max-width: 768px) {
	.hover-list li {
		padding: 1.25rem 1.25rem;
	}
	.hover-list .hover-list__heading {
		font-size: 1.25em !important;
	}
}