/**
 * DERMAL Phase C Contact presentation layer.
 *
 * Contact-local presentation rules. Managed form settings remain dormant;
 * the public page presents contact cards beside the existing image.
 */

.contact-page {
	--dermal-contact-section-space: clamp(4.5rem, 7vw, 7rem);
	--dermal-contact-card-padding: clamp(1.25rem, 2.6vw, 2rem);
	--dermal-contact-border: 1px solid var(--dermal-color-border);
	--dermal-contact-dark-border: 1px solid rgb(255 255 255 / 16%);
	--dermal-contact-dark-surface: rgb(255 255 255 / 8%);
}

.contact-page :where(h1, h2, h3) {
	line-height: var(--dermal-line-height-heading);
	text-wrap: balance;
}

.contact-page :where(p, a, button, input, textarea) {
	overflow-wrap: anywhere;
}

.contact-page :where(.page-header, .page-contact-us, .contact-info, .google-map, .our-scrolling-ticker) {
	isolation: isolate;
}

/* Preserve the frozen heading and breadcrumb DOM while giving the route the shared Phase C hierarchy. */
.contact-page .page-header {
	display: grid;
	min-height: clamp(18rem, 32vw, 25rem);
	padding: clamp(5rem, 10vw, 8rem) 0;
	overflow: hidden;
	place-items: center;
	background:
		radial-gradient(circle at 18% 18%, rgb(255 255 255 / 9%), transparent 30%),
		linear-gradient(135deg, var(--dermal-color-brand-900), var(--dermal-color-brand-700));
}

.contact-page .page-header-box {
	position: relative;
	z-index: 1;
}

.contact-page .page-header-box h1 {
	max-width: 48rem;
	font-size: clamp(3rem, 6vw, 4.75rem);
	line-height: 1.05;
}

