/*
 * MiraeLaw Home — Our Offices section
 *
 * The whole section (header row + card grid) is rendered server-side by the
 * [miraelaw_home_offices] shortcode (inc/home/class-home-offices.php) — the
 * card grid is not Elementor widgets, so unlike sections built from widgets,
 * 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 (card title 23px, section padding clamp) are noted inline.
 */

.ml-offices-root {
	background: var( --ml-background );
}

.ml-offices-inner {
	max-width: var( --ml-container-width );
	margin: 0 auto;
	/* Section-specific fluid padding (56px–88px) — close to, but not the
	   same as, --ml-spacing-section-md (56px–96px); kept local rather than
	   promoted to a shared token since no other section uses this exact cap. */
	padding: clamp( 3.5rem, 8vw, 5.5rem ) 24px;
}

.ml-offices-header-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px 32px;
	margin-bottom: 36px;
}

.ml-offices-h2 {
	margin: 0;
	font-family: var( --ml-font-heading );
	font-size: var( --ml-text-h2 );
	font-weight: 600;
	line-height: var( --ml-leading-h2 );
	color: var( --ml-primary );
}

.ml-offices-all-link {
	font-family: var( --ml-font-body );
	font-size: 15px;
	font-weight: 700;
	color: var( --ml-secondary );
	text-decoration: underline;
	transition: color var( --ml-transition-base );
}

.ml-offices-all-link:hover,
.ml-offices-all-link:focus-visible {
	color: var( --ml-accent );
}

/* ---------------------------------------------------------------
 * Card grid — Elementor's native Grid mode can't do auto-fit/minmax,
 * so (as with the Areas of Expertise grid) it's expressed here.
 * 230px matches the source design's own minmax() track minimum exactly
 * (read from its inline style). min(230px, 100%) additionally lets a
 * single column shrink below 230px on very narrow viewports instead of
 * overflowing — the source design has no equivalent safeguard.
 *
 * Borders form one continuous box with single-width internal dividers,
 * matching the source design's own technique (confirmed against its
 * computed styles): the grid container supplies the outer top and left
 * edges; each card supplies only its own right and bottom edge. Every
 * card already touches a top/left edge — either the grid's border or a
 * neighboring card's border/bottom — so no edge is ever drawn twice.
 * ------------------------------------------------------------- */
.ml-offices-grid {
	display: grid !important;
	grid-template-columns: repeat( auto-fit, minmax( min( 230px, 100% ), 1fr ) );
	gap: 0;
	border-top: 1px solid var( --ml-primary );
	border-left: 1px solid var( --ml-primary );
}

.ml-office-card {
	display: flex;
	flex-direction: column;
	gap: 9px;
	padding: 26px 24px;
	border-right: 1px solid var( --ml-primary );
	border-bottom: 1px solid var( --ml-primary );
	color: inherit;
	text-decoration: none;
	transition: background-color var( --ml-transition-base );
}

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

.ml-office-eyebrow {
	font-family: var( --ml-font-mono );
	font-size: var( --ml-text-2xs );
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var( --ml-accent );
}

.ml-office-name {
	margin: 0;
	font-family: var( --ml-font-heading );
	/* No shared token matches this exact size (same pattern as the Areas of
	   Expertise card title, also a hand-specified 22–23px value). */
	font-size: 23px;
	font-weight: 600;
	line-height: var( --ml-leading-snug );
	color: var( --ml-primary );
}

.ml-office-address {
	margin: 0;
	font-family: var( --ml-font-body );
	font-size: 14px;
	line-height: var( --ml-leading-comfortable );
	color: var( --ml-neutral-600 );
}

.ml-office-view-details {
	margin-top: auto;
	font-family: var( --ml-font-body );
	font-size: 14px;
	font-weight: 700;
	color: var( --ml-secondary );
	text-decoration: underline;
	transition: color var( --ml-transition-base );
}

.ml-office-card:hover .ml-office-view-details,
.ml-office-card:focus-visible .ml-office-view-details {
	color: var( --ml-accent );
}

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

@media ( prefers-reduced-motion: reduce ) {
	.ml-office-card,
	.ml-office-view-details,
	.ml-offices-all-link {
		transition: none;
	}
}