/* Dr Hoa — framed opening hero. Component-scoped. */

.home .site-header {
	margin-bottom: calc(-1 * var(--header-h));
	border-bottom-color: color-mix(in srgb, var(--rule) 55%, transparent);
	background: linear-gradient(to bottom, color-mix(in srgb, var(--ivory) 82%, transparent), transparent);
}

.opening-hero {
	--opening-panel-lift: 78px;
	position: relative;
	min-height: 0;
	padding-top: var(--header-h);
	overflow: clip;
	border-bottom: 1px dashed var(--sketch);
	background: var(--ivory);
}

.opening-hero__media {
	position: relative;
	aspect-ratio: 48 / 25;
	background: color-mix(in srgb, var(--rule) 32%, var(--ivory));
}

.opening-hero__media::after {
	content: "";
	position: absolute;
	inset: 18px;
	border: 1px solid color-mix(in srgb, var(--gold) 42%, var(--rule));
	pointer-events: none;
}

.opening-hero__media picture,
.opening-hero__media img,
.opening-hero__media video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.opening-hero__media img {
	object-position: center center;
}

.opening-hero__media video {
	position: absolute;
	inset: 0;
}

.opening-hero__media-label {
	position: absolute;
	right: calc(var(--gutter) + 6px);
	bottom: 30px;
	font-size: .5625rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--gold);
}

.opening-hero__inner {
	position: relative;
	z-index: 2;
	display: block;
	width: 100%;
	min-width: 0;
	min-height: 0;
	margin-top: calc(-1 * var(--opening-panel-lift));
	padding: 0 var(--gutter) 36px;
}

.opening-hero__panel {
	position: relative;
	display: grid;
	grid-template-columns: minmax(320px, .9fr) minmax(0, 1.35fr);
	gap: 32px;
	align-items: center;
	width: 100%;
	min-width: 0;
	margin: 0;
	padding: 22px 26px;
	border: 1px solid color-mix(in srgb, var(--gold) 28%, var(--rule));
	background: color-mix(in srgb, var(--ivory) 86%, transparent);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .84),
		inset 0 -1px 0 rgba(180, 146, 79, .08),
		0 2px 5px rgba(30, 34, 35, .06),
		0 18px 46px rgba(31, 68, 66, .13);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.opening-hero__panel {
		background: color-mix(in srgb, var(--ivory) 70%, transparent);
		backdrop-filter: blur(24px) saturate(1.12);
		-webkit-backdrop-filter: blur(24px) saturate(1.12);
	}
}

.opening-hero__panel::before,
.opening-hero__panel::after,
.opening-hero__corners::before,
.opening-hero__corners::after {
	content: "";
	position: absolute;
	width: 20px;
	height: 20px;
	border-color: var(--gold);
	border-style: solid;
	opacity: .7;
	pointer-events: none;
}

.opening-hero__corners {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent, rgba(180, 146, 79, .2), transparent) center 9px / calc(100% - 88px) 1px no-repeat;
	pointer-events: none;
}

.opening-hero__panel::before { top: 9px; left: 9px; border-width: 1px 0 0 1px; }
.opening-hero__panel::after { top: 9px; right: 9px; border-width: 1px 1px 0 0; }
.opening-hero__corners::before { left: 9px; bottom: 9px; border-width: 0 0 1px 1px; }
.opening-hero__corners::after { right: 9px; bottom: 9px; border-width: 0 1px 1px 0; }

.opening-hero__quote {
	margin: 0;
	padding: 0;
	border: 0;
}

.opening-hero__quote p {
	max-width: 40ch;
	margin: 0;
	font-family: var(--font-serif);
	font-size: clamp(1.25rem, 1.06rem + .38vw, 1.5rem);
	font-style: italic;
	line-height: 1.24;
	color: var(--teal-deep);
}

.opening-hero__quote cite {
	display: block;
	margin-top: 11px;
	font-family: var(--font-sans);
	font-size: .625rem;
	font-style: normal;
	font-weight: 700;
	letter-spacing: .17em;
	text-transform: uppercase;
	color: var(--gold);
}

.opening-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
}

.opening-hero__actions .btn {
	width: 100%;
	min-width: 0;
	max-width: 100%;
	min-height: 44px;
	padding-inline: 18px;
	background: var(--teal-deep);
	box-shadow: none;
	line-height: 1.25;
	text-align: center;
	white-space: normal;
}

