/* Stazora: "How a broker works" page grid (A-065 redesign).
   Replaces the legacy WebGL FlexCarousel band with a calm, readable 8-term media card grid.
   Enqueued only on the explainer page (inc/brokers-page.php).
   Four columns on wide screens, two on tablets, one on phones.
   All values read from --stz-* design tokens. Zero JavaScript dependencies. */

.stz-bhow-grid-heading {
	margin-block-start: var(--stz-space-7);
	margin-block-end: var(--stz-space-4);
	font-size: var(--stz-fs-title1);
	font-weight: var(--stz-fw-semibold);
	letter-spacing: var(--stz-track-title);
	line-height: var(--stz-lh-title);
}

.stz-bhow-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--stz-gutter);
	margin-block: var(--stz-space-2) var(--stz-space-6);
	align-items: stretch;
}

@media (width >= 40em) {
	.stz-bhow-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (width >= 64em) {
	.stz-bhow-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.stz-bhow-card {
	position: relative;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--stz-hairline);
	border-radius: var(--stz-radius-card);
	background: var(--stz-surface);
	height: 100%;
	scroll-margin-top: calc(var(--stz-bar) + var(--stz-space-4));
	transition: transform var(--stz-dur-press) var(--stz-ease-press), border-color var(--stz-dur) var(--stz-ease), box-shadow var(--stz-dur) var(--stz-ease);
}

.stz-bhow-card .wp-block-image {
	margin: 0;
	overflow: hidden;
}

.stz-bhow-card .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1.87 / 1;
	object-fit: cover;
	transition: transform var(--stz-dur) var(--stz-ease);
}

.stz-bhow-card h3 {
	margin: 0;
	padding-inline: var(--stz-space-5);
	padding-block-start: var(--stz-space-4);
	font-size: var(--stz-fs-title3);
	font-weight: var(--stz-fw-semibold);
	letter-spacing: var(--stz-track-title);
	line-height: var(--stz-lh-title);
}

.stz-bhow-card h3 a {
	color: var(--stz-text);
	text-decoration: none;
}

.stz-bhow-card h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.stz-bhow-card h3 a:focus-visible {
	outline: none;
}

.stz-bhow-card h3 a:focus-visible::after {
	outline: 3px solid var(--stz-focus);
	outline-offset: 2px;
}

.stz-bhow-card p {
	margin: 0;
	padding-inline: var(--stz-space-5);
	padding-block: var(--stz-space-2) var(--stz-space-5);
	color: var(--stz-text-2);
	font-size: var(--stz-fs-callout);
	line-height: var(--stz-lh-snug);
	flex-grow: 1;
}

.stz-bhow-card:active {
	transform: scale(0.98);
	transition-duration: var(--stz-dur-press);
	transition-timing-function: var(--stz-ease-press);
}

@media (hover: hover) and (pointer: fine) {
	.stz-bhow-card:hover {
		border-color: var(--stz-hairline-hover);
		box-shadow: var(--stz-shadow-raised);
	}

	.stz-bhow-card:hover .wp-block-image img {
		transform: scale(1.03);
	}
}

@media (prefers-contrast: more) {
	.stz-bhow-card {
		border-color: var(--stz-ring);
		box-shadow: var(--stz-ring-contrast);
	}

	.stz-bhow-card p {
		color: var(--stz-text-2);
	}
}

@media (forced-colors: active) {
	.stz-bhow-card {
		border: 1px solid CanvasText;
	}
}