/**
 * LOA Contact Modal — NAV-05 "Inquire Now" (Figma node 393:75).
 * Consumes tokens.css exclusively. See tokens.css for the note on how
 * Figma's 2238px-wide frame was scaled down to the site's 1440px
 * content convention.
 *
 * No Figma mobile frame exists for this component — see the mobile
 * breakpoint block at the bottom for the interim (image hidden,
 * single-column form) decision, flagged TBD like every other
 * mobile-spec gap in this project.
 */

.loa-modal {
	position: fixed;
	inset: 0;
	z-index: 200; /* above the header (100) and drawer (90) */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.loa-modal[hidden] {
	display: none;
}

.loa-modal__backdrop {
	position: absolute;
	inset: 0;
	background: var(--loa-modal-backdrop);
}

.loa-modal__panel {
	position: relative;
	display: grid;
	grid-template-columns: var(--loa-modal-media-w) 1fr;
	width: 100%;
	max-width: var(--loa-modal-max-w);
	max-height: calc(100vh - 48px);
	overflow: hidden;
	overflow-y: auto;
	background: var(--loa-modal-bg);
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
}

.loa-modal__close {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px; /* QA: 44px tap target, matches header toggle convention */
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
}

.loa-modal__close svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
}

.loa-modal__close:hover,
.loa-modal__close:focus-visible {
	border-color: var(--loa-gold);
	color: var(--loa-gold);
}

.loa-modal__close:focus-visible {
	outline: 2px solid var(--loa-gold);
	outline-offset: 2px;
}

/* --- Media column (left) ------------------------------------------ */

.loa-modal__media {
	position: relative;
	overflow: hidden;
}

.loa-modal__media-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: var(--loa-modal-media-opacity); /* Figma: opacity-40 */
}

.loa-modal__media-overlay {
	position: absolute;
	inset: auto 0 0 0;
	padding: 32px;
	text-align: left; /* Byrne 2026-08-09: Figma shows this left-aligned, not centered */
}

.loa-modal__concierge {
	margin: 0 0 8px;
	font-family: var(--loa-font-display);
	font-style: italic;
	font-size: var(--loa-modal-concierge-size);
	color: var(--loa-modal-concierge-color);
}

.loa-modal__trust {
	margin: 0;
	font-family: var(--loa-font-body);
	font-size: var(--loa-modal-trust-size);
	font-weight: 700; /* Inter Bold per Figma */
	line-height: 1.4;
	color: var(--loa-modal-trust-color);
}

/* --- Form column (right) ------------------------------------------- */

.loa-modal__form-wrap {
	padding: var(--loa-modal-gutter);
}

.loa-modal__eyebrow {
	margin: 0 0 16px;
	font-family: var(--loa-font-body);
	font-size: var(--loa-modal-eyebrow-size);
	font-weight: 700;
	letter-spacing: var(--loa-modal-eyebrow-tracking);
	text-transform: uppercase;
	color: var(--loa-gold);
}

.loa-modal__heading {
	margin: 0 0 40px;
	font-family: var(--loa-font-display);
	font-weight: 500; /* Playfair Medium, both lines — not italic per Figma */
	font-size: clamp(36px, 5vw, var(--loa-modal-heading-size));
	line-height: 1.15;
	color: #fff;
}

.loa-modal__heading-line {
	display: block;
}

.loa-modal__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: var(--loa-modal-col-gap);
	row-gap: var(--loa-modal-row-gap);
	margin-bottom: 40px;
}

/* --- Honeypot (spam guardrail) --------------------------------------
 * Off-screen positioning rather than display:none/visibility:hidden --
 * some bots skip inputs that compute to display:none, so this stays
 * "visible" to a naive DOM scan while being unreachable and unseen by
 * an actual visitor. Paired with aria-hidden + tabindex="-1" in
 * header.php for the accessibility-tree side of the hiding.
 */
.loa-modal__field--hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.loa-modal__field--full {
	grid-column: 1 / -1;
}

