/*
 * Cards: trust metrics, services, projects, reviews, counties, and cities.
 *
 * Two rules hold across every card here.
 *
 *   1. The whole card is clickable through a stretched link on the title, so the
 *      accessible name of the link is the title rather than the word "read more",
 *      and keyboard focus lands on something meaningful.
 *   2. Titles are always visible. Nothing important is revealed only on hover.
 */

.afc-card-base,
.afc-service-card,
.afc-project-card,
.afc-county-card,
.afc-trust-card,
.afc-review-card,
.afc-card {
	position: relative;
	display: flex;
	flex-direction: column;
	block-size: 100%;
	background: var(--afc-color-surface);
	border-radius: var(--afc-radius-sm);
}

/* The stretched link pattern. The anchor covers the card, the card itself shows
   the focus ring so the outline surrounds the whole tile. */
.afc-card-link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}

.afc-card-link:focus-visible {
	outline: none;
}

:where(.afc-service-card, .afc-project-card, .afc-county-card, .afc-card):has(.afc-card-link:focus-visible) {
	outline: var(--afc-focus-ring-width) solid var(--afc-color-focus);
	outline-offset: var(--afc-focus-ring-offset);
}

/* Browsers without :has still show a ring, just on the link itself. */
@supports not selector(:has(*)) {
	.afc-card-link:focus-visible {
		outline: var(--afc-focus-ring-width) solid var(--afc-color-focus);
		outline-offset: var(--afc-focus-ring-offset);
	}
}

/* Anything interactive that sits above the stretched link. */
.afc-card-above {
	position: relative;
	z-index: 2;
}

/* ===========================================================================
 * D. Trust metric cards
 * ======================================================================== */

.afc-trust {
	display: grid;
	gap: var(--afc-gap-grid);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.afc-trust-card {
	gap: 0.35rem;
	padding: var(--afc-space-md) 0 0;
	border-block-start: var(--afc-rule-weight) solid var(--afc-color-brand-red);
	background: none;
}

.afc-trust-card--boxed {
	padding: var(--afc-space-md);
	border: var(--afc-border-hairline);
	border-block-start: var(--afc-rule-weight) solid var(--afc-color-brand-red);
	background: var(--afc-color-surface);
}

.afc-trust-card__metric {
	color: var(--afc-color-text-strong);
	font-family: var(--afc-font-display);
	font-size: var(--afc-text-metric);
	font-weight: var(--afc-weight-bold);
	font-variation-settings: var(--afc-display-variation);
	line-height: 1;
	letter-spacing: var(--afc-tracking-display);
	font-variant-numeric: tabular-nums;
}

.afc-trust-card__label {
	font-family: var(--afc-font-display);
	font-size: var(--afc-text-h4);
	font-weight: var(--afc-weight-semibold);
	line-height: var(--afc-leading-snug);
	color: var(--afc-color-text-strong);
}

.afc-trust-card__text {
	margin: 0;
	font-size: var(--afc-text-body-sm);
	color: var(--afc-color-text-muted);
}

.afc-surface--dark .afc-trust-card__metric,
.afc-surface--darker .afc-trust-card__metric,
.afc-surface--dark .afc-trust-card__label,
.afc-surface--darker .afc-trust-card__label {
	color: var(--afc-color-text-on-dark);
}

.afc-surface--dark .afc-trust-card__text,
.afc-surface--darker .afc-trust-card__text {
	color: var(--afc-color-text-muted-on-dark);
}

/* ===========================================================================
 * E. Service cards
 * ======================================================================== */

.afc-service-card {
	container-type: inline-size;
	overflow: hidden;
	border: var(--afc-border-hairline);
	transition:
		border-color var(--afc-duration) var(--afc-ease-standard),
		box-shadow var(--afc-duration) var(--afc-ease-standard),
		transform var(--afc-duration) var(--afc-ease-standard);
}

.afc-service-card:hover {
	border-color: var(--afc-color-border-strong);
	box-shadow: var(--afc-shadow-md);
	transform: translateY(-3px);
}

.afc-service-card__media {
	--afc-media-ratio: 3 / 2;
	border-radius: 0;
}

.afc-service-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--afc-space-2xs);
	padding: var(--afc-space-md);
	flex: 1 1 auto;
}

.afc-service-card__title {
	margin: 0;
	font-size: var(--afc-text-h4);
}

.afc-service-card__title a {
	color: var(--afc-color-text-strong);
	text-decoration: none;
}

.afc-service-card:hover .afc-service-card__title a {
	color: var(--afc-color-brand-red-dark);
}

