/**
 * LOVSETTI About page styles. Enqueued only on /about/ (see
 * lovsetti_theme_about_assets() in functions.php).
 *
 * Every selector below is scoped under .ls-about so nothing here can
 * affect Home/Furniture/Outdoor/Projects/Product/Contact/Get a Quote.
 * Reuses sitewide primitives throughout: .ls-container, .ls-btn,
 * .ls-eyebrow, .ls-ratio/.ls-placeholder, .ls-link-cta, .ls-reveal/.ls-fade
 * (all from base.css/layout.css/components.css, unmodified).
 *
 * Local design tokens below follow the brief's "premium furniture
 * editorial" direction -- warm neutrals, no corporate blue, no
 * box-shadow, no rounded cards -- kept page-scoped rather than changed
 * sitewide since Home/Furniture/etc. keep their own existing palette.
 */

.ls-about {
	--ls-about-warm-white: #F7F5F1;
	--ls-about-white: #FFFFFF;
	--ls-about-charcoal: #181818;
	--ls-about-text-soft: #6F6C67;
	--ls-about-warm-gray: #A7A29A;
	--ls-about-border: rgba(20, 20, 20, 0.12);
	--ls-about-border-on-dark: rgba(247, 245, 241, 0.16);

	--ls-about-container-max: 1360px;
	--ls-about-text-max: 1180px;
	--ls-about-prose-max: 600px;

	--ls-about-h1-size: clamp(34px, 43px + 2.4vw, 82px);
	--ls-about-h2-size: clamp(28px, 14px + 3vw, 64px);
	--ls-about-eyebrow-size: 12px;
	--ls-about-body-size: clamp(16px, 15px + 0.3vw, 18px);

	--ls-about-space-md: clamp(72px, 40px + 9vw, 130px);
	--ls-about-space-lg: clamp(88px, 44px + 11vw, 170px);

	background: var(--ls-about-white);
	font-size: var(--ls-about-body-size);
	line-height: 1.7;
}

.ls-about h1,
.ls-about h2,
.ls-about h3 {
	font-weight: var(--ls-font-weight-light);
	letter-spacing: -0.01em;
}

.ls-about p {
	color: var(--ls-text);
}

/* ===== Shared building blocks ===== */
.ls-about-container-text {
	max-width: var(--ls-about-text-max);
	margin-inline: auto;
}

.ls-about-h2 {
	font-size: var(--ls-about-h2-size);
	line-height: 1.1;
	margin-bottom: var(--ls-space-5);
}

.ls-about .ls-eyebrow {
	font-size: var(--ls-about-eyebrow-size);
	letter-spacing: 0.14em;
	margin-bottom: var(--ls-space-4);
}

/* Staggered reveal: nth-child delay for grid/list items so groups don't
 * all snap in on the same frame. Purely additive to the existing
 * .ls-reveal opacity/translateY transition -- no new JS. */
.ls-about-turn__grid .ls-reveal:nth-child(2),
.ls-about-clients__grid .ls-reveal:nth-child(2),
.ls-about-transform__support .ls-reveal:nth-child(2) {
	transition-delay: 60ms;
}
.ls-about-turn__grid .ls-reveal:nth-child(3),
.ls-about-clients__grid .ls-reveal:nth-child(3),
.ls-about-transform__support .ls-reveal:nth-child(3) {
	transition-delay: 120ms;
}
.ls-about-turn__grid .ls-reveal:nth-child(4),
.ls-about-clients__grid .ls-reveal:nth-child(4),
.ls-about-transform__support .ls-reveal:nth-child(4) {
	transition-delay: 180ms;
}
.ls-about-turn__grid .ls-reveal:nth-child(5) {
	transition-delay: 240ms;
}
.ls-about-turn__grid .ls-reveal:nth-child(6) {
	transition-delay: 300ms;
}

/* ===== 01 Hero ===== */
.ls-about-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 560px;
	overflow: hidden;
}

.ls-about-hero__media {
	position: absolute;
	inset: 0;
}

.ls-about-hero__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ls-about-hero__image--neutral {
	display: block;
	background: var(--ls-about-warm-gray);
}

.ls-about-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(24, 24, 24, 0.15) 0%, rgba(24, 24, 24, 0.55) 100%);
}

