/* =============================================================
   ADORNCROFT – ABOUT US PAGE
   ============================================================= */

:root {
	--ac-cream   : #F7F3EE;
	--ac-sand    : #EDE3D7;
	--ac-green   : #E3E8D6;
	--ac-dark    : #2B2A29;
	--ac-font-h  : 'Cormorant Garamond', Georgia, serif;
	--ac-font-b  : 'Satoshi Variable', system-ui, sans-serif;
	--ac-ls-h    : 1.3px;
	--ac-max-w   : 1440px;
	--ac-h2-size : 32px;
	--ac-h2-lh   : 42px;
}

/* The vars above also back design-call.css's .ac-dc-homeowners* (reused
   here for the "Homes that found their story." testimonials block) —
   design-call.css itself only scopes them to .ac-design-call, which this
   page doesn't use, so they're declared globally at :root instead. */

/* Variables declared at :root (not scoped to .ac-about-us) so the block
   editor canvas — which renders each block on its own, without the page
   template's wrapper div — still resolves them for a WYSIWYG preview. */
/* flex/width trio mirrors single.css's .ac-single-page: Astra's
   .ast-container is a flex column, so the page wrapper must claim the full
   cross-axis width (flex-basis 100% + width 100% + min-width 0) or it
   shrinks to its content's intrinsic width — which is what pinned the hero
   to the top-left corner. */
.ac-about-us {
	flex       : 1 1 100%;
	min-width  : 0;
	width      : 100%;
	background : var(--ac-cream);
	overflow-x : hidden;
	max-width  : 100%;
}

/* Charcoal ("dark") buttons hover to Misty Green — same convention as
   .ac-home .ac-btn--dark:hover (homepage.css) and .ac-product-page
   .ac-btn--dark:hover (product-single.css): border stays Charcoal Black,
   only the fill + text swap. */