.opening-hero__actions .btn.secondary {
	background: color-mix(in srgb, var(--ivory) 74%, transparent);
	box-shadow: none;
}

.opening-hero__panel-bottom {
	display: grid;
	grid-template-columns: minmax(220px, .9fr) minmax(220px, 1.1fr) minmax(140px, .55fr);
	gap: 14px;
	align-items: center;
	margin: 0;
	padding: 0 0 0 28px;
	border-left: 1px dashed var(--sketch);
}

.opening-hero__address {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	min-height: 38px;
	margin: 0;
	padding: 0 0 0 14px;
	border-left: 1px dashed var(--sketch);
	color: var(--teal-deep);
	font-style: normal;
}

.opening-hero__address-copy {
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: 2px;
}

.opening-hero__address-line,
.opening-hero__address-detail {
	font-size: .5625rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .07em;
	text-transform: uppercase;
}

.opening-hero__address-detail {
	color: var(--ink-muted);
	font-size: .53125rem;
	font-weight: 600;
	letter-spacing: .055em;
}

.opening-hero__address svg {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
}

.opening-hero__hotline {
	display: flex;
	align-items: center;
	gap: 9px;
	min-width: 0;
	min-height: 38px;
	padding-left: 14px;
	border-left: 1px dashed var(--sketch);
	color: var(--teal-deep);
	text-decoration: none;
}

.opening-hero__hotline svg {
	width: 17px;
	height: 17px;
	flex: 0 0 auto;
}

.opening-hero__hotline-copy {
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: 1px;
}

.opening-hero__hotline-label {
	font-size: .53125rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--gold);
}

.opening-hero__hotline strong {
	font-size: .75rem;
	line-height: 1.35;
	letter-spacing: .035em;
	white-space: nowrap;
}

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

.opening-hero__panel {
	animation: opening-hero-in .8s .12s var(--ease-out-soft) both;
}

@keyframes opening-hero-in {
	from { opacity: 0; transform: translateY(14px); }
	to { opacity: 1; transform: none; }
}

@media (max-width: 1180px) {
	.opening-hero { --opening-panel-lift: 42px; }

	.opening-hero__panel {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.opening-hero__panel-bottom {
		margin-top: 0;
		padding: 15px 0 0;
		border-top: 1px dashed var(--sketch);
		border-left: 0;
	}
}

@media (max-width: 1024px) {

	.opening-hero__media {
		aspect-ratio: 16 / 9;
	}

	.opening-hero__media img { object-position: center center; }

	.opening-hero__inner {
		padding: 0 24px 34px;
	}

	.opening-hero__panel {
		padding: 24px 28px 22px;
	}

	.opening-hero__quote p { font-size: 1.5rem; }
}

@media (max-width: 768px) {
	.opening-hero { --opening-panel-lift: 24px; }
	.opening-hero__media { aspect-ratio: 4 / 3; }
	.opening-hero__media img { object-position: center center; }
	.opening-hero__media::after { inset: 12px; }
	.opening-hero__inner { padding: 0 20px 32px; }
	.opening-hero__panel { width: 100%; padding: 24px 24px 22px; }
	.opening-hero__quote p { max-width: 38ch; font-size: 1.375rem; }
	.opening-hero__panel-bottom { grid-template-columns: minmax(0, 1fr) minmax(140px, .55fr); }
	.opening-hero__actions { grid-column: 1 / -1; max-width: 360px; }
	.opening-hero__actions .btn { padding-inline: 16px; }
	.opening-hero__address { padding-left: 0; border-left: 0; }
	.home .mobile-cta { transition: opacity .24s ease, transform .24s var(--ease-out-soft); }
	.home:not(.is-scrolled) .mobile-cta { opacity: 0; transform: translateY(100%); pointer-events: none; }
}

@media (max-width: 540px) {
	.opening-hero { --opening-panel-lift: 16px; }
	.opening-hero__inner { padding-inline: 14px; padding-bottom: 24px; }
	.opening-hero__panel { padding: 24px 20px 20px; }
	.opening-hero__quote p { font-size: 1.3rem; line-height: 1.3; }
	.opening-hero__panel-bottom { grid-template-columns: 1fr; gap: 14px; margin-top: 20px; padding-top: 15px; }
	.opening-hero__actions { grid-column: 1; max-width: none; }
	.opening-hero__hotline { min-height: 34px; padding: 13px 0 0; border-top: 1px dashed var(--sketch); border-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.opening-hero__media video { display: none; }
	.opening-hero__panel { animation: none; }
}