/*
 * Leasing inquiry band — the footer's dark "Leasing Information / Get In Touch"
 * band (patterns/footer-leasing.php) and the acf/leasing-form block (light on
 * The Dexter Experience). Markup: lwh_leasing_band_inner() in
 * inc/leasing-form.php. Form controls: css/forms.css, driven by the --form-*
 * tokens set here per scheme.
 *
 * Figma "DY to Dev (Copy)" RxMqP7fHzNqKWMVOMECYIx — 610:264 dark, 610:433 light.
 * Desktop comp: heading | brokers | form = 25.8% | 24.2% | 50% of the
 * container; reproduced as an outer 1fr 1fr (info | form) with the info half
 * splitting again at 1200px. No mobile comps — the stacking below 992px is our
 * assumption, flagged to Dapper.
 */

.leasing--section {
	position: relative;
	padding-block: 48px 56px;
	background-color: var(--leasing-bg);
	color: var(--leasing-text);
}

@media (min-width: 992px) {
	.leasing--section {
		padding-block: 64px 80px;
	}
}

/* --- Schemes --------------------------------------------------------------
   Error reds are NOT the comp's #f2502f, which fails AA for 17.6px text on
   both grounds (3.37:1 on green, 3.01:1 on cream). Tuned per scheme, client-
   approved 2026-10-07: #ff8466 = 4.94:1 on green, #c23519 = 4.70:1 on cream. */
.leasing--section.dark-mod {
	--leasing-bg: var(--wp--preset--color--green);
	--leasing-text: var(--wp--preset--color--cream);
	--leasing-link: var(--wp--preset--color--lime);
	--form-text: #fff;
	--form-field-bg: rgba(255, 255, 255, .25);
	--form-placeholder: rgba(255, 255, 255, .6);
	--form-focus: #fff;
	--form-error: #ff8466;
	--form-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12.1505 6.90027'%3E%3Cpath d='M5.4919 6.65863C5.81409 6.98081 6.33645 6.98081 6.65863 6.65863L11.9089 1.40836C12.2311 1.08618 12.2311 0.56382 11.9089 0.241637C11.5867 -0.0805452 11.0644 -0.0805452 10.7422 0.241637L6.07527 4.90854L1.40836 0.241637C1.08618 -0.0805456 0.563819 -0.0805457 0.241637 0.241637C-0.0805457 0.56382 -0.0805457 1.08618 0.241636 1.40836L5.4919 6.65863Z' fill='white'/%3E%3C/svg%3E");
	/* Lime pill on green (comp). Hover can't be the theme's usual green pill —
	   it would vanish into the band — so it goes cream. */
	--form-submit-bg: var(--wp--preset--color--lime);
	--form-submit-text: var(--wp--preset--color--green);
	--form-submit-hover-bg: var(--wp--preset--color--cream);
	--form-submit-hover-text: var(--wp--preset--color--green);
}

.leasing--section.light-mod {
	--leasing-bg: var(--wp--preset--color--cream);
	--leasing-text: var(--wp--preset--color--black);
	--leasing-link: var(--wp--preset--color--green);
	--form-text: #000;
	--form-field-bg: rgba(0, 0, 0, .1);
	--form-placeholder: rgba(0, 0, 0, .6);
	--form-focus: #000;
	--form-error: #c23519;
	/* --form-chevron / --form-submit-*: forms.css fallbacks are this scheme. */
}

/* --- Layout --------------------------------------------------------------- */
.leasing--container {
	display: grid;
	gap: 48px;
}

.leasing--info {
	display: grid;
	gap: 32px;
	align-content: start;
	align-items: start;
}

@media (min-width: 992px) {
	.leasing--container {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: 24px;
	}
}

@media (min-width: 1200px) {
	.leasing--info {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: 24px;
	}
}

/* CTA targets (#schedule-tour, #leasing-inquiry). Empty, at the band's top
   edge, cleared of the floating header. */
.leasing--anchor {
	position: absolute;
	top: 0;
	left: 0;
	scroll-margin-top: var(--dy-header-h, var(--theme-menu-height));
}

/* --- Type (comp H3 = theme.json h3 preset exactly: 42/43, 700, -0.02em) --- */
.leasing--heading {
	margin: 0;
	color: var(--leasing-text);
	font-size: var(--wp--preset--font-size--h-3);
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: -0.02em;
}

.leasing--form .leasing--heading {
	margin-bottom: 25px;
}

/* --- Brokers --------------------------------------------------------------
   Content-driven columns, like the footer menus: one per row in the desktop
   broker track (~330px), two-up once there's room for two emails side by
   side (≥ ~470px: the stacked tablet layout), one again on a phone. */
.leasing--brokers {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
	gap: clamp(40px, 4vw, 61px) 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.leasing--broker p {
	margin: 0;
}

.leasing--broker-name {
	font-size: var(--wp--preset--font-size--h-5);
	font-weight: 500;
	line-height: 1.04;
	letter-spacing: 0.01em;
}

.leasing--broker-company {
	font-size: var(--wp--preset--font-size--h-6);
	font-weight: 500;
	line-height: 1.42;
	letter-spacing: 0.01em;
}

.leasing--broker-contact {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding-top: 4px;
	font-size: var(--wp--preset--font-size--body);
	font-weight: 700;
	line-height: 1.28;
}

.leasing--broker-contact a {
	color: var(--leasing-link);
	text-decoration: none;
	overflow-wrap: anywhere;
}

.leasing--broker-contact a:hover {
	text-decoration: underline;
	text-underline-offset: .15em;
}

.leasing--broker-contact a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
	border-radius: 2px;
}

.leasing--empty {
	margin: 0;
	opacity: .7;
}