/*
 * MiraeLaw Team page — closing CTA section
 *
 * Reuses the site's existing CTA button pattern rather than inventing a new
 * one: `.ml-hero-cta-primary` (an Elementor Button widget with no per-instance
 * color/padding overrides, already styled site-wide by the Elementor Global
 * Kit's Button defaults — confirmed to match this design's own "Ask a
 * question" button exactly: #C05B33 bg, white text, Noto Sans 700 16px,
 * 15px/30px padding) and `.ml-hero-tel-btn` / `.ml-hero-tel-region`
 * (home-hero.css — the outline phone-number link, also an exact match here).
 * Only what's new to this section is styled below: the section's own fluid
 * heading and padding, and a focus-visible rule scoped to this section's
 * root (home-hero.css's own focus-visible rule is scoped to `.ml-hero-root`
 * and doesn't reach this page).
 */

.ml-team-cta-inner {
	/* Fluid clamp() measured directly from the source design (padding
	   64px at 1280px viewport, 40px at 600px/480px) — close to but not
	   identical to any existing --ml-spacing-section-* token, so kept
	   local rather than forced into a shared token nothing else uses. */
	padding: clamp( 40px, 6vw, 64px ) 24px;
}

.ml-team-cta-heading {
	margin: 0;
	max-width: 20em;
}

/* Elementor nests the widget's actual visible text in a child
   .elementor-heading-title element (here a real <h2>) — color/font-size are
   inherited properties, so a rule on the wrapper div alone never overrides
   the Global Kit's own direct h2 typography, which wins regardless of the
   wrapper selector's specificity (a descendant's direct rule always beats
   an inherited ancestor value). This left the CTA heading rendering in the
   Kit's default dark navy/size on every page that uses this class (Team,
   Single Team Member, Areas of Expertise, Offices) instead of this
   section's intended cream color and fluid size. Target the inner element
   directly, with !important since the Kit's own selector may tie on
   specificity. */
.ml-team-cta-heading .elementor-heading-title {
	font-family: var( --ml-font-heading ) !important;
	/* Fluid clamp() measured directly from the source design (38px at
	   1280px viewport, 26px at 480px/600px) — no shared token covers this
	   size. */
	font-size: clamp( 26px, 3.4vw, 38px ) !important;
	font-weight: 600 !important;
	line-height: 1.15 !important;
	color: var( --ml-background ) !important;
	/* The heading/buttons row is an Elementor container's own flex settings
	   (not this file), which only stacks to a column below a breakpoint
	   this narrow heading column sits above — so on phones the heading
	   keeps a ~130px column while sharing the row with the buttons. At
	   that width the longest single word ("consultation.") is wider than
	   the column itself, measured overflowing it by up to 33px (confirmed
	   via getClientRects()); it wasn't visually clipped only because nothing
	   sits directly in the empty space it bled into — fragile once content,
	   translation, or column width shifts. break-word only engages when a
	   single word can't fit, so normal wrapping elsewhere is unaffected. */
	overflow-wrap: break-word;
}

.ml-team-cta-buttons {
	flex-shrink: 0;
}

.ml-team-cta-root a:focus-visible,
.ml-team-cta-root button:focus-visible {
	outline: 3px solid var( --ml-accent );
	outline-offset: 2px;
}