.afc-service-card__text {
	margin: 0;
	color: var(--afc-color-text-muted);
	font-size: var(--afc-text-body-sm);
}

.afc-service-card__more {
	margin-block-start: auto;
	padding-block-start: var(--afc-space-xs);
	color: var(--afc-color-brand-red);
	font-size: var(--afc-text-body-sm);
	font-weight: var(--afc-weight-bold);
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
}

.afc-service-card:hover .afc-service-card__more .afc-icon {
	transform: translateX(3px);
}

.afc-service-card__more .afc-icon {
	transition: transform var(--afc-duration) var(--afc-ease-standard);
}

/* Icon led variant: a drawn glyph in place of a photograph. */
.afc-service-card--icon .afc-service-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 52px;
	block-size: 52px;
	margin-block-end: var(--afc-space-2xs);
	border: 1px solid var(--afc-color-border-strong);
	color: var(--afc-color-brand-navy);
	font-size: 24px;
}

.afc-service-card--compact .afc-service-card__body {
	padding: var(--afc-space-sm);
}

.afc-service-card--compact .afc-service-card__title {
	font-size: 1.0625rem;
}

.afc-service-card--featured {
	border-color: var(--afc-color-brand-navy);
	box-shadow: var(--afc-shadow-sm);
}

.afc-service-card--featured .afc-service-card__media {
	--afc-media-ratio: 16 / 9;
}

.afc-service-card--dark {
	border-color: var(--afc-color-border-on-dark);
	background: rgba(255, 255, 255, 0.04);
}

.afc-service-card--dark .afc-service-card__title,
.afc-service-card--dark .afc-service-card__title a {
	color: var(--afc-color-text-on-dark);
}

.afc-service-card--dark .afc-service-card__text {
	color: var(--afc-color-text-muted-on-dark);
}

.afc-service-card--dark:hover {
	border-color: rgba(255, 255, 255, 0.4);
}

/* Horizontal variant. Container query, so the card adapts to the column it is
   placed in rather than to the width of the window. */
.afc-service-card--horizontal .afc-service-card__media {
	--afc-media-ratio: 16 / 9;
}

@container (min-width: 30rem) {
	.afc-service-card--horizontal {
		display: grid;
		grid-template-columns: 40% 1fr;
		align-items: stretch;
	}

	.afc-service-card--horizontal .afc-service-card__media {
		--afc-media-ratio: auto;
		block-size: 100%;
	}
}

/* ===========================================================================
 * F. Project cards
 * ======================================================================== */

.afc-project-grid {
	display: grid;
	gap: var(--afc-gap-grid);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.afc-project-grid--editorial {
	grid-auto-flow: dense;
}

.afc-project-card {
	overflow: hidden;
	border: var(--afc-border-hairline);
	transition:
		border-color var(--afc-duration) var(--afc-ease-standard),
		box-shadow var(--afc-duration) var(--afc-ease-standard);
}

.afc-project-card:hover {
	border-color: var(--afc-color-border-strong);
	box-shadow: var(--afc-shadow-md);
}

.afc-project-card__media {
	border-radius: 0;
}

.afc-project-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	padding: var(--afc-space-sm) var(--afc-space-md) var(--afc-space-md);
	flex: 1 1 auto;
}

.afc-project-card__category {
	color: var(--afc-color-brand-red);
	font-size: var(--afc-text-eyebrow);
	font-weight: var(--afc-weight-bold);
	letter-spacing: var(--afc-tracking-eyebrow);
	text-transform: uppercase;
}

.afc-project-card__title {
	margin: 0;
	font-size: var(--afc-text-h4);
	line-height: var(--afc-leading-snug);
}

.afc-project-card__title a {
	color: var(--afc-color-text-strong);
	text-decoration: none;
}

.afc-project-card:hover .afc-project-card__title a {
	color: var(--afc-color-brand-red-dark);
}

.afc-project-card__location {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	color: var(--afc-color-text-muted);
	font-size: var(--afc-text-body-sm);
}

/* Ratio variants. The card keeps its shape, the photograph is never distorted. */
.afc-project-card--portrait .afc-project-card__media {
	--afc-media-ratio: 4 / 5;
}

.afc-project-card--square .afc-project-card__media {
	--afc-media-ratio: 1 / 1;
}

.afc-project-card--pano .afc-project-card__media {
	--afc-media-ratio: 21 / 9;
}

.afc-project-card--landscape .afc-project-card__media {
	--afc-media-ratio: 4 / 3;
}

/* Featured tile: copy sits over the photograph, protected by a scrim. The title
   stays in the flow, it is not a hover reveal. */
