/* Contact enquiry — shared two-column layout (concierge + contact pages).
   Figma: concierge 1:7008, contact 282:4059. */

/* Heading block sits above the two-column inner. Mirrors the
   title + accent rule + subtitle pattern used by villa-testimonial-teaser
   and image-text-section; `.ibv-rule.ibv-rule--gold` is the shared
   utility from layout.css. */
.ibv-section-contact-enquiry__header {
	display: flex;
	flex-direction: column;
	gap: var(--ibv-space-md);
	align-items: flex-start;
	margin-block-end: var(--ibv-space-2xl);
	color: var(--ibv-color-forest-green-deep);
}

.ibv-section-contact-enquiry__inner {
	display: flex;
	flex-direction: column;
	gap: var(--ibv-space-2xl);
}

/* 1/3 sidebar + 2/3 form on large screens — grid keeps the proportional
   split clean regardless of intrinsic content width. */
@media (min-width: 56rem) {
	.ibv-section-contact-enquiry__inner {
		display: grid;
		grid-template-columns: 1fr 2fr;
		gap: var(--ibv-space-xl);
		align-items: start;
	}
}

.ibv-section-contact-enquiry__sidebar {
	display: flex;
	flex-direction: column;
	gap: var(--ibv-space-2xl);
	color: var(--ibv-color-forest-green-deep);
}

.ibv-section-contact-enquiry__title {
	margin: 0;
	font-family: var(--ibv-font-display);
	font-optical-sizing: auto;
	font-weight: var(--ibv-font-weight-regular);
	line-height: var(--ibv-lh-tight);
	color: var(--ibv-color-forest-green-deep);
}

/* Size variants — `display` for the contact page H1 (Newsreader 64),
   `large` for the concierge page H2 (Newsreader 44). */
.ibv-section-contact-enquiry__title--display {
	font-size: clamp(2.5rem, 6vw, 4rem); /* ~64px Figma Desktop/H1 */
}

.ibv-section-contact-enquiry__title--large {
	font-size: clamp(2rem, 5vw, 2.75rem); /* ~44px Figma Desktop/H2 */
}

.ibv-section-contact-enquiry__subtitle {
	margin: 0;
	font-family: var(--ibv-font-display);
	font-optical-sizing: auto;
	font-weight: var(--ibv-font-weight-regular);
	font-size: 1.25rem; /* 20px Figma Mobile/H4 / Paragraph/Large */
	line-height: var(--ibv-lh-snug);
	color: var(--ibv-color-forest-green-deep);
}

/* Detail list — phone / email / WhatsApp. */
.ibv-section-contact-enquiry__details {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--ibv-space-lg);
}

.ibv-section-contact-enquiry__detail {
	display: flex;
	flex-direction: column;
	gap: var(--ibv-space-2xs);
}

.ibv-section-contact-enquiry__detail-label {
	font-family: var(--ibv-font-body);
	font-size: var(--ibv-fs-body);
	font-weight: var(--ibv-font-weight-bold);
	line-height: var(--ibv-lh-cozy);
	color: var(--ibv-color-forest-green-deep);
}

/* tel: + mailto: anchors styled as plain text per Figma (the bold "label"
   above already differentiates them); underline only on hover/focus. */
.ibv-section-contact-enquiry__detail-value {
	font-family: var(--ibv-font-body);
	font-size: var(--ibv-fs-body);
	font-weight: var(--ibv-font-weight-regular);
	line-height: var(--ibv-lh-cozy);
	color: var(--ibv-color-forest-green-deep);
	text-decoration: none;
	transition: color var(--ibv-duration-fast) var(--ibv-ease-standard);
}

.ibv-section-contact-enquiry__detail-value:hover,
.ibv-section-contact-enquiry__detail-value:focus-visible {
	color: var(--ibv-color-link-hover);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* WhatsApp — bold + underlined link (Figma concierge 1:7021). */
.ibv-section-contact-enquiry__detail-link {
	align-self: flex-start;
	font-family: var(--ibv-font-body);
	font-size: var(--ibv-fs-small);
	font-weight: var(--ibv-font-weight-bold);
	line-height: var(--ibv-lh-cozy);
	color: var(--ibv-color-forest-green-deep);
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 1.3px;
	transition: color var(--ibv-duration-fast) var(--ibv-ease-standard);
}

.ibv-section-contact-enquiry__detail-link:hover,
.ibv-section-contact-enquiry__detail-link:focus-visible {
	color: var(--ibv-color-link-hover);
}

/* Form column — sized by the parent grid on desktop; `min-width: 0`
   prevents the GF embed from forcing the track wider than its share. */
.ibv-section-contact-enquiry__form-column {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--ibv-space-sm);
}

/* Banner image above the form (contact page; Figma 282:4074). */
.ibv-section-contact-enquiry__banner {
	overflow: hidden;
	border-radius: var(--ibv-radius-lg); /* 12px Figma */
}

.ibv-section-contact-enquiry__banner-image {
	display: block;
	width: 100%;
	height: 248px; /* Figma */
	object-fit: cover;
}

/* Form card — wraps the GF embed; optional title above it. The card
   chrome only paints when the form-title is present (concierge has no
   title, leaves the form sitting on the section bg without extra box). */
.ibv-section-contact-enquiry__form-card {
	display: flex;
	flex-direction: column;
	gap: var(--ibv-space-xl);
}

.ibv-section-contact-enquiry__form-card:has(.ibv-section-contact-enquiry__form-title) {
	background: var(--ibv-color-off-white);
	border-radius: var(--ibv-radius-lg); /* 12px Figma */
	padding: var(--ibv-space-2xl) var(--ibv-space-lg) var(--ibv-space-lg);
}

.ibv-section-contact-enquiry__form-title {
	margin: 0;
	font-family: var(--ibv-font-display);
	font-optical-sizing: auto;
	font-weight: var(--ibv-font-weight-regular);
	font-size: 1.5rem; /* 24px Figma Desktop/H4 */
	line-height: var(--ibv-lh-snug);
	color: var(--ibv-color-black);
}