/*
 * Sawatech Woo - Template: Amoonis Boutique About Page Content
 */

.amb-about-content {
	--abc-bg: var(--color-bg, #fdfcfb);
	--abc-panel: var(--color-bg-secondary, #f6eee7);
	--abc-ink: var(--color-text, #1a0d14);
	--abc-muted: var(--color-text-muted, #604b58);
	--abc-line: var(--color-border, rgba(26, 13, 20, .11));
	--abc-primary: var(--color-primary, #f083b4);
	--abc-deep: var(--color-primary-hover, #b83b70);
	--abc-gold: var(--color-secondary, #c9a86a);
	--abc-serif: var(--font-heading, 'Cormorant Garamond', Georgia, 'Times New Roman', serif);
	--abc-sans: var(--font-body, Inter, system-ui, -apple-system, 'Segoe UI', sans-serif);
	--abc-radius: min(var(--radius-corner, 8px), 8px);

	padding-block: clamp(62px, 9vw, 112px);
	padding-inline: 0;
	background: var(--abc-bg);
	color: var(--abc-ink);
	font-family: var(--abc-sans);
	box-sizing: border-box;
}

.amb-about-content__inner {
	inline-size: 100%;
	max-inline-size: var(--stc-template-container-max, 1320px);
	margin-block: 0;
	margin-inline: auto;
	display: grid;
	gap: clamp(34px, 5vw, 64px);
}

.amb-about-content__header {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(280px, 1fr);
	grid-template-areas:
		"intro heading"
		"copy heading";
	gap: clamp(16px, 2.4vw, 28px) clamp(24px, 5vw, 74px);
	align-items: center;
}

.amb-about-content__eyebrow {
	grid-area: intro;
	justify-self: start;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: var(--abc-deep);
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .24em;
	text-transform: uppercase;
}

.amb-about-content__eyebrow::before {
	content: "";
	inline-size: 38px;
	block-size: 1px;
	background: currentColor;
}

.amb-about-content__heading {
	grid-area: heading;
	margin-block: 0;
	margin-inline: 0;
	font-family: var(--abc-serif);
	font-size: clamp(35px, 5.6vw, 68px);
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0;
}

.amb-about-content__heading em {
	font-style: italic;
	font-weight: 500;
	color: var(--abc-deep);
}

html[dir="rtl"] .amb-about-content__heading em {
	font-style: unset;
}

.amb-about-content__header p {
	grid-area: copy;
	margin-block: 0;
	margin-inline: 0;
	color: var(--abc-muted);
	font-size: clamp(16px, 1.45vw, 18px);
	line-height: 1.72;
}

.amb-about-content__highlights {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	margin-block: 0;
	margin-inline: 0;
	padding-block: 1px;
	padding-inline: 1px;
	list-style: none;
	background: var(--abc-line);
	border-radius: var(--abc-radius);
	overflow: hidden;
}

.amb-about-content__highlights li {
	display: grid;
	gap: 10px;
	padding-block: clamp(20px, 3vw, 30px);
	padding-inline: clamp(20px, 3vw, 30px);
	background: var(--abc-panel);
}

.amb-about-content__highlights strong,
.amb-about-content__values h3,
.amb-about-content__process h3 {
	font-family: var(--abc-serif);
	font-size: clamp(22px, 2.3vw, 29px);
	font-weight: 500;
	line-height: 1.12;
	color: var(--abc-ink);
}

.amb-about-content__highlights span,
.amb-about-content__values p,
.amb-about-content__process p,
.amb-about-content__body {
	color: var(--abc-muted);
	font-size: .98rem;
	line-height: 1.72;
}

.amb-about-content__story {
	display: grid;
	grid-template-columns: minmax(300px, .78fr) minmax(0, 1fr);
	gap: clamp(26px, 5vw, 66px);
	align-items: center;
}

.amb-about-content__image {
	margin-block: 0;
	margin-inline: 0;
	aspect-ratio: 5 / 6;
	border-radius: var(--abc-radius);
	overflow: hidden;
	background: #eee8e2;
	box-shadow: 0 28px 64px -42px rgba(78, 38, 55, .58);
}

.amb-about-content__image img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.amb-about-content__story-copy {
	min-inline-size: 0;
}

.amb-about-content__story-copy h3 {
	margin-block: 0 18px;
	margin-inline: 0;
	font-family: var(--abc-serif);
	font-size: clamp(31px, 4vw, 52px);
	font-weight: 400;
	line-height: 1.05;
	color: var(--abc-ink);
}

.amb-about-content__body p {
	margin-block: 0 1em;
	margin-inline: 0;
}

.amb-about-content__quote {
	position: relative;
	margin-block: 28px 0;
	margin-inline: 0;
	padding-block: 24px 0;
	padding-inline: 26px 0;
	border-block-start: 1px solid var(--abc-line);
	border-inline-start: 3px solid var(--abc-gold);
}

.amb-about-content__quote p {
	margin-block: 0;
	margin-inline: 0;
	font-family: var(--abc-serif);
	font-size: clamp(24px, 3vw, 36px);
	font-style: italic;
	font-weight: 400;
	line-height: 1.16;
	color: var(--abc-deep);
}

html[dir="rtl"] .amb-about-content__quote p {
	font-style: normal;
}

.amb-about-content__quote cite {
	display: block;
	margin-block-start: 12px;
	color: var(--abc-muted);
	font-size: .78rem;
	font-style: normal;
	font-weight: 800;
	letter-spacing: .18em;
	text-transform: uppercase;
}

.amb-about-content__values {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(14px, 2.2vw, 22px);
}

.amb-about-content__values article {
	padding-block: clamp(20px, 3vw, 30px);
	padding-inline: clamp(20px, 3vw, 30px);
	border: 1px solid var(--abc-line);
	border-radius: var(--abc-radius);
	background: rgba(255, 255, 255, .58);
}

.amb-about-content__values h3,
.amb-about-content__process h3 {
	margin-block: 0;
	margin-inline: 0;
}

.amb-about-content__values p,
.amb-about-content__process p {
	margin-block: 12px 0;
	margin-inline: 0;
}

.amb-about-content__process {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	padding-block: 1px;
	padding-inline: 1px;
	background: var(--abc-line);
	border-radius: var(--abc-radius);
	overflow: hidden;
}

.amb-about-content__process article {
	padding-block: clamp(22px, 3vw, 34px);
	padding-inline: clamp(22px, 3vw, 34px);
	background: linear-gradient(180deg, #fff, var(--abc-panel));
}

.amb-about-content__process span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 44px;
	block-size: 44px;
	margin-block-end: 18px;
	border-radius: 50%;
	background: var(--abc-deep);
	color: #fff;
	font-family: var(--abc-serif);
	font-size: 18px;
	font-style: italic;
}

@media (max-width: 900px) {
	.amb-about-content__header,
	.amb-about-content__story {
		grid-template-columns: 1fr;
	}

	.amb-about-content__header {
		grid-template-areas:
			"intro"
			"copy"
			"heading";
		align-items: start;
	}

	.amb-about-content__highlights,
	.amb-about-content__values,
	.amb-about-content__process {
		grid-template-columns: 1fr;
	}

	.amb-about-content__image {
		max-inline-size: 560px;
		aspect-ratio: 4 / 3;
	}
}

@media (max-width: 560px) {
	.amb-about-content {
		padding-block: 48px;
	}

	.amb-about-content__heading {
		font-size: clamp(34px, 12vw, 50px);
	}

	.amb-about-content__quote {
		padding-inline-start: 18px;
	}
}