/* Symmetric padding, paired with the centered alignment above, is what
 * gives the copy an identical gap top and bottom. Keeping the padding on
 * both sides (rather than centering against zero padding) matters at the
 * narrow end: where the copy is taller than the hero's min-height the hero
 * grows and this padding stays as real breathing room, instead of the copy
 * ending up pressed against the hero edges. */
.ls-about-hero__inner {
	position: relative;
	width: 100%;
	padding-block: var(--ls-space-9);
}

.ls-about-hero__content {
	max-width: 640px;
}

.ls-about-hero__eyebrow {
	color: rgba(247, 245, 241, 0.75);
}

.ls-about-hero__title {
	font-size: var(--ls-about-h1-size);
	line-height: 1.05;
	color: var(--ls-about-warm-white);
	margin-bottom: var(--ls-space-5);
	overflow-wrap: break-word;
}

.ls-about-hero__text {
	color: rgba(247, 245, 241, 0.88);
	max-width: 520px;
}

.ls-about-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ls-space-4);
	margin-top: var(--ls-space-6);
}

.ls-about-hero__story-link {
	color: var(--ls-about-warm-white);
	border-color: rgba(247, 245, 241, 0.6);
}

.ls-about-hero__story-link:hover,
.ls-about-hero__story-link:focus-visible {
	background: var(--ls-about-warm-white);
	color: var(--ls-about-charcoal);
}

@media (min-width: 768px) {
	.ls-about-hero {
		min-height: 650px;
	}
}

@media (min-width: 1024px) {
	.ls-about-hero {
		min-height: 820px;
	}
}

/* ===== 03 Our Story ===== */
.ls-about-story {
	background: var(--ls-about-white);
	padding-block: var(--ls-about-space-md);
	scroll-margin-top: var(--ls-header-height-desktop);
}

.ls-about-story__grid {
	display: grid;
	gap: var(--ls-space-7);
}

/* Copy first, photo second, at every width. page-about.php still emits the
 * media block before the text block, so the visual order is set here rather
 * than in the template: side by side this puts the copy in the wide left
 * column and the photo in the narrow right one; stacked, it puts the copy
 * above the photo. */
.ls-about-story__content {
	order: 1;
}

.ls-about-story__media {
	order: 2;
	position: relative;
}

/* A 3:4 portrait block. The photo inside keeps the sitewide .ls-ratio
 * treatment (absolutely positioned, object-fit: cover -- see
 * components.css), so this box crops rather than distorts whatever image is
 * bound in the Customizer. The 12px radius is deliberate here and is the
 * one exception on this page to the theme's otherwise square corners.
 * Stacked (below 1024px) the box simply spans the column; side by side it
 * is driven by height instead -- see the desktop block further down. */
.ls-about-story__image {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	border-radius: 12px;
	overflow: hidden;
	background: var(--ls-surface-soft);
}

/* The whole inset block is dropped: the small floating photo (white frame,
 * drop shadow) and the "2014 -- Foshan, China" year/location line with it.
 * page-about.php still emits the markup, so it is hidden here rather than
 * deleted -- removing it properly means editing the template, which is out
 * of scope for a CSS-only change. */
.ls-about-story__inset {
	display: none;
}

.ls-about-story__content p {
	max-width: var(--ls-about-prose-max);
	margin-bottom: var(--ls-space-4);
}

.ls-about-story__content .ls-about-h2 {
	max-width: var(--ls-about-prose-max);
}

