/*=========================
	CARDS LINK GRID BLOCK
	Centered intro above a centered, wrapping row of text links.
=========================*/

.block-cards-link-grid {
	position: relative;
}

/* Header — centered */
.block-cards-link-grid .header {
	margin: 0 auto var(--space-5);
	max-width: 70%;
	text-align: center;
}
.block-cards-link-grid .header .top-title {
	display: block;
	margin-bottom: var(--space-2);
}
.block-cards-link-grid .header .top-title::after {
	display: none;
}
.block-cards-link-grid .header .title {
	margin: -1px 0 var(--space-4);
}
.block-cards-link-grid .header .copy {
	margin-top: var(--space-2);
	font-weight: 700;
}
.block-cards-link-grid .header .copy p:last-child {
	margin-bottom: 0;
}

/* Cards — a FIXED 4-up grid, matching live's col-xs-16 / col-sm-8 / col-md-4 (of 16 cols):
   1 per row on mobile, 2 on tablet, 4 per row on desktop.
   It used to be a flex-wrap row of 200px items, which packed 5 across on a wide screen and
   left an uneven 5 + 3 for the 8-state grid — live is a clean 4 + 4. */
.block-cards-link-grid .cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	justify-content: center;
	gap: var(--space-4) var(--space-6);
}
@media (min-width: 768px) {
	.block-cards-link-grid .cards {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (min-width: 992px) {
	.block-cards-link-grid .cards {
		grid-template-columns: repeat(4, 1fr);
	}
}
.block-cards-link-grid .card-item {
	min-width: 0;   /* allow the track to shrink instead of blowing out the grid */
}

/* Card link */
.block-cards-link-grid .card {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	background: transparent;
	border: none;
}

/* Title flows INLINE so the arrow always hugs the last word — as a flex row, a wrapped
   title (Australian Capital Territory) filled the track and shoved the arrow to the far
   edge while single-line cards kept it snug (Userback, 2026-07-16). */
.block-cards-link-grid .card-title {
	display: block;
	margin: 0;
	color: var(--color-n-black);
	font-size: 24px;
	line-height: 1.2;
	font-weight: 600;
}
/* NO underline sweep on the title. Hover is expressed by the ACCENT BAR going full width
   (see .card-accent-bar below) — the label itself must stay undecorated, hover included. */
.block-cards-link-grid .card-title__text {
	display: inline;
	padding-bottom: 2px;
	text-decoration: none;
}
/* Keep the last word + arrow together so the arrow never drops onto its own
   line when a title wraps — it sits next to the text on the last line. */
.block-cards-link-grid .card-title__last {
	white-space: nowrap;
}
.block-cards-link-grid a.card,
.block-cards-link-grid a.card:hover,
.block-cards-link-grid a.card:focus-visible,
.block-cards-link-grid a.card:hover .card-title__text,
.block-cards-link-grid a.card:focus-visible .card-title__text {
	text-decoration: none;
}

.block-cards-link-grid .card-title__icon {
	display: inline-flex;
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	margin-left: 10px;
	vertical-align: -4px;
	color: var(--color-n-black);
	transition: transform .25s ease;
}
.block-cards-link-grid .card-title__icon svg {
	width: 100%;
	height: 100%;
}
.block-cards-link-grid a.card:hover .card-title__icon,
.block-cards-link-grid a.card:focus-visible .card-title__icon {
	transform: translateX(8px);
}

/* Accent underline — per card colour via --accent-c.
   Sits at 50% and sweeps to FULL WIDTH on hover/focus. That sweep IS the hover affordance. */
/* The bar is full width and SCALED to 50%, sweeping to 100% on hover.
   (Animating `width` between percentages is unreliable; transform is smooth + GPU-friendly.) */
.block-cards-link-grid .card-accent-bar {
	display: block;
	height: 4px;
	width: 100%;
	margin-top: 14px;
	background: var(--accent-c, var(--accent-green));
	transform: scaleX(.5);
	transform-origin: left center;
	transition: transform .35s cubic-bezier(.4, 0, 0, 1);
}
.block-cards-link-grid a.card:hover .card-accent-bar,
.block-cards-link-grid a.card:focus-visible .card-accent-bar,
.block-cards-link-grid .card-item:hover .card-accent-bar {
	transform: scaleX(1);
}

/* Responsive (tablet + mobile fixes — Userback on guide-dogs-access-statements-2, 2026-07-16) */
@media only screen and (max-width: 991.98px) {
	/* Match live on the stacked view: the LINK spans the full width so the title
	   stays on ONE LINE as much as possible, while the accent bar is a short,
	   FIXED-width underline (decoupled from the text) — not a full-bleed bar and
	   not tied to the label width. */
	.block-cards-link-grid .card {
		width: auto;
	}
	.block-cards-link-grid .card-accent-bar {
		width: 130px;
		max-width: 100%;
		transform: none;
	}
}
@media only screen and (max-width: 767.98px) {
	/* 40px title in a 70%-wide centred header wrapped to seven ragged lines on phones */
	.block-cards-link-grid .header {
		max-width: 100%;
	}
	.block-cards-link-grid .header .title {
		font-size: 28px !important;
	}
	.block-cards-link-grid .cards {
		grid-template-columns: 1fr;
		padding-left: var(--space-5);
	}
}
@media only screen and (max-width: 575.98px) {
	.block-cards-link-grid .card-item {
		width: 100%;
		max-width: none;
	}
}