/*
 * Cards: Resource, Program, Metric, Glass, Info, News, Logo tile, Statement, Bordered statement.
 * Static look comes from inc/blocks/block-styles.php. This file adds:
 * - interaction states (hover, focus-within, active)
 * - a stretched link: when the card title contains a link, the whole card is clickable
 * - details theme.json cannot express (accent bars, backdrop blur, image cropping)
 * Hover states only apply when the card actually contains a link.
 */

:where(
	.is-style-card-resource,
	.is-style-card-program,
	.is-style-card-metric,
	.is-style-card-glass,
	.is-style-card-step,
	.is-style-card-info,
	.is-style-card-news,
	.is-style-card-logo-tile,
	.is-style-card-statement,
	.is-style-card-bordered
) {
	position: relative;
	overflow: hidden;
	transition:
		transform var(--wp--custom--motion--base) var(--wp--custom--motion--ease),
		box-shadow var(--wp--custom--motion--base) var(--wp--custom--motion--ease),
		background-color var(--wp--custom--motion--base) var(--wp--custom--motion--ease),
		border-color var(--wp--custom--motion--base) var(--wp--custom--motion--ease);
}

/* Titles inside cards: no underline until hover. */
:where([class*="is-style-card-"]) :is(h2, h3, h4) a {
	color: inherit;
	text-decoration: none;
}

/* Stretched link: the title link covers the whole card. */
:where([class*="is-style-card-"]) :is(h2, h3, h4) a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* Other links and buttons stay clickable above the stretched link. */
:where([class*="is-style-card-"]) :is(p, .wp-block-buttons) a {
	position: relative;
	z-index: 2;
}

/* Keyboard focus rings the whole card. */
[class*="is-style-card-"]:has(:is(h2, h3, h4) a:focus-visible) {
	outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--navy);
	outline-offset: var(--wp--custom--focus--offset);
}
[class*="is-style-card-"] :is(h2, h3, h4) a:focus-visible {
	outline: none;
}

/* ---------- Resource ---------- */
.is-style-card-resource {
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
}
.is-style-card-resource :is(.wp-block-image, .wp-block-post-featured-image) {
	margin: 0;
	overflow: hidden;
}
.is-style-card-resource :is(.wp-block-image, .wp-block-post-featured-image) img {
	display: block;
	width: 100%;
	height: 240px;
	object-fit: cover;
	transition: transform 640ms var(--wp--custom--motion--ease-entrance);
}
@media (hover: hover) and (pointer: fine) {
	.is-style-card-resource:has(a) {
		transition:
			transform 400ms var(--wp--custom--motion--ease-entrance),
			box-shadow 400ms var(--wp--custom--motion--ease-entrance);
	}
	.is-style-card-resource:has(a):hover {
		transform: translateY(-6px) scale(1.012);
		box-shadow: var(--wp--preset--shadow--float);
	}
	.is-style-card-resource:has(a):hover .is-style-arrow-link a::after {
		transform: translateX(2px);
	}
}
.is-style-card-resource:has(a):active {
	transform: translateY(-2px) scale(0.996);
	transition-duration: var(--wp--custom--motion--press);
}

/* Reveal (class pqmd-reveal): photo settles from 1.07. */
.is-style-card-resource.pqmd-reveal {
	--pqmd-reveal-shift: 20px;
	--pqmd-reveal-scale: 0.985;
}
.pqmd-js .is-style-card-resource.pqmd-reveal:not(.is-revealed) :is(.wp-block-image, .wp-block-post-featured-image) img {
	transform: scale(1.07);
}

/* ---------- Program (glass on imagery) ---------- */
.is-style-card-program {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 300px;
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}
.is-style-card-program .wp-block-icon,
.is-style-card-program .pqmd-card-icon {
	color: var(--wp--preset--color--lime);
	width: var(--wp--custom--icon--card);
}
.is-style-card-program .wp-block-icon svg {
	width: 100%;
	height: auto;
}
.is-style-card-program:has(a):hover {
	background-color: var(--wp--preset--color--navy-deep);
	border-color: var(--wp--custom--glass--white-border);
	transform: translateY(-2px);
}
.is-style-card-program:has(a):hover .is-style-arrow-link a::after {
	transform: translateX(4px);
}
.is-style-card-program:has(:focus-visible) {
	outline-color: var(--wp--preset--color--yellow);
}

