/* DOB Starter Theme | css/08-ways.css | v0.1.0 | 2026-04-30 | Generated by Claude, DOB-S8 */
/* Front-page "ways to live bioregionally" grid. Replaces the retired
   network 2-card grid (08-network.css) with a six-up universal-practice
   grid. The grid is rendered as an <ol> so the practice numbers carry
   ordered-list semantics for assistive tech; the visible numbers come
   from the .ways-card__num span (aria-hidden) so screen readers receive
   the native list count and skip the decorative numerals. */

.ways {
	background: var(--c-cream);
}

.ways h2 {
	margin-bottom: var(--s-3);
}

.ways__lede {
	font-size: var(--fs-lede);
	color: var(--c-stone);
	max-width: 42rem;
	margin-bottom: var(--s-6);
}

.ways-grid {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-5);
	counter-reset: none;
}

@media (min-width: 600px) {
	.ways-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1100px) {
	.ways-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--s-5);
	}
}

.ways-card {
	background: var(--c-white);
	border: 1px solid color-mix(in srgb, var(--c-stone) 12%, transparent);
	padding: var(--s-5);
	border-radius: 4px;
	display: flex;
	flex-direction: column;
}

.ways-card__num {
	font-family: var(--f-label);
	font-size: var(--fs-label);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--c-brick);
	margin-bottom: var(--s-3);
	font-weight: 500;
}

.ways-card__title {
	font-size: var(--fs-h3);
	font-weight: 500;
	margin: 0 0 var(--s-2);
	letter-spacing: -0.015em;
}

.ways-card__body {
	color: var(--c-stone);
	margin: 0;
	flex: 1;
}

.ways__cta {
	margin-top: var(--s-7);
	margin-bottom: 0;
}