.contact-page .breadcrumb {
	gap: var(--dermal-space-1);
	width: fit-content;
	max-width: 100%;
	padding: 0.625rem 1rem;
	margin-right: auto;
	margin-left: auto;
	background: var(--dermal-contact-dark-surface);
	border: var(--dermal-contact-dark-border);
	border-radius: var(--dermal-radius-pill);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.contact-page .page-contact-us {
	padding-top: var(--dermal-contact-section-space);
	padding-bottom: var(--dermal-contact-section-space);
}

.contact-page .contact-us-img figure,
.contact-page .contact-us-img figure::before,
.contact-page .contact-us-img img {
	border-radius: var(--dermal-radius-xl);
}

.contact-page .contact-us-img img {
	height: auto;
	min-height: 28rem;
}

.contact-page .opeaning-hour-box {
	padding: var(--dermal-space-4);
	background: rgb(12 33 30 / 78%);
	border: var(--dermal-contact-dark-border);
	border-radius: var(--dermal-radius-lg);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.contact-page .contact-us-content {
	margin-left: clamp(0rem, 2vw, 1.5rem);
}

.contact-page .contact-us-content .section-title {
	max-width: 44rem;
	margin-bottom: var(--dermal-space-6);
}

.contact-page .contact-us-content .section-title h2 {
	font-size: clamp(2rem, 4vw, 3.25rem);
}

/* Dormant form rules remain scoped here if a future task restores public rendering. */
.contact-page .contact-form {
	padding: var(--dermal-contact-card-padding);
	background: var(--dermal-color-surface);
	border: var(--dermal-contact-border);
	border-radius: var(--dermal-radius-xl);
	box-shadow: var(--dermal-shadow-sm);
}

.contact-page .contact-form .form-control {
	min-height: 3.5rem;
	border-color: var(--dermal-color-border);
	border-radius: var(--dermal-radius-md);
	opacity: 1;
}

.contact-page .contact-form textarea.form-control {
	min-height: 8.5rem;
	resize: vertical;
}

.contact-page .contact-form .form-control:focus-visible,
.contact-page .contact-form button:focus-visible,
.contact-page .contact-info-content a:focus-visible,
.contact-page .breadcrumb a:focus-visible {
	outline: 3px solid var(--dermal-color-focus);
	outline-offset: 3px;
}

.contact-page .contact-form [disabled] {
	cursor: not-allowed;
}

.contact-page .contact-form-status:not(:empty),
.contact-page .contact-form-unavailable {
	padding: var(--dermal-space-3) var(--dermal-space-4);
	border: 1px solid currentColor;
	border-radius: var(--dermal-radius-md);
}

.contact-page .contact-info {
	display: grid;
	gap: clamp(0.875rem, 1.6vw, 1.375rem);
	padding-top: 0;
	padding-bottom: 0;
}

.contact-page .contact-info-item {
	align-items: center;
	gap: var(--dermal-space-4);
	min-height: clamp(8.75rem, 11.3vw, 10.5rem);
	height: auto;
	padding: var(--dermal-contact-card-padding);
	margin-bottom: 0;
	background: linear-gradient(145deg, var(--dermal-color-brand-900), var(--dermal-color-brand-700));
	border: var(--dermal-contact-dark-border);
	border-radius: var(--dermal-radius-xl);
	box-shadow: var(--dermal-shadow-sm);
}

.contact-page .contact-info-item .icon-box {
	flex: 0 0 3.75rem;
	margin-right: 0;
	border-radius: var(--dermal-radius-md);
}

.contact-page .contact-info-content {
	flex: 1 1 auto;
	min-width: 0;
	width: auto;
}

.contact-page .contact-info-content p + p {
	margin-top: var(--dermal-space-1);
}

.contact-page .contact-info-content a {
	overflow-wrap: anywhere;
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.18em;
}

.contact-page .google-map {
	padding-top: 0;
	padding-bottom: var(--dermal-contact-section-space);
}

.contact-page .google-map .container-fluid {
	max-width: var(--dermal-container-max);
	padding-inline: var(--dermal-container-gutter);
	margin-inline: auto;
}

.contact-page .google-map-iframe {
	overflow: hidden;
	border: var(--dermal-contact-border);
	border-radius: var(--dermal-radius-xl);
	box-shadow: var(--dermal-shadow-sm);
}

.contact-page .google-map-iframe,
.contact-page .google-map-iframe iframe {
	height: clamp(24rem, 40vw, 34rem);
	border-radius: inherit;
}

.contact-page .google-map-iframe iframe {
	display: block;
}

.contact-page .our-scrolling-ticker {
	padding-top: var(--dermal-space-8);
	padding-bottom: var(--dermal-space-8);
	background: var(--dermal-color-brand-900);
}

@media (max-width: 991px) {
	.contact-page .contact-us-content {
		margin-left: 0;
	}

	.contact-page .contact-us-img img {
		min-height: 0;
		aspect-ratio: 4 / 5;
	}
}

@media (min-width: 768px) and (max-width: 991px) {
	.contact-page .contact-us-image,
	.contact-page .contact-us-content {
		max-width: 34rem;
		margin-inline: auto;
	}
}

@media (max-width: 767px) {
	.contact-page .page-header {
		min-height: 16rem;
	}

	.contact-page .page-contact-us,
	.contact-page .google-map {
		padding-bottom: clamp(3.5rem, 12vw, 4.5rem);
	}

	.contact-page .opeaning-hour-box {
		right: 1rem;
		bottom: 1rem;
		left: 1rem;
		padding: var(--dermal-space-3);
	}

	.contact-page .opeaning-hour-box .icon-box {
		margin-right: var(--dermal-space-3);
	}

	.contact-page .contact-info-item,
	.contact-page .google-map-iframe {
		border-radius: var(--dermal-radius-lg);
	}

	.contact-page .contact-info-item {
		min-height: 0;
	}

	.contact-page .google-map-iframe,
	.contact-page .google-map-iframe iframe {
		height: clamp(18rem, 85vw, 24rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	.contact-page * {
		scroll-behavior: auto;
	}
}