/*
 * MiraeLaw Home — Areas of Expertise section
 *
 * The card grid is rendered dynamically from the `practice_area` CPT via the
 * `[miraelaw_areas_of_expertise]` shortcode (inc/home/areas-of-expertise.php),
 * not as static Elementor widgets — so, unlike the rest of this file, the
 * typography/color rules below for .ml-area-card and its children are load-
 * bearing (there's no Elementor widget generating them). Every value comes
 * from design-system.css custom properties, matching what the equivalent
 * Elementor widget settings resolved to when this section was static.
 */

.ml-areas-inner {
	padding-top: var( --ml-spacing-section-md );
	padding-bottom: var( --ml-spacing-section-md );
}

.ml-areas-h2 .elementor-heading-title {
	font-size: var( --ml-text-h2 );
}

.ml-areas-subtitle {
	max-width: 26em;
}

.ml-areas-header-row {
	margin-bottom: 36px;
}

/* ---------------------------------------------------------------
 * Numbered-row grid — Elementor's native Grid mode can't do
 * auto-fit/minmax, so the layout is expressed here instead.
 * ------------------------------------------------------------- */
.ml-areas-grid {
	display: grid !important;
	/* min(420px, 100%) lets the track shrink below 420px on narrow viewports
	   instead of overflowing — plain minmax(420px, 1fr) has a hard 420px
	   floor that causes horizontal scroll under ~420px. */
	grid-template-columns: repeat( auto-fit, minmax( min( 420px, 100% ), 1fr ) ) !important;
	column-gap: 56px;
	row-gap: 0;
}

.ml-area-card {
	display: grid !important;
	grid-template-columns: 44px 1fr auto;
	gap: 16px;
	align-items: baseline;
	padding: 20px 4px;
	border-bottom: 1px solid var( --ml-border-warm );
	text-decoration: none;
	transition: background-color var( --ml-transition-base );
}

.ml-area-card:hover,
.ml-area-card:focus-visible {
	background-color: var( --ml-surface );
}

.ml-area-number {
	font-family: var( --ml-font-mono );
	font-size: 13px;
	color: var( --ml-accent );
}

.ml-area-stack {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.ml-area-title {
	margin: 0;
	font-family: var( --ml-font-heading );
	font-weight: 600;
	font-size: 22px;
	line-height: 1.2em;
	color: var( --ml-primary );
}

.ml-area-blurb {
	margin: 0;
	font-family: var( --ml-font-body );
	font-weight: 400;
	font-size: 14px;
	line-height: 1.5em;
	color: var( --ml-neutral-600 );
}

.ml-area-arrow {
	display: inline-block;
	font-size: 18px;
	color: var( --ml-secondary );
	transition: transform var( --ml-transition-base );
}

.ml-area-card:hover .ml-area-arrow,
.ml-area-card:focus-visible .ml-area-arrow {
	transform: translateX( 4px );
}

/* Accessibility — visible focus state (the whole row is one <a>) */
.ml-area-card:focus-visible {
	outline: 3px solid var( --ml-accent );
	outline-offset: -2px;
}

@media ( prefers-reduced-motion: reduce ) {
	.ml-area-card,
	.ml-area-arrow {
		transition: none;
	}
}