/*
 * MiraeLaw Areas of Expertise page — Practice Area ledger grid
 *
 * The whole grid is rendered server-side by the [miraelaw_practice_areas_grid]
 * shortcode (inc/practice-areas/class-practice-areas-grid.php) — not
 * Elementor widgets, so every rule below (including typography/color) is
 * load-bearing. Values are taken from design-system.css tokens wherever an
 * exact match exists; the few that don't are noted inline. Same bordered
 * "ledger" technique already established for team-grid.css/home-offices.css:
 * the grid container supplies the outer top/left edges, each card supplies
 * only its own right/bottom edge.
 *
 * `auto-fill` (not `auto-fit`): with 11 cards, most row counts leave a
 * partial last row. auto-fill keeps every row's track widths identical and
 * leaves unused space in a short last row; auto-fit would stretch that
 * last row's cards wider than the ones above — breaking the ledger's
 * uniform-cell look. No @media breakpoints needed — auto-fill/minmax
 * reflows intrinsically, same fluid convention as the rest of this project.
 */

.ml-pa-grid-section-inner {
	/* Fluid clamp() for the Elementor container wrapping the [miraelaw_practice_areas_grid]
	   Shortcode widget — Elementor's own padding control can't express clamp(),
	   and no literal padding is set on the widget itself, so no !important
	   is needed to win against it. */
	padding: clamp( 56px, 8vw, 88px ) 24px;
}

.ml-pa-grid {
	display: grid;
	/* min(320px, 100%) caps the track's minimum at the container's own
	   width: below a ~368px viewport (320px card + 24px×2 section padding),
	   a bare 320px minimum doesn't shrink to fit and forces the grid wider
	   than its container — confirmed overflowing up to 97px at 320px
	   viewport, breaking out to real page-level horizontal scroll at
	   360px and below. min() is a no-op everywhere 320px already fits. */
	grid-template-columns: repeat( auto-fill, minmax( min( 320px, 100% ), 1fr ) );
	gap: 0;
	border-top: 1px solid var( --ml-primary );
	border-left: 1px solid var( --ml-primary );
}

.ml-pa-card {
	display: flex;
	flex-direction: column;
	background: var( --ml-background );
	border-right: 1px solid var( --ml-primary );
	border-bottom: 1px solid var( --ml-primary );
	transition: background-color var( --ml-transition-base );
}

.ml-pa-card:hover {
	background: var( --ml-surface );
}

.ml-pa-card-image {
	width: 100%;
	aspect-ratio: 16 / 9;
	border-bottom: 1px solid var( --ml-primary );
	/* Uploaded images vary wildly in native size (from 356×178 to 768×512,
	   per the 11 Practice Area posts) — aspect-ratio + object-fit: cover
	   below already forces a uniform box, but overflow: hidden is the
	   standard defensive pairing for that combination: it makes the box a
	   hard clipping boundary instead of relying solely on object-fit to keep
	   a source image confined, which matters most for images furthest from
	   16:9 (e.g. Immigration at 480×360, a 4:3 source). */
	overflow: hidden;
}

.ml-pa-card-image img,
.ml-pa-card-image-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.ml-pa-card-image-placeholder {
	background: var( --ml-surface-hover );
}

.ml-pa-card-link {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 22px 24px 24px;
	flex: 1;
	text-decoration: none;
	color: var( --ml-primary );
}

.ml-pa-card-meta {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-family: var( --ml-font-mono );
	/* No shared token matches this exact size. */
	font-size: 13px;
	color: var( --ml-accent );
}

.ml-pa-card-arrow {
	color: var( --ml-secondary );
}

.ml-pa-card-title {
	margin: 0;
	font-family: var( --ml-font-heading );
	/* No shared token matches this exact size (--ml-text-xl is 22px, this is
	   measured at 23px). */
	font-size: 23px;
	font-weight: 600;
	line-height: var( --ml-leading-snug );
}

.ml-pa-card-blurb {
	margin: 0;
	font-family: var( --ml-font-body );
	font-size: 14.5px;
	line-height: var( --ml-leading-comfortable );
	color: var( --ml-neutral-600 );
}

.ml-pa-card-link:focus-visible {
	outline: 3px solid var( --ml-accent );
	/* Negative, unlike team-grid.css's equivalent (2px positive): this link
	   fills nearly the whole card, so a positive offset would bleed the
	   outline across the shared 1px border into the neighboring cell. */
	outline-offset: -3px;
}

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