/*
 * MiraeLaw Single Practice Area — Hero section
 *
 * Renders entirely through [miraelaw_practice_area_hero]
 * (inc/practice-areas/class-practice-area-hero.php), not Elementor widgets,
 * so every rule below (including typography/color) is load-bearing — same
 * reasoning as team-single.css. The navy surface, watermark technique,
 * breadcrumb, and H1 are the identical recipe already established by
 * team-single.css's own Hero (same fluid clamp() values, same tokens);
 * this file's only genuinely new piece is the two-column
 * text/featured-image layout, since Team Single's Hero has no image and no
 * lead paragraph. Values are taken from design-system.css tokens
 * throughout — no new tokens needed.
 */

/* ---------------------------------------------------------------
 * Hero — navy surface, watermark, breadcrumb, title, intro, image
 * ------------------------------------------------------------- */
.ml-pa-single-hero {
	position: relative;
	overflow: hidden;
	/* Establishes a local stacking context for the watermark, same
	   technique as home-hero.css / team-single.css's equivalents. */
	z-index: 0;
	background: var( --ml-primary );
}

.ml-pa-single-watermark {
	position: absolute;
	right: -20px;
	top: -70px;
	margin: 0;
	font-family: var( --ml-font-heading );
	font-weight: 700;
	font-size: clamp( 160px, 22vw, 280px );
	line-height: 1;
	color: var( --ml-primary-tint );
	user-select: none;
	pointer-events: none;
}

.ml-pa-single-hero-inner {
	position: relative;
	max-width: var( --ml-container-width );
	margin: 0 auto;
	padding: clamp( 48px, 7vw, 80px ) 24px;
}

.ml-pa-single-hero-columns {
	display: flex;
	flex-wrap: wrap;
	gap: 44px;
	align-items: center;
}

.ml-pa-single-hero-text {
	flex: 1 1 460px;
	min-width: 0;
}

.ml-pa-single-breadcrumb {
	margin: 0 0 24px;
}

.ml-pa-single-breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: var( --ml-font-mono );
	font-size: 13px;
	color: var( --ml-neutral-300 );
}

.ml-pa-single-breadcrumb a {
	color: var( --ml-neutral-200 );
	text-decoration: none;
	transition: color var( --ml-transition-base );
}

.ml-pa-single-breadcrumb a:hover,
.ml-pa-single-breadcrumb a:focus-visible {
	color: var( --ml-accent-light );
}

.ml-pa-single-breadcrumb li[aria-current] {
	color: var( --ml-background );
}

.ml-pa-single-h1 {
	margin: 0 0 22px;
	font-family: var( --ml-font-heading );
	font-weight: 600;
	font-size: clamp( 38px, 5.4vw, 64px );
	line-height: 1.06;
	letter-spacing: var( --ml-tracking-tight );
	color: var( --ml-background );
}

.ml-pa-single-lead {
	margin: 0;
	max-width: 40em;
	font-size: clamp( 17px, 2vw, 20px );
	line-height: var( --ml-leading-relaxed );
	color: var( --ml-neutral-200 );
}

.ml-pa-single-lead p {
	margin: 0;
}

.ml-pa-single-lead p + p {
	margin-top: 1em;
}

.ml-pa-single-lead a {
	color: var( --ml-accent-light );
}

.ml-pa-single-figure {
	margin: 0;
	flex: 1 1 320px;
	min-width: 0;
	max-width: 460px;
}

/* Selector deliberately qualified with the Hero root (.ml-pa-single-hero),
   not just the image's own class: Elementor's own frontend.min.css ships
   `.elementor img { border:none; border-radius:0; box-shadow:none; ... }`,
   specificity (0,0,1,1) — one class plus one element type — which beats a
   bare `.ml-pa-single-image` (0,0,1,0) regardless of stylesheet load order,
   since specificity is resolved before source order in the cascade. That
   silently zeroed out both this rule's border AND box-shadow (confirmed:
   the border already specified below was never actually rendering either,
   since the Hero was first built). Two classes (0,0,2,0) unambiguously
   outranks one class + one element, without resorting to !important. */
.ml-pa-single-hero .ml-pa-single-image,
.ml-pa-single-hero .ml-pa-single-image-placeholder {
	display: block;
	width: 100%;
	/* Matches the design's own 3:2 image slot; object-fit keeps the source
	   image from distorting regardless of its native dimensions, same
	   defensive pairing as practice-areas-grid.css's card images. */
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border: 1px solid var( --ml-border-darker );
	/* Depth cue lifting the image off the navy Hero surface. Matches the
	   flat, zero-blur offset style of design-system.css's only existing
	   shadow token (--ml-shadow-card) rather than a generic soft blur,
	   which nothing else on this site uses — but can't reuse that token's
	   color as-is (calibrated for light surfaces) or its original 0.28
	   opacity: compositing black at low opacity onto this Hero's own navy
	   background (#142638, already dark) produces only a ~6-16 RGB-point
	   shift — too small to reliably read on a screen. A shadow has very
	   little contrast headroom to work with on a background this dark
	   already; a larger offset and higher opacity compensate for that
	   without introducing blur or size that would read as "heavy". */
	box-shadow: 8px 8px 0 rgba( 0, 0, 0, 0.4 );
}

/* Composition: the source photo is 356×178 (exactly 2:1) being fit into
   this 3:2 box, which is proportionally taller — cover-fit therefore only
   ever crops horizontally here; the full height always shows regardless of
   this property's vertical value, so only the X axis does anything. Default
   center (50%) crops evenly from both edges, which spends equal crop
   budget on the frame's least important content (a coffee cup and loose
   papers, far left edge) as it does on its focal subjects. The scales of
   justice sit roughly in the left-center third of the frame, the handshake
   in the center-right third; shifting right keeps both fully in frame
   while trimming mostly that left-edge clutter and an already-partial
   briefcase corner on the right, bringing the handshake nearer the crop's
   visual center without losing the scales. */
.ml-pa-single-hero .ml-pa-single-image {
	object-position: 72% center;
}

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

/* ---------------------------------------------------------------
 * Accessibility — visible focus states
 * ------------------------------------------------------------- */
.ml-pa-single-hero a:focus-visible {
	outline: 3px solid var( --ml-accent );
	outline-offset: 2px;
}