/*
 * MiraeLaw Home — Why Choose Mirae Law section
 * Colors/fonts come from Elementor Global Colors/Fonts (linked on the widgets
 * themselves) or design-system.css variables. This file only supplies what
 * Elementor's controls can't express: the two-column flex-basis split, each
 * item's 32px/1fr grid row, and the photo slot's aspect-ratio.
 *
 * The source has no hover effects or animations for this section (a static
 * information list + photo, no links/buttons within it), so none are added
 * here — nothing to transition or to guard with prefers-reduced-motion.
 */

.ml-why-inner {
	padding-top: var( --ml-spacing-section-md );
	padding-bottom: var( --ml-spacing-section-md );
}

.ml-why-h2 .elementor-heading-title {
	font-size: var( --ml-text-h2 );
}

.ml-why-h2 {
	margin-bottom: var( --ml-spacing-lg );
}

/* Two-column split — list gets more room (420px basis) than the photo
   (380px basis), both shrinking to stack on narrow viewports.
   !important: Elementor's own per-instance rule sets flex-basis from a
   `--flex-basis` custom property that's otherwise unset (falls back to its
   initial value, `auto`) at equal specificity to a plain class selector —
   without !important these lose the flex-basis tie and both columns render
   at full width, stacked instead of side by side. */
.ml-why-list-col {
	flex: 1 1 420px !important;
	min-width: 0;
}

.ml-why-photo-col {
	flex: 1 1 380px !important;
	min-width: 0;
}

/* Each lettered row: letter | title+blurb, matching the source's own grid. */
.ml-why-item {
	display: grid !important;
	grid-template-columns: 32px 1fr;
	gap: var( --ml-spacing-sm );
}

.ml-why-letter {
	padding-top: 3px;
}

.ml-why-photo-slot {
	width: 100%;
	aspect-ratio: 3 / 4;
	max-height: 560px;
	position: relative;
}

.ml-why-figcaption {
	margin-top: 10px;
}