/* =====================================================================
   Yasara — ABOUT page (template-about.php).
   ===================================================================== */
/* ============================================================
   ABOUT PAGE — designed for v1 palette (cream + turquoise)
   Apply via Page Attributes → Template → "About — Yasara"
   ============================================================ */
.about-page { color: var(--color-text); }
.about-page .eyebrow { color: var(--color-brand-dark); }

/* SECTION RHYTHM ------------------------------------------ */
.about-section,
.about-art,
.about-passion,
.about-vision,
.about-commit,
.legal-hero,
.legal-body {
	padding-top: clamp(1.5rem, 3vw, 2.5rem);
	padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

/* SECTION COMMON ------------------------------------------ */
.about-section-head { text-align: left; margin-bottom: 1.25rem; max-width: 720px; }
.about-section-head-center { text-align: center; margin-inline: auto; }
.about-section-head h1,
.about-section-head h2 {
	font-family: var(--font-display); font-weight: 400;
	font-size: clamp(2rem, 4vw, 3.2rem);
	line-height: 1.1; letter-spacing: -.015em;
	color: var(--color-ink); margin: 0;
}
.about-section-sub { color: var(--color-muted); margin-top: 1rem; font-size: 1.05rem; }
.about-fallback { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, var(--color-mint), var(--color-rose)); }

/* 01. OUR STORY / OWNERSHIP — single column -------------- */
.about-story { background: var(--color-cream); }
.about-story p { font-size: 1.05rem; line-height: 1.85; color: var(--color-text); margin: 0 0 1.25rem; }
.about-story .about-lead-p {
	font-family: var(--font-display); font-weight: 400; font-style: italic;
	font-size: clamp(1.25rem, 2vw, 1.6rem);
	line-height: 1.45; color: var(--color-ink);
	margin-bottom: 2rem;
}
.about-owner {
	background: var(--color-surface); border: 1px solid var(--color-line);
	border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
	padding: clamp(1.5rem, 3vw, 2.25rem);
}
.about-owner h3 {
	font-family: var(--font-display); font-weight: 500;
	font-size: clamp(1.4rem, 2.2vw, 1.8rem);
	line-height: 1.2; color: var(--color-ink); margin: 0 0 .9rem;
}
.about-owner .about-owner-line {
	font-weight: 600; color: var(--color-ink);
	padding-left: 1rem; border-left: 3px solid var(--color-brand);
}
.about-owner p:last-child { margin-bottom: 0; }

/* 02. ART OF PERFUMERY — split --------------------------- */
.about-art { background: var(--color-bg); }
.about-split {
	display: grid; grid-template-columns: 1.05fr 1fr;
	gap: clamp(2.5rem, 6vw, 5rem); align-items: center;
}
.about-split-text h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.08; margin: .6rem 0 1.5rem; }
.about-split-text p { font-size: 1.05rem; line-height: 1.85; color: var(--color-text); margin: 0 0 1.25rem; max-width: 50ch; }
.about-split-figure {
	margin: 0; position: relative;
	aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-lg);
	background: var(--color-mint); box-shadow: var(--shadow-lg);
}
.about-split-figure img { width: 100%; height: 100%; object-fit: cover; }
.about-split-figure figcaption {
	position: absolute; left: 16px; bottom: 16px;
	background: rgba(255,255,255,.94); backdrop-filter: blur(8px);
	padding: 8px 14px; border-radius: 999px;
	font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
	font-weight: 600; color: var(--color-ink);
}

/* 03. WHERE PASSION — single column ---------------------- */
.about-passion { background: var(--color-cream); }
.about-narrow { max-width: 780px; margin-left: auto; margin-right: auto; }
.about-passion p { font-size: 1.05rem; line-height: 1.85; color: var(--color-text); margin: 0 0 1.5rem; }
.about-passion .about-lead-p {
	font-family: var(--font-display); font-weight: 400; font-style: italic;
	font-size: clamp(1.25rem, 2vw, 1.6rem);
	line-height: 1.45; color: var(--color-ink);
	margin-bottom: 2rem;
}
.about-cta-card {
	margin-top: 2.5rem;
	background: var(--color-surface); border-radius: var(--radius-lg);
	padding: clamp(1.5rem, 3vw, 2rem) clamp(1.5rem, 3vw, 2.25rem);
	box-shadow: var(--shadow-sm); display: flex;
	align-items: center; justify-content: space-between;
	gap: 1.5rem; flex-wrap: wrap;
	border: 1px solid var(--color-line);
}
.about-cta-card > div { flex: 1; min-width: 260px; }
.about-cta-card h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.5rem; margin: 0 0 .25rem; line-height: 1.2; }
.about-cta-card p { font-size: .95rem; color: var(--color-muted); margin: 0; }

