/**
 * Contact page styles (pages/template-contact.php)
 * Hero and Find Us are shared components (page-hero, venue-info); the form
 * fields are components/contact-form.css.
 *
 * 1. Page Hero — contact card
 * 2. Send Us A Message
 * 3. Responsive
 */

/* ============================ PAGE HERO — CONTACT CARD ============================ */
/* In flow (not absolute), so a taller card grows the hero instead of spilling out. */
.contact-card {
	position: relative;
	margin: calc(37 * var(--u)) calc(-134 * var(--u)) calc(37 * var(--u)) calc(134 * var(--u));
	z-index: 1;
	overflow: hidden;
	background: var(--overlay-dark);
	border-radius: var(--radius-lg);
}

.contact-card__bands {
	display: block;
	height: calc(11 * var(--u));
	min-height: 6px;
	background: var(--flag-thirds);
	border-bottom: var(--stroke-thin) solid var(--dark-surface);
}

.contact-card__inner {
	display: flex;
	flex-direction: column;
	padding: var(--space-48) calc(52 * var(--u)) calc(50 * var(--u));
}

.contact-card__brand {
	display: flex;
	align-items: center;
	gap: var(--space-20);
	padding-bottom: calc(38 * var(--u));
}

.contact-card__crest {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: calc(78 * var(--u));
	height: calc(78 * var(--u));
	min-width: 52px;
	min-height: 52px;
	padding: calc(6 * var(--u)) calc(9 * var(--u));
	background: var(--white);
	border-radius: var(--radius-xl);
}

.contact-card__crest-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.contact-card__name {
	font-size: var(--fs-statement);
	font-weight: var(--font-weight-black);
	letter-spacing: -0.02em;
	line-height: 1;
	color: var(--white);
	text-transform: uppercase;
}

.contact-card__line {
	display: flex;
	align-items: center;
	gap: calc(22 * var(--u));
	padding-block: var(--space-24);
	border-top: var(--stroke-thin) solid var(--dark-surface);
	color: var(--white);
}

.contact-card__line:last-of-type {
	border-bottom: var(--stroke-thin) solid var(--dark-surface);
}

.contact-card__line-icon {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: calc(62 * var(--u));
	height: calc(62 * var(--u));
	min-width: 42px;
	min-height: 42px;
	color: var(--accent-color);
	background: var(--icon-disc-dark);
	border-radius: var(--radius-full);
}

.contact-card__line-icon svg {
	width: 45%;
	height: 45%;
}

.contact-card__line-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.contact-card__line-label {
	font-size: var(--fs-24);
	line-height: 1.55;
	color: var(--muted-color);
}

.contact-card__line-value {
	font-size: var(--fs-tile);
	font-weight: var(--font-weight-black);
	letter-spacing: -0.01em;
	line-height: 1.2;
	color: var(--white);
	overflow-wrap: anywhere;
	transition: color var(--transition-fast);
}

.contact-card__line:hover .contact-card__line-value {
	color: var(--accent-color);
}

.contact-card__social {
	display: flex;
	flex-direction: column;
	gap: var(--space-14);
	padding-top: calc(34 * var(--u));
}

.contact-card__social-label {
	font-size: var(--fs-24);
	line-height: 1.55;
	color: var(--muted-color);
}

.contact-card__social-row {
	display: flex;
	gap: var(--space-12);
}

.contact-card__social-link {
	display: flex;
	flex: 1 1 0;
	align-items: center;
	gap: var(--space-12);
	min-width: 0;
	padding: calc(15.5 * var(--u)) var(--space-18);
	border: var(--stroke-thin) solid var(--border-darker);
	border-radius: var(--radius-lg);
	color: var(--white);
	transition: border-color var(--transition-fast);
}

.contact-card__social-link:hover {
	border-color: var(--accent-color);
	color: var(--white);
}

.contact-card__social-icon {
	display: inline-flex;
	flex: none;
	width: calc(26 * var(--u));
	height: calc(26 * var(--u));
	min-width: 18px;
	min-height: 18px;
	color: var(--accent-color);
}

.contact-card__social-icon svg {
	width: 100%;
	height: 100%;
}

.contact-card__social-name {
	font-size: var(--fs-15);
	font-weight: var(--font-weight-bold);
	line-height: 2.48;
	white-space: nowrap;
}

/* ============================ SEND US A MESSAGE ============================ */
.send-message__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.95fr) minmax(0, 1fr);
	gap: calc(70 * var(--u));
	align-items: start;
}

.send-message__form {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
	padding: var(--space-56) var(--space-60) var(--space-60);
	background: var(--white);
	border: var(--stroke-thin) solid var(--primary-color);
	border-top-width: calc(9 * var(--u));
	border-radius: var(--radius-lg);
}

.send-message__title {
	padding-top: var(--space-14);
	font-size: var(--fs-form-title);
	letter-spacing: -0.022em;
}

