/**
 * Variant CSS: contact--hours-plus-form-split
 *
 * 2-column contact — an opening-hours definition list (day ↔ time rows, with a
 * dimmed "closed" row) on the left, paired with an elevated contact-form card on
 * the right. Light/polarity-aware surface: heads/labels are --text-primary, the
 * accent rule and kicker take --accent, the submit uses the CTA tokens. Stacks
 * to one column on mobile and the two inline form fields wrap. Part of the
 * `contact` role.
 */

body.aibt-universal .universal-contact--hours-plus-form-split {
	background: var(--background);
	color: var(--text-primary);
}

body.aibt-universal .universal-contact--hours-plus-form-split .universal-contact__intro {
	margin-bottom: var(--space-xl);
}

body.aibt-universal .universal-contact--hours-plus-form-split .universal-contact__kicker {
	font-family: var(--font-body) !important;
	font-size: var(--text-xs) !important;
	font-weight: 600 !important;
	letter-spacing: var(--tracking-widest) !important;
	text-transform: uppercase !important;
	color: var(--accent) !important;
	margin: 0 0 var(--space-sm) 0 !important;
}

body.aibt-universal .universal-contact--hours-plus-form-split .universal-contact__headline {
	font-family: var(--font-display) !important;
	color: var(--text-primary) !important;
	margin: 0 0 var(--space-sm) 0 !important;
}

body.aibt-universal .universal-contact--hours-plus-form-split .universal-contact__deck {
	font-family: var(--font-body) !important;
	font-size: var(--text-lg) !important;
	line-height: var(--leading-relaxed) !important;
	color: var(--text-secondary) !important;
	margin: 0 !important;
	max-width: 60ch;
}

body.aibt-universal .universal-contact--hours-plus-form-split .universal-contact__cols {
	gap: var(--space-xl);
	align-items: stretch;
}

/* ── Hours column ──────────────────────────────────────────────────── */
body.aibt-universal .universal-contact--hours-plus-form-split .universal-contact__hours-title {
	font-family: var(--font-display) !important;
	font-size: var(--text-xl) !important;
	color: var(--text-primary) !important;
	margin: 0 0 var(--space-md) 0 !important;
}

body.aibt-universal .universal-contact--hours-plus-form-split .universal-contact__hours {
	margin: 0;
	display: flex;
	flex-direction: column;
}

/* Day ↔ time row: label left, value right, separated by a hairline rule. */
body.aibt-universal .universal-contact--hours-plus-form-split .universal-contact__hours-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-md);
	padding: 0.85rem 0;
	border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}

body.aibt-universal .universal-contact--hours-plus-form-split .universal-contact__hours-row:first-child {
	padding-top: 0;
}

body.aibt-universal .universal-contact--hours-plus-form-split .universal-contact__hours-day {
	font-family: var(--font-body);
	font-size: var(--text-base);
	font-weight: 600;
	color: var(--text-primary);
}

body.aibt-universal .universal-contact--hours-plus-form-split .universal-contact__hours-time {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--text-base);
	font-weight: 500;
	color: var(--text-secondary);
	font-variant-numeric: tabular-nums;
	text-align: right;
	white-space: nowrap;
}

/* Closed day: dimmed + accent label so it reads as a deliberate exception. */
body.aibt-universal .universal-contact--hours-plus-form-split .universal-contact__hours-row--closed .universal-contact__hours-time {
	color: var(--accent);
	font-weight: 600;
}

body.aibt-universal .universal-contact--hours-plus-form-split .universal-contact__hours-note {
	font-family: var(--font-body) !important;
	font-size: var(--text-sm) !important;
	line-height: var(--leading-relaxed) !important;
	color: var(--text-muted) !important;
	margin: var(--space-md) 0 0 0 !important;
}

/* ── Form card ─────────────────────────────────────────────────────── */
body.aibt-universal .universal-contact--hours-plus-form-split .universal-contact__form-title {
	font-family: var(--font-display) !important;
	font-size: var(--text-xl) !important;
	color: var(--text-primary) !important;
	margin: 0 0 var(--space-md) 0 !important;
}