.loa-modal__label {
	display: block;
	margin-bottom: 12px;
	font-family: var(--loa-font-body);
	font-size: var(--loa-modal-label-size);
	font-weight: 700;
	letter-spacing: var(--loa-modal-label-tracking);
	text-transform: uppercase;
	color: var(--loa-modal-label-color);
}

.loa-modal__input {
	width: 100%;
	padding: 0 0 12px;
	font-family: var(--loa-font-body);
	font-size: var(--loa-modal-input-size);
	color: var(--loa-modal-input-color);
	background: transparent;
	border: none;
	border-bottom: 1px solid var(--loa-modal-divider);
	border-radius: 0;
	box-sizing: border-box;
	transition: border-color var(--loa-speed) var(--loa-ease);
}

.loa-modal__textarea {
	resize: vertical;
	min-height: 44px;
	font-family: var(--loa-font-body);
}

.loa-modal__input::placeholder {
	color: var(--loa-modal-placeholder-color);
}

.loa-modal__input:focus-visible {
	outline: none;
	border-bottom-color: var(--loa-gold);
}

.loa-modal__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: var(--loa-modal-btn-h);
	padding-inline: 48px;
	font-family: var(--loa-font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 2.4px;
	text-transform: uppercase;
	color: #000;
	background: var(--loa-gold);
	border: none;
	cursor: pointer;
	transition: background var(--loa-speed) var(--loa-ease);
}

.loa-modal__submit:hover,
.loa-modal__submit:focus-visible {
	background: #e0c04f; /* matches hero primary CTA's interim hover treatment */
}

.loa-modal__submit:focus-visible {
	outline: 2px solid var(--loa-gold);
	outline-offset: 4px;
}

.loa-modal__submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.loa-modal__status {
	margin: 16px 0 0;
	font-family: var(--loa-font-body);
	font-size: 14px;
}

.loa-modal__status[data-state="success"] {
	color: #7fd88f;
}

.loa-modal__status[data-state="error"] {
	color: #e08a8a;
}

/* --- Inquiry interest (NAV-05 TN 10, 2026-09-27) --------------------
 * Only shown when the Advisory Council page's buttons open the modal.
 * The legend reuses the field-label style; each option is a real
 * checkbox with a 44px-tall hit area. [hidden] must win over the
 * display rule below, or the group would show on every open.
 */
.loa-modal__interest {
	display: flex;
	flex-wrap: wrap;
	column-gap: var(--loa-modal-col-gap);
	margin: 0 0 var(--loa-modal-row-gap);
	padding: 0;
	border: 0;
	min-width: 0;
}

.loa-modal__interest[hidden] {
	display: none;
}

.loa-modal__interest-legend {
	float: left; /* lets the legend sit inside the flex flow like a label */
	width: 100%;
	padding: 0;
}

.loa-modal__check {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	min-height: 44px;
	font-family: var(--loa-font-body);
	font-size: var(--loa-modal-input-size);
	color: var(--loa-modal-input-color);
	cursor: pointer;
}

.loa-modal__check-input {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--loa-gold);
	cursor: pointer;
}

.loa-modal__check-input:focus-visible {
	outline: 2px solid var(--loa-gold);
	outline-offset: 2px;
}

/* --- Mobile (no Figma frame for this component) ---------------------
 * Interim decision: collapse to a single column and hide the media
 * panel entirely rather than guess at a stacked-image treatment that
 * was never designed. Breakpoint matches the site-wide interim 1024px
 * (same TBD-with-Tyler status as every other section).
 */
@media (max-width: 1024px) {
	.loa-modal {
		padding: 0;
	}

	.loa-modal__panel {
		grid-template-columns: 1fr;
		max-height: 100vh;
		max-height: 100svh;
		height: 100%;
	}

	.loa-modal__media {
		display: none;
	}

	.loa-modal__form-wrap {
		padding: 72px 24px 40px; /* extra top padding clears the close button */
	}

	.loa-modal__grid {
		grid-template-columns: 1fr;
	}

	.loa-modal__field--full {
		grid-column: auto;
	}
}