/*
 * QHF&B — About page styles (page-about.html + qhfnb/about-* patterns).
 * Consumes the :root tokens defined in style.css — no token redefinitions here.
 * All rules are scoped under .qh-about-* / .qh-philosophy-* / .qh-atmo-* so they
 * cannot leak into other pages.
 */

/* ------------------------------------------------------------------
 * Shared rhythm inside About sections
 * (safe duplicates of the class-contract values, scoped to this page)
 * ------------------------------------------------------------------ */
.qh-about-hero .qh-eyebrow,
.qh-about-intro .qh-eyebrow,
.qh-about-philosophy .qh-eyebrow,
.qh-about-atmosphere .qh-eyebrow,
.qh-about-cta .qh-eyebrow {
	margin: 0;
}

.qh-about-hero .qh-eyebrow-rule,
.qh-about-intro .qh-eyebrow-rule,
.qh-about-philosophy .qh-eyebrow-rule,
.qh-about-atmosphere .qh-eyebrow-rule,
.qh-about-cta .qh-eyebrow-rule {
	display: block;
	width: 36px;
	height: 2px;
	background: var(--qh-gold);
	margin: 16px 0 26px;
}

/* centered variants — the rule centers with its parent */
.qh-about-hero-inner .qh-eyebrow-rule,
.qh-philosophy-head .qh-eyebrow-rule,
.qh-about-cta-inner .qh-eyebrow-rule {
	margin-left: auto;
	margin-right: auto;
}

/* ------------------------------------------------------------------
 * Hero (.qh-hero--page 56vh variant, bg m1.jpg)
 * m1.jpg is a small source (250x333): keep cover + a stronger overlay
 * so the upscale reads as mood, exactly like the original site.
 * ------------------------------------------------------------------ */
.qh-hero.qh-about-hero {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background-size: cover;
	background-position: center 40%;
}

.qh-hero.qh-about-hero::before {
	background: rgba(8, 6, 4, 0.74);
}

.qh-about-hero-inner {
	position: relative;
	z-index: 1;
	padding-top: 76px; /* optical centre below the fixed header */
}

.qh-about-hero-inner .qh-display {
	margin: 0;
}

/* ------------------------------------------------------------------
 * Intro — text left / photo right (qh3.jpeg)
 * ------------------------------------------------------------------ */
.qh-about-intro-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2.75rem, 6vw, 5.25rem);
	align-items: center;
}

.qh-about-intro-text .qh-display {
	margin: 0 0 24px;
}

.qh-about-intro-text .qh-zh {
	font-size: 15px;
	line-height: 2;
	margin: 0 0 20px;
}

.qh-about-intro-text .qh-lead {
	margin: 0 0 18px;
}

.qh-about-intro-text .qh-lead:last-child {
	margin-bottom: 0;
}

.qh-about-intro-photo {
	position: relative;
	margin: 0;
}

.qh-about-intro-photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

/* thin offset gold frame, bottom-right */
.qh-about-intro-photo::after {
	content: "";
	position: absolute;
	inset: 18px -14px -14px 18px;
	border: 1px solid var(--qh-line);
	pointer-events: none;
}

/* ------------------------------------------------------------------
 * Philosophy — centered head + 3 numbered cards
 * ------------------------------------------------------------------ */
.qh-about-philosophy {
	background: var(--qh-bg-2);
}

.qh-philosophy-head {
	text-align: center;
	margin: 0 0 clamp(2.5rem, 5vw, 4rem);
}

.qh-philosophy-head .qh-display {
	margin: 0;
}

.qh-philosophy-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}

.qh-philosophy-card {
	padding: clamp(30px, 4vw, 46px) clamp(24px, 3vw, 36px);
}

.qh-philosophy-num {
	display: block;
	font-family: var(--qh-font-display);
	font-weight: 500;
	font-size: 40px;
	line-height: 1;
	color: var(--qh-gold);
	margin: 0 0 22px;
}

.qh-philosophy-card .qh-philosophy-zh {
	display: block;
	font-size: 13px;
	letter-spacing: 0.22em;
	color: var(--qh-gold);
	margin: 0 0 10px;
}

.qh-philosophy-title {
	font-family: var(--qh-font-display);
	font-weight: 500;
	font-size: 22px;
	line-height: 1.3;
	color: var(--qh-cream);
	margin: 0 0 14px;
}

.qh-philosophy-desc {
	font-size: 14px;
	line-height: 1.75;
	color: var(--qh-body);
	margin: 0;
}

/* ------------------------------------------------------------------
 * Atmosphere — two offset photos left (qh1 + qh2) / text right
 * (text is first in source for mobile; photos move left on desktop)
 * ------------------------------------------------------------------ */
.qh-about-atmosphere-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2.75rem, 6vw, 5.25rem);
	align-items: center;
}

.qh-about-atmosphere-text .qh-display {
	margin: 0 0 24px;
}

.qh-about-atmosphere-text .qh-zh {
	font-size: 15px;
	line-height: 2;
	margin: 0 0 20px;
}

.qh-about-atmosphere-text .qh-lead {
	margin: 0 0 34px;
}

.qh-atmo-photos {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(14px, 2vw, 22px);
	align-items: start;
}

.qh-atmo-photo {
	margin: 0;
}

.qh-atmo-photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

.qh-atmo-photo--2 {
	margin-top: clamp(28px, 5vw, 56px);
}

/* ------------------------------------------------------------------
 * CTA — full-bleed bg qh_hero.jpeg + overlay, centered
 * ------------------------------------------------------------------ */
.qh-about-cta {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-height: 60vh;
	background-size: cover;
	background-position: center;
}

.qh-about-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(8, 6, 4, 0.68);
}

.qh-about-cta-inner {
	position: relative;
	z-index: 1;
}

.qh-about-cta-inner .qh-display {
	margin: 0 0 22px;
}

.qh-about-cta-address {
	font-size: 14px;
	letter-spacing: 0.08em;
	color: var(--qh-body);
	margin: 0 0 36px;
}

.qh-about-cta-btns {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
}

/* ------------------------------------------------------------------
 * Breakpoints (mobile-first; About grids go 2/3-col from 881/921px up)
 * ------------------------------------------------------------------ */
@media (min-width: 881px) {
	.qh-philosophy-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 28px;
	}
}

@media (min-width: 921px) {
	.qh-about-intro-grid {
		grid-template-columns: 1.05fr 0.95fr;
	}

	.qh-about-atmosphere-grid {
		grid-template-columns: 0.95fr 1.05fr;
	}

	/* photos left, text right on desktop */
	.qh-about-atmosphere-grid .qh-atmo-photos {
		order: -1;
	}
}