.ac-about-us .ac-btn { transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
.ac-about-us .ac-btn--dark:hover {
	background   : var(--ac-green);
	color        : var(--ac-dark) !important;
	border-color : var(--ac-dark);
	opacity      : 1;
}

/* ── Astra full-width reset ──────────────────────────────────── */
/* Same reset + same convention as single.css's .single-post and
   inc/policy-pages.php's .ac-policy-page: a dedicated body class (added in
   inc/enqueue.php's body_class filter for is_page_template('page-about-us.php'))
   forces Astra's #primary/.ast-container column to full width instead of
   relying on the page-builder layout meta to do it alone. */
.ac-about-us-page #page,
.ac-about-us-page .site,
.ac-about-us-page .ast-container,
.ac-about-us-page .site-content,
.ac-about-us-page #primary,
.ac-about-us-page #content,
.ac-about-us-page .site-main,
.ac-about-us-page .entry-content,
.ac-about-us-page article {
	max-width  : 100% !important;
	width      : 100% !important;
	margin     : 0 !important;
	padding    : 0 !important;
	background : var(--ac-cream) !important;
	box-sizing : border-box !important;
}

/* ── Hero ────────────────────────────────────────────────────── */
/* Same component as the Studio Journal article hero (single.css
   .ac-single-hero): full-bleed image, flat dark overlay, centered
   cream text — with a description paragraph in place of the
   article's date/author line. Sized in % rather than the Figma
   export's fixed pixel widths so it stays fluid at any viewport. */
.ac-about-hero {
	position            : relative;
	width               : 100%;
	min-height          : 350px;
	background-color    : #333;
	background-size     : cover;
	background-position : center 70%;
	display             : flex;
	align-items         : center;
	justify-content     : center;
}

.ac-about-hero-overlay {
	position   : absolute;
	inset      : 0;
	background : rgba(0, 0, 0, 0.5);
}

.ac-about-hero-inner {
	position        : relative;
	z-index         : 1;
	display         : flex;
	flex-direction  : column;
	align-items     : center;
	gap             : 32px;
	width           : 100%;
	padding         : 48px 22.22%; /* 320px / 1440px in the Figma export, kept fluid */
	text-align      : center;
}

.ac-about-hero-title {
	font-family    : var(--ac-font-h);
	font-size      : 48px;
	font-weight    : 700;
	line-height    : 58px;
	color          : var(--ac-cream);
	margin         : 0;
	letter-spacing : var(--ac-ls-h);
}

.ac-about-hero-desc {
	font-family : var(--ac-font-b);
	font-size   : 16px;
	font-weight : 500;
	line-height : 21px;
	color       : var(--ac-cream);
	margin      : 0;
}

@media (max-width: 768px) {
	.ac-about-hero       { min-height : 320px; }
	.ac-about-hero-inner { gap : 20px; padding : 40px 8%; }
	.ac-about-hero-title { font-size : 32px; line-height : 40px; }
}

@media (max-width: 480px) {
	.ac-about-hero       { min-height : 280px; }
	.ac-about-hero-title { font-size : 32px; line-height : 40px; }
	.ac-about-hero-desc  { font-size : 14px; line-height : 19px; }
}

/* ── ac/about-split — "Makers of..." / "Built by someone who cares" ─────
   Reusable image+text section, mirrored via the block's `reverse`
   attribute. Full-bleed band reuses the .ac-contact-double-cta trick
   (policy-pages.css) so it spans the viewport regardless of Astra's
   container width; horizontal inset stays fluid via clamp() rather than
   the Figma export's fixed 160px. */
.ac-about-split {
	width          : 100vw;
	max-width      : 100vw;
	margin-left    : calc(50% - 50vw);
	margin-right   : calc(50% - 50vw);
	padding        : 80px clamp(20px, 11vw, 160px);
	display        : flex;
	flex-direction : row;
	align-items    : center;
	gap            : 64px;
}

.ac-about-split--reverse    { flex-direction : row-reverse; }
.ac-about-split--cream      { background : var(--ac-cream); }
.ac-about-split--sand       { background : var(--ac-sand); }

/* Figma export sizes the image column wider than the text column (555px vs
   515px — the "textsmall" in its own "desktopimage--textsmall" class name),
   not an even 50/50 split. flex-grow carries that same ratio proportionally
   instead of a fixed px width, so it stays fluid. */
.ac-about-split-media   { flex : 555 1 0; min-width : 0; }
.ac-about-split-content { flex : 515 1 0; min-width : 0; }

.ac-about-split-media img {
	box-shadow : 0 0 4px rgba(0, 0, 0, 0.25);
	display    : block;
	width      : 100%;
	height     : auto;
	object-fit : cover;
}

.ac-about-split-title {
	font-family : var(--ac-font-h);
	font-size   : 32px;
	font-weight : 700;
	line-height : 42px;
	color       : var(--ac-dark);
	margin      : 0 0 24px;
}

.ac-about-split-body p {
	font-family : var(--ac-font-b);
	font-size   : 16px;
	font-weight : 400;
	line-height : 26px;
	color       : var(--ac-dark);
	margin      : 0 0 16px;
}

.ac-about-split-body p:last-child { margin-bottom : 0; }

@media (max-width: 768px) {
	.ac-about-split { padding : 48px 8%; gap : 32px; }
}

@media (max-width: 600px) {
	.ac-about-split,
	.ac-about-split--reverse {
		flex-direction : column;
		padding        : 40px 6%;
		gap            : 24px;
	}
	/* Text reads before the image on mobile regardless of the desktop
	   left/right layout (the `reverse` toggle only affects row order, which
	   collapses to a single column here anyway). */
	.ac-about-split-content { order : 1; }
	.ac-about-split-media   { order : 2; }
	.ac-about-split-title { font-size : 24px; line-height : 32px; }
}

/* ── ac/about-materials — "Only the finest materials built to last." ────
   Text + checklist on the left, a horizontally scrollable photo strip on
   the right — Figma pads only the left edge (160px on a 1440 canvas), so
   the gallery bleeds flush to the viewport's right edge same as the
   source design. Reuses the .ac-contact-double-cta full-bleed trick. */
.ac-about-materials {
	width        : 100vw;
	max-width    : 100vw;
	margin-left  : calc(50% - 50vw);
	margin-right : calc(50% - 50vw);
	display      : flex;
	align-items  : center;
	gap          : 60px;
	padding      : 50px 0 50px clamp(20px, 11vw, 160px);
	background   : var(--ac-cream);
}

.ac-about-materials-text {
	flex           : 651 1 0;
	min-width      : 260px;
	display        : flex;
	flex-direction : column;
	align-items    : flex-start;
	gap            : 40px;
}

.ac-about-materials-title {
	font-family : var(--ac-font-h);
	font-size   : 32px;
	font-weight : 700;
	line-height : 42px;
	color       : #000000;
	margin      : 0;
}

.ac-about-materials-desc {
	font-family : var(--ac-font-b);
	font-size   : 16px;
	font-weight : 400;
	line-height : 26px;
	color       : var(--ac-dark);
	margin      : 0;
}

.ac-about-materials-items {
	display  : flex;
	flex-wrap: wrap;
	gap      : 24px;
}

.ac-about-materials-item {
	display     : flex;
	align-items : center;
	gap         : 8px;
	font-family : var(--ac-font-b);
	font-size   : 16px;
	font-weight : 500;
	line-height : 21px;
	color       : var(--ac-dark);
	white-space : nowrap;
}

.ac-about-materials-check { flex-shrink : 0; }

/* Scrollable photo strip — flex-shrink:0 on the photos is what forces the
   overflow (and the scrollbar) instead of squeezing them to fit. */
.ac-about-materials-gallery {
	flex            : 569 1 0;
	min-width       : 0;
	height          : clamp(280px, 31vw, 450px);
	display         : flex;
	align-items     : center;
	gap             : 20px;
	overflow-x      : auto;
	scroll-behavior : smooth;
	scrollbar-width : thin;
	scrollbar-color : var(--ac-dark) transparent;
}

.ac-about-materials-gallery::-webkit-scrollbar       { height : 6px; }
.ac-about-materials-gallery::-webkit-scrollbar-track { background : transparent; }
.ac-about-materials-gallery::-webkit-scrollbar-thumb { background : var(--ac-dark); border-radius : 3px; }

.ac-about-materials-photo {
	flex-shrink : 0;
	flex-basis  : 31vw;
	min-width   : 220px;
	height      : 100%;
	background-size     : cover;
	background-position : center;
}

.ac-about-materials-photo:first-child { flex-basis : 27.8vw; }

@media (max-width: 900px) {
	.ac-about-materials { flex-direction : column; align-items : stretch; padding : 48px 8%; gap : 32px; }
	.ac-about-materials-text,
	.ac-about-materials-gallery { flex : 1 1 auto; }
	.ac-about-materials-gallery { width : 100%; }
}

@media (max-width: 600px) {
	.ac-about-materials { padding : 40px 6%; gap : 24px; }
	.ac-about-materials-title { font-size : 24px; line-height : 32px; }
	.ac-about-materials-items { gap : 16px; }
	.ac-about-materials-gallery { gap : 6px; }
	.ac-about-materials-photo { min-width : 180px; }
}