@media (min-width: 1024px) {
	/* Side by side, the copy runs the full width of its column instead of
	 * stopping at the page's 600px reading measure: the column is already a
	 * deliberate 60% and the leftover 115px only read as a hole between the
	 * two columns. Scoped to this section and to this breakpoint -- stacked,
	 * the copy spans the whole container and the 600px measure still does
	 * the useful work, so it stays. */
	.ls-about-story {
		--ls-about-prose-max: 100%;
	}

	/* 60 / 40 of the space either side of the gap. Written in fr rather than
	 * percentages so the 48px gap comes out of the shared space instead of
	 * overflowing the row. The column stretches rather than sitting at the
	 * top, because the photo is sized from that column's height. */
	.ls-about-story__grid {
		grid-template-columns: 3fr 2fr;
		align-items: stretch;
		gap: var(--ls-space-7);
	}

	/* The photo sits two lines of body copy in from the top of the text
	 * block and two lines in from its bottom. The media column stretches to
	 * the row height -- which the copy alone defines, since the .ls-ratio
	 * box's children are absolutely positioned and this column therefore has
	 * no intrinsic height of its own -- and this padding takes those two
	 * lines off each end. */
	.ls-about-story__media {
		--ls-story-line: calc(15px * 1.3); /* one line of the copy below */

		display: flex;
		justify-content: flex-end;
		align-self: stretch;
		padding-block: calc(2 * var(--ls-story-line));
	}

	/* Height-driven here, the reverse of the stacked case: the box fills what
	 * the padding leaves and the 3:4 ratio derives its width from that. It
	 * therefore ends up narrower than the 40% column, and is pushed to the
	 * column's outer edge so the section keeps the same right margin as every
	 * other section on the page. */
	.ls-about-story__image {
		width: auto;
		height: 100%;
		/* Guard only. At 1024px -- the narrowest desktop column against the
		 * tallest copy -- the derived width lands within 2px of the column, so
		 * a longer story would otherwise push the photo out of its column and
		 * into the text. Capping the width there costs a little of the 3:4
		 * ratio instead of breaking the layout. */
		max-width: 100%;
	}

	/* Desktop reading size for this column, inherited from the earlier
	 * arrangement where the copy had to fit inside a fixed-ratio image's
	 * height. The dependency now runs the other way -- the photo is sized
	 * from this column -- so these values also set the two-line inset above
	 * (--ls-story-line is derived from this font-size and line-height);
	 * change them together or the inset stops being exactly two lines. */
	.ls-about-story__content p {
		margin-bottom: 5px;
		font-size: 15px;
		line-height: 1.3;
	}
}

/* From here up, the photo column is narrowed to 29%. The photo takes its
 * height from the copy and its width from the 3:4 ratio, so on a wide
 * screen it fills only a little over half of a 40% column and the leftover
 * reads as a hole between copy and photo. Narrowing the column closes that
 * hole. It is deliberately not done below this width: there the copy is
 * taller, so the photo is taller and wider, and a 29% column would be
 * narrower than the photo -- the max-width guard would then cap the width
 * and cost the 3:4 ratio. */
@media (min-width: 1200px) {
	.ls-about-story__grid {
		grid-template-columns: 5fr 2fr;
	}
}

/* ===== 04 A New Opportunity =====
 * Light section, on the same warm off-white the What We Do and Our
 * Philosophy sections already use. Layout, spacing and typography below are
 * unchanged -- only the ground and the text colors that were written for a
 * dark ground. No overlay, gradient or pseudo-element is or was involved:
 * the background is this single declaration. */
.ls-about-turn {
	background: var(--ls-about-warm-white);
	padding-block: var(--ls-about-space-lg);
}

.ls-about-turn__inner {
	max-width: var(--ls-about-text-max);
}

/* Qualified with the parent .ls-about-turn (rather than left as a bare
 * single class) so this reliably beats the sitewide .ls-about p rule's
 * higher specificity. Without the qualification this <p> would take that
 * rule's color instead of its own. The same qualification is kept below on
 * .ls-about-turn__question, __yes and __item-text, the other three <p>
 * elements here that need a color of their own. */
.ls-about-turn .ls-about-turn__eyebrow {
	/* Matches every other eyebrow on this page, which all render at this
	 * color via the .ls-about p rule described above. */
	color: var(--ls-text);
}

.ls-about-turn__heading {
	color: var(--ls-about-charcoal);
	max-width: 780px;
}

.ls-about-turn__intro p,
.ls-about-turn__subquestions p {
	color: var(--ls-about-text-soft);
	max-width: var(--ls-about-prose-max);
	margin-bottom: var(--ls-space-4);
}

.ls-about-turn__subquestions {
	margin-top: var(--ls-space-6);
}

.ls-about-turn .ls-about-turn__question {
	font-size: clamp(26px, 3.4vw + 12px, 48px);
	line-height: 1.2;
	font-weight: var(--ls-font-weight-light);
	color: var(--ls-about-charcoal);
	max-width: 920px;
	margin: var(--ls-space-8) 0 0;
}

.ls-about-turn .ls-about-turn__yes {
	font-size: clamp(48px, 8vw, 108px);
	font-weight: var(--ls-font-weight-light);
	color: var(--ls-about-charcoal);
	margin: var(--ls-space-7) 0 var(--ls-space-8);
	line-height: 1;
}

.ls-about-turn__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ls-space-7) var(--ls-space-6);
	border-top: 1px solid var(--ls-about-border);
	padding-top: var(--ls-space-7);
}