.afc-project-card--featured {
	border: 0;
	background: var(--afc-color-surface-darker);
	color: var(--afc-color-text-on-dark);
}

@media (min-width: 700px) {
	.afc-project-card--featured {
		grid-column: span 2;
		grid-row: span 2;
	}
}

.afc-project-card--featured .afc-project-card__media {
	position: absolute;
	inset: 0;
	--afc-media-ratio: auto;
	block-size: 100%;
}

.afc-project-card--featured .afc-project-card__body {
	position: relative;
	z-index: 1;
	margin-block-start: auto;
	padding: var(--afc-space-lg);
	min-block-size: 18rem;
	justify-content: flex-end;
}

.afc-project-card--featured .afc-project-card__title a,
.afc-project-card--featured .afc-project-card__location {
	color: var(--afc-white);
}

.afc-project-card--featured .afc-project-card__title {
	font-size: var(--afc-text-h3);
}

.afc-project-card--featured .afc-project-card__category {
	color: var(--afc-white);
}

/* Compact related project card. */
.afc-project-card--compact .afc-project-card__body {
	padding: var(--afc-space-xs) var(--afc-space-sm) var(--afc-space-sm);
}

.afc-project-card--compact .afc-project-card__title {
	font-size: 1rem;
}

/* Placeholder used when a record has no featured image. Never a fake photo. */
.afc-media--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background:
		repeating-linear-gradient(
			135deg,
			var(--afc-color-surface-stone),
			var(--afc-color-surface-stone) 10px,
			var(--afc-color-surface-subtle) 10px,
			var(--afc-color-surface-subtle) 20px
		);
	color: var(--afc-color-text-muted);
	font-size: var(--afc-text-caption);
	text-align: center;
}

/* ===========================================================================
 * G. Review card shell
 * ======================================================================== */

.afc-review-card {
	gap: var(--afc-space-sm);
	padding: var(--afc-space-lg);
	border: var(--afc-border-hairline);
	border-block-start: var(--afc-rule-weight) solid var(--afc-color-brand-navy);
}

.afc-review-card__mark {
	color: var(--afc-color-border-strong);
	font-family: var(--afc-font-display);
	font-size: 2.5rem;
	line-height: 0.7;
}

.afc-review-card__quote {
	margin: 0;
	font-size: var(--afc-text-body-lg);
	line-height: var(--afc-leading-snug);
	color: var(--afc-color-text);
}

.afc-review-card__attribution {
	margin: 0;
	font-size: var(--afc-text-body-sm);
	color: var(--afc-color-text-muted);
}

.afc-review-card__source {
	margin-block-start: auto;
	padding-block-start: var(--afc-space-xs);
	font-size: var(--afc-text-body-sm);
}

/* The shell ships empty on purpose. Nothing here invents a rating or a count. */
.afc-review-card--empty {
	border-style: dashed;
	border-block-start-style: solid;
	background: var(--afc-color-surface-subtle);
	color: var(--afc-color-text-muted);
}

/* ===========================================================================
 * H. County cards
 * ======================================================================== */

