/**
 * card.php — unifies the card patterns documented on the live site
 * (`.pathway-card`, `.process-card`), which share one visual base (14px
 * radius, 1px border, soft shadow) but differ in padding and in how their
 * "label" element is styled. Modeled as one `.card` component with a
 * `variant` modifier for the label treatment and a `size` modifier for
 * the one documented, deliberate padding difference (Home vs. elsewhere)
 * — see docs/CONTENT_MODEL.md §F.
 *
 * Note: verified paddings are 28x26 (pathway, Home) and 30x26 (process,
 * Home). `size: home` uses 28x26 (pathway's value) as the canonical
 * "Home" padding; if Phase 4.1 finds process-card needs the 2px
 * difference preserved exactly, that is a small page-specific override
 * at that time, not a framework change.
 *
 * A third variant, `insight`, previously styled Related Insights teaser
 * cards; those cards and their trailing `.insights-note` caption were
 * removed sitewide (placeholder "Coming Soon" content, never a real
 * feature) — see the practice-template docblocks. card.php's `insight`
 * branch is left in place, unused, rather than stripped, since it costs
 * nothing dormant and the component is otherwise a stable, documented
 * shared file.
 */

.card {
	display: block;
	background: var(--paper-raised);
	border: 1px solid var(--line);
	border-radius: 14px;
	box-shadow: 0 1px 3px rgba(30, 26, 22, .04);
	color: inherit;
	text-decoration: none;
	padding: 22px 20px;
	transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.card--home {
	padding: 28px 26px;
}

/* Hover lift only applies when the card is actually a link — process-card
   is a static, non-interactive card in Version 1.0. */
a.card:hover {
	border-color: var(--oxblood);
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(30, 26, 22, .08);
}

/* Pathway variant (Home's "Who Do We Help" cards). */
.card--pathway .card__heading {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
}

.card--pathway .card__meta {
	margin-top: 16px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--oxblood);
	display: flex;
	align-items: center;
	gap: 8px;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.card--pathway .card__meta .arrow {
	transition: transform .15s ease;
}

.card--pathway:hover .card__meta .arrow {
	transform: translateX(4px);
}

/* Process variant (Home's "Our Process" cards) — static, not a link. */
.card--process .card__label {
	font-family: var(--font-serif);
	font-style: italic;
	color: var(--oxblood);
	font-size: 15px;
	margin-bottom: 14px;
}

.card--process .card__heading {
	font-size: 18px;
	margin-bottom: 10px;
}

.card--process .card__body {
	font-size: 14.5px;
	color: var(--ink-soft);
	line-height: 1.7;
}

/* Grids the cards sit in. */
.card-grid {
	display: grid;
	gap: 16px;
}

.card-grid--2 {
	grid-template-columns: 1fr 1fr;
}

.card-grid--3 {
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}

@media (max-width: 760px) {
	.card-grid--2,
	.card-grid--3 {
		grid-template-columns: 1fr;
	}
}