/*
 * MiraeLaw Offices page — Office Locations ledger
 *
 * The whole section is rendered server-side by the [miraelaw_offices_locations]
 * shortcode (inc/offices/class-offices-page.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.
 *
 * Alternating detail/map layout, no @media needed: each row is
 * `flex-wrap:wrap` with two `flex:1 1 420px; min-width:min(100%,320px)`
 * halves — the exact fluid technique the source design itself uses to
 * collapse to a single column at narrow widths. Alternate rows use
 * `flex-wrap:wrap-reverse` (via .ml-office-row--reverse) to flip which
 * half appears first, rather than reordering the underlying markup.
 */

.ml-offices-ledger {
	border: 1px solid var( --ml-primary );
}

.ml-office-row {
	display: flex;
	flex-wrap: wrap;
	border-bottom: 1px solid var( --ml-primary );
}

.ml-offices-ledger > .ml-office-row:last-child {
	border-bottom: none;
}

/* flex-wrap:wrap-reverse (tried first) only reorders wrapped LINES, not the
   left/right order of two items sharing a single unwrapped line — at
   desktop widths both halves fit on one line, so it had no visual effect
   and every row silently fell back to DOM order (details, then map).
   flex-direction:row-reverse is what actually swaps which half renders on
   which side. */
.ml-office-row--reverse {
	flex-direction: row-reverse;
}

.ml-office-row-details {
	flex: 1 1 420px;
	min-width: min( 320px, 100% );
	padding: clamp( 28px, 4vw, 48px );
	/* The source design has no box-sizing:border-box reset for this content,
	   so its browser-default content-box sizing adds this column's own
	   padding on top of its flex-negotiated width, while the borderless map
	   column (no padding) doesn't grow — producing a consistent ~54/46 split
	   rather than an even 50/50 one, confirmed identical across all 4 rows
	   regardless of address length (so not a content-overflow artifact).
	   Our theme's own box-sizing:border-box reset would fold that padding
	   back into an even split, so it's opted out of here specifically to
	   match the design's actual rendered proportions at every viewport. */
	box-sizing: content-box;
}

/* Below the width where two columns can ever sit side by side (confirmed
   the row already wraps to a single column by 834px, well above this
   query), the 54/46 split above has nothing to preserve — there is no
   second column sharing the row. At that point content-box becomes a
   plain liability: once this column's flex-negotiated width hits its
   min-width floor (320px) rather than growing past it, the padding above
   adds on top of that floor instead of being absorbed within it, pushing
   the rendered box past its container — confirmed overflowing by 44px at
   430px viewport. border-box folds the padding back inside the box here,
   where doing so has no visual trade-off to make. */
@media ( max-width: 767px ) {
	.ml-office-row-details {
		box-sizing: border-box;
	}
}

.ml-office-row-map {
	flex: 1 1 420px;
	min-width: min( 320px, 100% );
	min-height: 320px;
}

.ml-office-row-map iframe,
.ml-office-row-map-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 320px;
	border: 0;
}

.ml-office-row-map-placeholder {
	background: var( --ml-surface-hover );
}

/* ---------------------------------------------------------------
 * Details half
 * ------------------------------------------------------------- */
.ml-office-row-eyebrow {
	display: flex;
	gap: 14px;
	align-items: baseline;
	margin: 0 0 8px;
	font-family: var( --ml-font-mono );
	/* No shared token matches this exact size. */
	font-size: 11.5px;
	letter-spacing: var( --ml-tracking-wider );
	text-transform: uppercase;
	color: var( --ml-tertiary );
}

.ml-office-row-number {
	font-size: 13px;
	font-weight: var( --ml-font-weight-bold );
	color: var( --ml-accent );
}

.ml-office-row-name {
	margin: 0 0 6px;
	font-family: var( --ml-font-heading );
	font-size: clamp( 26px, 3.2vw, 36px );
	font-weight: 600;
	line-height: 1.12;
	color: var( --ml-primary );
	/* "Burnaby/Coquitlam North Road" has no space around its "/", so it's
	   one unbreakable run the browser won't wrap by default — confirmed
	   overflowing by 13px at 390px viewport (the other three, shorter,
	   slash-free office names never hit this). break-word only engages
	   when a single run can't fit; normal space-wrapping elsewhere (every
	   other name) is unaffected. */
	overflow-wrap: break-word;
}

/* The stored field value already includes its own <p> tag (sanitized with
   wp_kses_post at save time), so this wrapper only supplies spacing —
   typography is set on the nested <p> to avoid an invalid <p><p></p></p>. */
.ml-office-row-description {
	margin: 0 0 18px;
}

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

/* ---------------------------------------------------------------
 * Address block — a definition-list-style grid; .ml-office-row-field
 * wrappers use display:contents so their label/value children flow
 * directly into the parent grid's two columns, matching the source
 * design's own technique exactly.
 * ------------------------------------------------------------- */
.ml-office-row-address {
	display: grid;
	/* minmax(0, 1fr), not a bare 1fr: grid items default to min-width:auto,
	   so a bare 1fr track won't shrink below its content's min-content
	   width. The unbreakable email/phone/address values here (e.g.
	   "richmond@miraelaw.ca") set that floor wider than the column at
	   narrow viewports — confirmed overflowing the whole address block by
	   4-22px (varying per office) at 390px viewport, despite every
	   individual value's own text fitting its cell with room to spare.
	   minmax(0, 1fr) lets the track shrink fully instead. */
	grid-template-columns: 88px minmax( 0, 1fr );
	gap: 10px 14px;
	align-items: baseline;
	margin: 0;
	font-family: var( --ml-font-body );
	font-size: 14.5px;
	line-height: var( --ml-leading-normal );
	color: var( --ml-primary );
	border-top: 1px solid var( --ml-border-warm );
	padding-top: 18px;
	/* The value column can now shrink (minmax(0,1fr) above), but email
	   addresses (e.g. "richmond@miraelaw.ca") have no natural break point
	   of their own, so they still overflowed their now-narrower cell by
	   the same 4-22px. Inherited onto every value/link in this block. */
	overflow-wrap: break-word;
}

.ml-office-row-field {
	display: contents;
}

.ml-office-row-label {
	font-family: var( --ml-font-mono );
	font-size: var( --ml-text-2xs );
	letter-spacing: var( --ml-tracking-wide );
	text-transform: uppercase;
	color: var( --ml-tertiary );
}

.ml-office-row-address a {
	color: var( --ml-secondary );
	text-decoration: none;
	transition: color var( --ml-transition-base );
}

.ml-office-row-address a:hover,
.ml-office-row-address a:focus-visible {
	color: var( --ml-accent );
}

.ml-office-row-address a:focus-visible {
	outline: 3px solid var( --ml-accent );
	outline-offset: 2px;
}

@media ( prefers-reduced-motion: reduce ) {
	.ml-office-row-address a {
		transition: none;
	}
}