/* Elevated card so the form reads as a discrete, trustworthy panel. */
body.aibt-universal .universal-contact--hours-plus-form-split .universal-contact__form {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	background: var(--background-card);
	border: var(--decor-border-width, 1px) solid var(--divider-primary);
	border-radius: var(--decor-radius);
	padding: clamp(var(--space-md), 3vw, var(--space-xl));
	box-shadow: var(--decor-shadow-elevated);
}

/* Two side-by-side fields (email + phone) that wrap on narrow widths. */
body.aibt-universal .universal-contact--hours-plus-form-split .universal-contact__field-row {
	display: flex;
	gap: var(--space-md);
}

body.aibt-universal .universal-contact--hours-plus-form-split .universal-contact__field-row .universal-contact__field {
	flex: 1 1 0;
	min-width: 0;
}

body.aibt-universal .universal-contact--hours-plus-form-split .universal-contact__field {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs, 0.4rem);
}

body.aibt-universal .universal-contact--hours-plus-form-split .universal-contact__field label {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--text-primary);
}

body.aibt-universal .universal-contact--hours-plus-form-split .universal-contact__input {
	width: 100%;
	font-family: var(--font-body);
	font-size: var(--text-base);
	color: var(--text-primary);
	background: var(--background);
	border: var(--decor-border-width, 1px) solid var(--divider-primary);
	border-radius: var(--decor-radius);
	padding: 0.9rem 1.1rem;
	transition: border-color var(--duration-fast) var(--ease-default);
}

body.aibt-universal .universal-contact--hours-plus-form-split .universal-contact__input::placeholder {
	color: var(--text-muted);
}

body.aibt-universal .universal-contact--hours-plus-form-split textarea.universal-contact__input {
	resize: vertical;
	min-height: 110px;
}

body.aibt-universal .universal-contact--hours-plus-form-split .universal-contact__input:focus {
	border-color: var(--accent);
}

/* Keyboard focus ring (WCAG 2.4.7). */
body.aibt-universal .universal-contact--hours-plus-form-split .universal-contact__input:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
	border-color: var(--accent);
}

body.aibt-universal .universal-contact--hours-plus-form-split .universal-contact__submit {
	align-self: flex-start;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 1.02rem;
	letter-spacing: var(--tracking-wide);
	color: var(--cta-text-primary);
	background: var(--cta-bg-primary);
	border: var(--decor-border-width, 1px) solid var(--cta-border-primary, transparent);
	border-radius: var(--decor-radius);
	padding: 1.05rem 2.3rem;
	min-height: var(--target-min, 44px);
	cursor: pointer;
	transition: background var(--duration-fast) var(--ease-snappy, var(--ease-default)), border-color var(--duration-fast) var(--ease-snappy, var(--ease-default));
}

body.aibt-universal .universal-contact--hours-plus-form-split .universal-contact__submit:hover {
	background: var(--accent-hover);
	border-color: var(--accent-hover);
}

body.aibt-universal .universal-contact--hours-plus-form-split .universal-contact__submit:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

body.aibt-universal .universal-contact--hours-plus-form-split .universal-contact__formnote {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	color: var(--text-muted);
	margin: 0;
}

/* ── Responsive ────────────────────────────────────────────────────── */
@media (max-width: 781px) {
	body.aibt-universal .universal-contact--hours-plus-form-split .universal-contact__hourscol {
		margin-bottom: var(--space-lg);
	}
	/* Stack the inline email+phone pair so neither field crams. */
	body.aibt-universal .universal-contact--hours-plus-form-split .universal-contact__field-row {
		flex-direction: column;
	}
}

/* Cap letter-spacing on small screens (avoids cramped uppercase kicker).
   --tracking-wide (0.04em) keeps it under the 0.1em A5 ceiling — --tracking-wider
   (0.12em) would still read cramped at 375px. */
@media (max-width: 640px) {
	body.aibt-universal .universal-contact--hours-plus-form-split .universal-contact__kicker {
		letter-spacing: var(--tracking-wide) !important;
	}
}

/* Respect reduced-motion: neutralize the input/submit transitions. */
@media (prefers-reduced-motion: reduce) {
	body.aibt-universal .universal-contact--hours-plus-form-split .universal-contact__input,
	body.aibt-universal .universal-contact--hours-plus-form-split .universal-contact__submit {
		transition: none !important;
	}
}