.ls-about-turn__num {
	display: block;
	font-size: 13px;
	letter-spacing: 0.1em;
	color: var(--ls-about-warm-gray);
	margin-bottom: var(--ls-space-3);
}

.ls-about-turn__item-title {
	color: var(--ls-about-charcoal);
	font-size: 20px;
	margin: 0 0 var(--ls-space-2);
}

.ls-about-turn .ls-about-turn__item-text {
	color: var(--ls-about-text-soft);
	margin: 0;
	max-width: 320px;
}

@media (min-width: 640px) {
	.ls-about-turn__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.ls-about-turn__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ===== 05 International Transformation ===== */
.ls-about-transform {
	background: var(--ls-about-white);
	padding-block: var(--ls-about-space-md);
}

.ls-about-transform__head {
	max-width: var(--ls-about-text-max);
	margin-bottom: var(--ls-space-7);
}

.ls-about-transform__content p {
	margin-bottom: var(--ls-space-4);
	max-width: var(--ls-about-prose-max);
}

.ls-about-transform__support {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ls-space-6);
	margin-top: var(--ls-about-space-md);
	padding-top: var(--ls-space-7);
	border-top: 1px solid var(--ls-about-border);
}

.ls-about-transform__support-title {
	font-size: 12px;
	letter-spacing: 0.12em;
	color: var(--ls-about-text-soft);
	margin: 0 0 var(--ls-space-2);
}

.ls-about-transform__support-text {
	margin: 0;
	font-size: 15px;
}

.ls-about-transform__closing {
	max-width: var(--ls-about-prose-max);
	margin-top: var(--ls-space-7);
	color: var(--ls-text-muted);
}

@media (min-width: 640px) {
	.ls-about-transform__support {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.ls-about-transform__support {
		grid-template-columns: repeat(5, 1fr);
	}
}

/* ===== 06 More Than a Factory ===== */
/* Symmetric padding, matching the other sections on this page. The former
 * asymmetric 32px bottom existed only because the One Team process block
 * that used to close this section carried its own large top margin; with
 * that block gone, an even band is what keeps the section balanced. */
.ls-about-factory-story {
	background: var(--ls-about-warm-white);
	padding-block: var(--ls-about-space-md);
}

.ls-about-factory-story__head {
	max-width: var(--ls-about-text-max);
}

.ls-about-factory-story__head p {
	max-width: var(--ls-about-prose-max);
}

.ls-about-factory-story__questions {
	margin-top: var(--ls-space-7);
	padding-top: var(--ls-space-6);
	border-top: 1px solid var(--ls-about-border);
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ls-space-3) var(--ls-space-6);
	max-width: var(--ls-about-text-max);
}

.ls-about-factory-story__questions p {
	font-size: clamp(18px, 1.4vw + 12px, 24px);
	font-weight: var(--ls-font-weight-light);
	margin: 0;
	padding: var(--ls-space-3) 0;
	border-bottom: 1px solid var(--ls-about-border);
}

.ls-about-factory-story__note {
	margin-top: var(--ls-space-6);
	color: var(--ls-about-text-soft);
}

@media (min-width: 768px) {
	.ls-about-factory-story__questions {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ===== 08 Who We Work With ===== */
.ls-about-clients {
	background: var(--ls-about-white);
	padding-block: var(--ls-about-space-md);
}

.ls-about-clients__head {
	max-width: var(--ls-about-text-max);
	margin-bottom: var(--ls-space-7);
}

.ls-about-clients__head p {
	max-width: var(--ls-about-prose-max);
}

.ls-about-clients__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--ls-space-4);
}

.ls-about-clients__card {
	position: relative;
}

.ls-about-clients__media {
	background: var(--ls-surface-soft);
}

.ls-about-clients__media img {
	transition: transform var(--ls-transition-slow);
}

.ls-about-clients__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(24, 24, 24, 0) 45%, rgba(24, 24, 24, 0.72) 100%);
}

.ls-about-clients__info {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: var(--ls-space-4);
}

.ls-about-clients__label {
	color: var(--ls-about-warm-white);
	font-size: 16px;
	font-weight: var(--ls-font-weight-regular);
	margin: 0;
}

.ls-about-clients__desc {
	color: rgba(247, 245, 241, 0.85);
	font-size: 13px;
	line-height: 1.5;
	margin: var(--ls-space-2) 0 0;
}