/* ---------- Metric and Glass: one glass base (inc/blocks/block-styles.php $glass_card) ---------- */
:is(.is-style-card-metric, .is-style-card-glass) {
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
}
.is-style-card-metric.pqmd-reveal {
	--pqmd-reveal-shift: 48px;
	--pqmd-reveal-scale: 0.985;
}
.is-style-card-metric > :first-child {
	font-variant-numeric: tabular-nums;
}
.is-style-card-metric > :first-child {
	font-size: var(--wp--custom--font-size--metric);
	line-height: 1;
	color: var(--wp--preset--color--white);
}

/* ---------- Glass: Metric's sibling for icon, title and copy ---------- */
.is-style-card-glass {
	display: flex;
	flex-direction: column;
}
.is-style-card-glass > * {
	margin-block: 0;
}
.is-style-card-glass :is(h2, h3) {
	font-size: var(--wp--custom--font-size--statement);
	line-height: 1.1;
}
.is-style-card-glass .wp-block-icon {
	width: var(--wp--custom--icon--card);
	color: var(--wp--preset--color--lime);
}
.is-style-card-glass .wp-block-icon svg {
	width: 100%;
	height: auto;
}
/* A trailing link sits at the bottom so links line up across a row. */
.is-style-card-glass > .is-style-link-underline:last-child {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--m);
}
/* The reference scales every glass card on hover, link or not. */
@media (hover: hover) and (pointer: fine) {
	.is-style-card-glass {
		transition:
			transform 320ms var(--wp--custom--motion--ease-entrance),
			box-shadow 320ms ease;
	}
	.is-style-card-glass:hover {
		transform: scale(1.03);
		box-shadow: var(--wp--preset--shadow--raised);
	}
}
.is-style-card-glass.pqmd-reveal {
	--pqmd-reveal-shift: 20px;
	--pqmd-reveal-scale: 0.985;
}

/* ---------- Step (numbered timeline row; Row layout: Step number, then a body group) ---------- */
.is-style-card-step > .wp-block-group {
	flex: 1 1 0;
	min-width: 0;
}
.is-style-card-step > .wp-block-group > * {
	margin-block: 0;
}
.is-style-card-step > .wp-block-group > :is(h2, h3) {
	margin-bottom: var(--wp--preset--spacing--xxs);
	font-size: var(--wp--preset--font-size--heading);
}
/* The date after the title: select it and use Highlight > Text, color Muted. */
.is-style-card-step :is(h2, h3) mark {
	background: none;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	white-space: nowrap;
}
.is-style-card-step.pqmd-reveal {
	--pqmd-reveal-shift: 20px;
	--pqmd-reveal-scale: 0.985;
}

/* ---------- Info ---------- */
.is-style-card-info:has(a):hover {
	background-color: var(--wp--preset--color--white);
	box-shadow: var(--wp--preset--shadow--lift);
	transform: translateY(-2px);
}

/* ---------- News ---------- */
.is-style-card-news {
	overflow: visible;
}
.is-style-card-news:has(a):hover {
	border-bottom-color: var(--wp--preset--color--orange);
}
.is-style-card-news:has(a):hover :is(h2, h3, h4) a {
	color: var(--wp--preset--color--navy-hover);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}
.is-style-card-news:has(a):hover .is-style-arrow-link a::after {
	transform: translateX(4px);
}

/* ---------- Logo tile ---------- */
.is-style-card-logo-tile {
	display: flex;
	align-items: center;
	justify-content: center;
}
/* A fixed box for the logo: SVGs without width/height would otherwise collapse to 0 wide. */
.is-style-card-logo-tile .wp-block-image img {
	display: block;
	width: 100%;
	height: 44px;
	object-fit: contain;
	opacity: 0.75;
	filter: grayscale(1);
	transition:
		opacity var(--wp--custom--motion--base) var(--wp--custom--motion--ease),
		filter var(--wp--custom--motion--base) var(--wp--custom--motion--ease);
}
.is-style-card-logo-tile :is(.wp-block-image, figure) {
	width: 100%;
	margin: 0;
}
.is-style-card-logo-tile:hover img {
	opacity: 1;
	filter: none;
}
.is-style-card-logo-tile:has(a):hover {
	background-color: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--border);
	box-shadow: var(--wp--preset--shadow--card);
}
.is-style-card-logo-tile a:focus-visible {
	outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--navy);
	outline-offset: var(--wp--custom--focus--offset);
}

/* ---------- Statement (static) ---------- */
.is-style-card-statement :is(h2, h3) {
	font-size: var(--wp--custom--font-size--statement);
	line-height: 1.1;
}

/* ---------- Bordered statement (static) ---------- */
.is-style-card-bordered :is(h2, h3) {
	font-size: var(--wp--preset--font-size--heading);
}