.afc-county-grid {
	display: grid;
	gap: var(--afc-gap-grid);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.afc-county-card {
	overflow: hidden;
	background: var(--afc-color-surface-dark);
	color: var(--afc-color-text-on-dark);
	min-block-size: 20rem;
	justify-content: flex-end;
}

.afc-county-card__media {
	position: absolute;
	inset: 0;
	--afc-media-ratio: auto;
	border-radius: 0;
	opacity: 0.62;
	transition: opacity var(--afc-duration) var(--afc-ease-standard), transform var(--afc-duration-slow) var(--afc-ease-standard);
}

.afc-county-card:hover .afc-county-card__media {
	opacity: 0.75;
}

/* Diagonal cut across the base of the tile, echoing the mitre on a gate frame.
   Purely decorative, so it degrades to a flat panel without clip-path. */
.afc-county-card__body {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: var(--afc-space-lg) var(--afc-space-md) var(--afc-space-md);
	background: linear-gradient(180deg, rgba(7, 13, 32, 0) 0%, rgba(7, 13, 32, 0.9) 45%);
}

.afc-county-card__name {
	margin: 0;
	font-size: var(--afc-text-h3);
	color: var(--afc-white);
}

.afc-county-card__name a {
	color: inherit;
	text-decoration: none;
}

.afc-county-card__text {
	margin: 0;
	color: var(--afc-color-text-muted-on-dark);
	font-size: var(--afc-text-body-sm);
}

.afc-county-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em 1em;
	margin-block-start: var(--afc-space-2xs);
	padding-block-start: var(--afc-space-2xs);
	border-block-start: 1px solid var(--afc-color-border-on-dark);
	color: var(--afc-color-text-muted-on-dark);
	font-size: var(--afc-text-caption);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Light variant, for a county grid placed on a pale section. */
.afc-county-card--light {
	background: var(--afc-color-surface);
	color: var(--afc-color-text);
	border: var(--afc-border-hairline);
	min-block-size: 0;
}

.afc-county-card--light .afc-county-card__media {
	position: relative;
	--afc-media-ratio: 16 / 9;
	opacity: 1;
}

.afc-county-card--light .afc-county-card__body {
	background: none;
	padding: var(--afc-space-md);
}

.afc-county-card--light .afc-county-card__name,
.afc-county-card--light .afc-county-card__name a {
	color: var(--afc-color-text-strong);
}

.afc-county-card--light .afc-county-card__text,
.afc-county-card--light .afc-county-card__meta {
	color: var(--afc-color-text-muted);
}

.afc-county-card--light .afc-county-card__meta {
	border-block-start-color: var(--afc-color-border);
}

/* ===========================================================================
 * I. City links
 * ======================================================================== */

.afc-city-groups {
	display: grid;
	gap: var(--afc-gap-grid);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.afc-city-group__heading {
	margin-block-end: var(--afc-space-2xs);
	padding-block-end: var(--afc-space-2xs);
	border-block-end: var(--afc-border-hairline);
	font-size: var(--afc-text-h4);
}

.afc-city-list {
	display: grid;
	gap: 0.1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.afc-city-list a {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	min-block-size: 40px;
	color: var(--afc-color-text);
	font-size: var(--afc-text-body-sm);
	text-decoration: none;
}

.afc-city-list a:hover {
	color: var(--afc-color-brand-red-dark);
	text-decoration: underline;
}

.afc-city-list a::before {
	content: "";
	inline-size: 10px;
	block-size: 1px;
	background: var(--afc-color-border-strong);
	flex: 0 0 auto;
	transition: inline-size var(--afc-duration-fast) var(--afc-ease-standard);
}

.afc-city-list a:hover::before {
	inline-size: 18px;
	background: var(--afc-color-brand-red);
}

/* Featured city card */
.afc-city-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	padding: var(--afc-space-md);
	border: var(--afc-border-hairline);
	border-radius: var(--afc-radius-sm);
	background: var(--afc-color-surface);
	block-size: 100%;
}

.afc-city-card__name {
	margin: 0;
	font-size: var(--afc-text-h4);
}

.afc-city-card__name a {
	color: var(--afc-color-text-strong);
	text-decoration: none;
}

.afc-city-card__county {
	color: var(--afc-color-text-muted);
	font-size: var(--afc-text-caption);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.afc-city-card__text {
	margin: 0;
	color: var(--afc-color-text-muted);
	font-size: var(--afc-text-body-sm);
}

.afc-city-card:hover {
	border-color: var(--afc-color-border-strong);
	box-shadow: var(--afc-shadow-sm);
}

/* ===========================================================================
 * Generic content card, used by archives and search results
 * ======================================================================== */

.afc-card {
	overflow: hidden;
	border: var(--afc-border-hairline);
	transition: box-shadow var(--afc-duration) var(--afc-ease-standard), border-color var(--afc-duration) var(--afc-ease-standard);
}

.afc-card:hover {
	border-color: var(--afc-color-border-strong);
	box-shadow: var(--afc-shadow-md);
}

.afc-card__media {
	--afc-media-ratio: 4 / 3;
	border-radius: 0;
}

.afc-card__image {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: var(--afc-object-position, 50% 50%);
}

.afc-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: var(--afc-space-md);
	flex: 1 1 auto;
}

.afc-card__meta {
	color: var(--afc-color-brand-red);
	font-size: var(--afc-text-eyebrow);
	font-weight: var(--afc-weight-bold);
	letter-spacing: var(--afc-tracking-eyebrow);
	text-transform: uppercase;
}

.afc-card__title {
	margin: 0;
	font-size: var(--afc-text-h4);
}

.afc-card__title a {
	color: var(--afc-color-text-strong);
	text-decoration: none;
}

.afc-card:hover .afc-card__title a {
	color: var(--afc-color-brand-red-dark);
}

.afc-card__excerpt {
	margin: 0;
	color: var(--afc-color-text-muted);
	font-size: var(--afc-text-body-sm);
}

.afc-grid--cards {
	display: grid;
	gap: var(--afc-gap-grid);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}