@media (min-width: 1024px) {
	.ls-about-clients__grid {
		grid-template-columns: repeat(4, 1fr);
	}

	.ls-about-clients__desc {
		max-height: 0;
		opacity: 0;
		overflow: hidden;
		transition: opacity var(--ls-transition-base), max-height var(--ls-transition-base);
	}

	.ls-about-clients__card:hover .ls-about-clients__desc,
	.ls-about-clients__card:focus-within .ls-about-clients__desc {
		max-height: 120px;
		opacity: 1;
	}

	.ls-about-clients__card:hover .ls-about-clients__media img,
	.ls-about-clients__card:focus-within .ls-about-clients__media img {
		transform: scale(1.04);
	}
}

/* ===== 12 Our Philosophy ===== */
.ls-about-philosophy {
	background: var(--ls-about-warm-white);
	/* Top uses the standard tier (not space-lg) so this section's gap after
	 * Who We Work With matches every other section boundary on the page
	 * (e.g. Transform -> More Than a Factory uses the same pairing) rather
	 * than reading as an oversized gap. Bottom keeps space-lg for the
	 * deliberately spacious lead-in to the Final CTA. */
	padding-top: var(--ls-about-space-md);
	padding-bottom: var(--ls-about-space-lg);
}

.ls-about-philosophy__inner {
	text-align: center;
}

.ls-about-philosophy__inner .ls-eyebrow {
	display: flex;
	justify-content: center;
}

.ls-about-philosophy__text {
	margin-inline: auto;
	max-width: 640px;
}

.ls-about-philosophy__text p {
	margin-bottom: var(--ls-space-3);
}

.ls-about-philosophy__statement {
	font-size: clamp(28px, 2.4vw + 18px, 48px);
	font-weight: var(--ls-font-weight-light);
	margin: var(--ls-space-8) 0 0;
}

/* ===== 13 Final CTA -- height matched to Indoor Furniture's own Final CTA
 * (.ls-indoor-cta in indoor-furniture.css: min-height 380/340/380/420px at
 * base/768/1024/1440, padding-block var(--ls-space-7), flex-centered
 * content) rather than this page's own larger space-lg rhythm. ===== */
.ls-about-cta {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 380px;
	padding-block: var(--ls-space-7);
	overflow: hidden;
}

@media (min-width: 768px) {
	.ls-about-cta {
		min-height: 340px;
	}
}

@media (min-width: 1024px) {
	.ls-about-cta {
		min-height: 380px;
	}
}

@media (min-width: 1440px) {
	.ls-about-cta {
		min-height: 420px;
	}
}

.ls-about-cta__media {
	position: absolute;
	inset: 0;
}

.ls-about-cta__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ls-about-cta__image--neutral {
	display: block;
	background: var(--ls-about-charcoal);
}

.ls-about-cta__overlay {
	position: absolute;
	inset: 0;
	background: rgba(24, 24, 24, 0.68);
}

.ls-about-cta__inner {
	position: relative;
	text-align: center;
	max-width: 760px;
	margin-inline: auto;
}

.ls-about-cta__heading {
	color: var(--ls-about-warm-white);
	font-size: 30px;
	margin: var(--ls-space-3) 0 var(--ls-space-4);
}

@media (min-width: 768px) {
	.ls-about-cta__heading {
		font-size: 38px;
	}
}

.ls-about-cta__text {
	color: rgba(247, 245, 241, 0.86);
	font-size: 15px;
	line-height: 1.5;
	max-width: 560px;
	margin: 0 0 6px;
	margin-inline: auto;
}

.ls-about-cta__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--ls-space-4);
	margin-top: var(--ls-space-5);
}

.ls-about-cta .ls-btn-secondary {
	color: var(--ls-about-warm-white);
	border-color: rgba(247, 245, 241, 0.6);
}

.ls-about-cta .ls-btn-secondary:hover,
.ls-about-cta .ls-btn-secondary:focus-visible {
	background: var(--ls-about-warm-white);
	color: var(--ls-about-charcoal);
}

/* ===== Mobile CTA tap targets (sitewide .ls-btn is already comfortably
 * sized; this only guarantees full-width, easy-to-tap buttons below the
 * tablet breakpoint on this page specifically). ===== */
@media (max-width: 639.98px) {
	.ls-about-hero__actions .ls-btn,
	.ls-about-cta__actions .ls-btn {
		width: 100%;
	}
}