.send-message__aside {
	position: sticky;
	top: calc(var(--nav-height, 0px) + var(--space-24));
	display: flex;
	flex-direction: column;
	gap: var(--space-24);
}

.send-message__panel {
	padding: var(--space-40) calc(38 * var(--u));
	background: var(--white);
	border: var(--stroke-thin) solid var(--border-color);
	border-radius: var(--radius-lg);
}

.send-message__panel--reply {
	display: flex;
	align-items: flex-start;
	gap: var(--space-20);
}

.send-message__reply-icon {
	display: inline-flex;
	flex: none;
	width: calc(44 * var(--u));
	height: calc(44 * var(--u));
	min-width: 30px;
	min-height: 30px;
}

.send-message__reply-icon svg,
.send-message__reply-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.send-message__reply-title {
	font-size: var(--fs-28);
	font-weight: var(--font-weight-bold);
	line-height: 1.45;
	color: var(--heading-color);
	text-transform: capitalize;
}

.send-message__reply-text,
.send-message__links-text {
	font-size: var(--fs-intro);
	font-weight: var(--font-weight-light);
	line-height: 1.45;
	color: var(--text-color);
}

.send-message__panel--links {
	display: flex;
	flex-direction: column;
	gap: calc(9.4 * var(--u));
}

.send-message__links-title {
	font-size: var(--fs-32);
	font-weight: var(--font-weight-black);
	letter-spacing: -0.022em;
	line-height: 1.02;
	color: var(--heading-color);
	text-transform: capitalize;
}

.send-message__links {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
	margin: 0;
	padding: calc(14.6 * var(--u)) 0 0;
	list-style: none;
}

.send-message__link {
	display: flex;
	align-items: stretch;
	gap: var(--space-18);
	padding: calc(17 * var(--u)) var(--space-20);
	border: var(--stroke-thin) solid var(--border-color);
	border-radius: var(--radius-lg);
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.send-message__link:hover {
	border-color: var(--accent-current);
	box-shadow: var(--shadow-sm);
}

.send-message__link-bar {
	flex: none;
	width: calc(10 * var(--u));
	min-width: 6px;
	margin-block: var(--stroke-thin);
	background: var(--accent-current);
	border-radius: var(--radius-sm);
}

.send-message__link.accent-grey {
	--accent-current: var(--crumb-divider);
}

.send-message__link-copy {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--space-2);
	min-width: 0;
	padding-top: var(--space-2);
}

.send-message__link-title {
	font-size: var(--fs-h4);
	font-weight: var(--font-weight-bold);
	line-height: 1.2;
	color: var(--heading-color);
}

.send-message__link-text {
	font-size: var(--fs-24);
	line-height: 1.55;
	color: var(--text-color);
}

.send-message__link-arrow {
	display: inline-flex;
	flex: none;
	align-self: center;
	width: calc(22 * var(--u));
	height: calc(22 * var(--u));
	min-width: 16px;
	min-height: 16px;
	color: var(--text-color);
	transition: transform var(--transition-base);
}

.send-message__link-arrow svg {
	width: 100%;
	height: 100%;
}

.send-message__link:hover .send-message__link-arrow {
	transform: translateX(var(--space-4));
}

/* ============================ RESPONSIVE ============================ */

/* --- XL --- */
@media (max-width: 1400px) {
	.contact-card__social-row {
		flex-wrap: wrap;
	}

	.contact-card__social-link {
		flex: 1 1 calc(50% - var(--space-12));
	}
}

/* --- LG --- */
@media (max-width: 1200px) {
	.contact-card {
		margin-left: 72px;
		margin-right: calc(-1 * var(--hero-bleed));
	}

	.send-message__grid {
		grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
		gap: 32px;
	}

	.send-message__form {
		padding: 40px 32px 40px;
	}
}

/* --- MD / Tablet --- */
@media (max-width: 992px) {
	/* The card sits over the photo in flow, so the photo grows to hold it. */
	.page-hero__media:has(.contact-card) {
		aspect-ratio: auto;
	}

	.contact-card {
		margin: 72px var(--hero-bleed) 40px;
	}

	.send-message__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.send-message__aside {
		position: static;
	}
}

/* --- SM / Mobile --- */
@media (max-width: 768px) {
	.contact-card__inner {
		padding: 24px 20px 28px;
	}

	.contact-card__brand {
		padding-bottom: 20px;
	}

	.contact-card__line {
		gap: 14px;
		padding-block: 16px;
	}

	.send-message__form {
		padding: 28px 20px 28px;
		border-top-width: 6px;
	}

	.send-message__panel {
		padding: 24px 20px;
	}
}

/* --- XS / Small Mobile --- */
@media (max-width: 575px) {
	.contact-card__social-link {
		flex-basis: 100%;
	}
}