/* 04. VISION ---------------------------------------------- */
.about-vision { background: var(--color-bg); }
.about-vision-copy { max-width: 780px; margin: 0 auto 3.5rem; text-align: center; }
.about-vision-copy p { font-size: 1.05rem; line-height: 1.85; color: var(--color-text); margin: 0 0 1.25rem; }

.about-aspects {
	background: var(--color-surface);
	border-radius: var(--radius-xl);
	padding: clamp(2rem, 5vw, 3.5rem);
	box-shadow: var(--shadow-sm); border: 1px solid var(--color-line);
}
.about-aspects-h {
	text-align: center; font-family: var(--font-display);
	font-weight: 500; font-size: clamp(1.4rem, 2.4vw, 1.8rem);
	letter-spacing: -.01em; margin: 0 0 2rem;
}
.about-aspects-grid {
	list-style: none; padding: 0; margin: 0;
	display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.25rem;
}
.about-aspects-grid li {
	padding: 1.25rem 1.1rem;
	background: var(--color-bg);
	border-radius: var(--radius-md);
	display: flex; flex-direction: column; gap: .75rem;
	border: 1px solid var(--color-line);
	transition: transform .3s var(--ease), background .3s var(--ease);
}
.about-aspects-grid li:hover { transform: translateY(-3px); background: var(--color-mint); }
.about-aspect-n {
	font-family: var(--font-display); font-weight: 400;
	font-size: 1.5rem; color: var(--color-brand-dark); line-height: 1;
}
.about-aspects-grid p { margin: 0; font-size: .92rem; line-height: 1.5; color: var(--color-text); }

/* 05. COMMITMENTS ---------------------------------------- */
.about-commit { background: var(--color-cream); }
.about-commit-grid {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
}
.about-commit-card {
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	padding: 1.75rem 1.5rem;
	box-shadow: var(--shadow-sm);
	border: 1px solid var(--color-line);
	transition: transform .3s var(--ease), box-shadow .3s var(--ease);
	display: flex; flex-direction: column; gap: .5rem;
}
.about-commit-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.about-commit-icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; border-radius: 12px;
	background: var(--color-mint); color: var(--color-brand-dark);
	margin-bottom: .5rem;
}
.about-commit-card h3 {
	font-family: var(--font-display); font-weight: 500;
	font-size: 1.25rem; letter-spacing: -.01em;
	margin: 0; line-height: 1.2;
}
.about-commit-card p {
	font-size: .92rem; line-height: 1.6;
	color: var(--color-muted); margin: 0;
}
.about-commit-outro {
	max-width: 720px; margin: 3rem auto 0; text-align: center;
	color: var(--color-muted); font-size: 1.02rem; line-height: 1.7;
}
.about-commit-outro em {
	font-family: var(--font-display); font-style: italic;
	font-size: 1.15rem; color: var(--color-ink);
}

/* CLOSER -------------------------------------------------- */
.about-closer {
	padding: clamp(4rem, 8vw, 6rem) 0;
	background: linear-gradient(135deg, var(--color-ink), #2a2520);
	color: #fff; text-align: center; position: relative; overflow: hidden;
}
.about-closer::before {
	content: ""; position: absolute; inset: 0;
	background:
		radial-gradient(60% 80% at 0% 0%, rgba(22,183,204,.25), transparent 60%),
		radial-gradient(60% 80% at 100% 100%, rgba(255,177,153,.18), transparent 60%);
	pointer-events: none;
}
.about-closer-inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; }
.about-closer h2 {
	font-family: var(--font-display); font-weight: 400;
	font-size: clamp(2rem, 4.4vw, 3.2rem);
	color: #fff; line-height: 1.1; margin: 0 0 .75rem;
}
.about-closer p { color: rgba(255,255,255,.78); font-size: 1.05rem; margin: 0 0 1.75rem; }
.about-closer .btn-primary { background: var(--color-brand); color: #fff; }
.about-closer .btn-primary:hover { background: #fff; color: var(--color-ink); }

/* RESPONSIVE --------------------------------------------- */
@media (max-width: 960px) {
	.about-split { grid-template-columns: 1fr; gap: 2.5rem; }
	.about-split-figure { order: -1; max-width: 520px; margin-inline: auto; }
	.about-aspects-grid { grid-template-columns: repeat(2, 1fr); }
	.about-commit-grid { grid-template-columns: repeat(2, 1fr); }
	.about-cta-card { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 520px) {
	.about-aspects-grid { grid-template-columns: 1fr; }
	.about-commit-grid { grid-template-columns: 1fr; }
}


@media (max-width: 600px) {
	.about-page { padding-left: 20px; padding-right: 20px; }
	.about-page .container { padding-left: 0; padding-right: 0; }
	.about-aspects-grid { grid-template-columns: 1fr; }
	.about-section { padding: 32px 0; }
}