/*
 * SITAARA Purpose (Vision & Mission) — premium editorial section.
 * Everything is scoped under .sitaara-purpose with its own CSS custom
 * properties for the palette; no generic selectors (.heading/.container/
 * .image/.title etc.) and no reuse of the theme's own design tokens or
 * classes, so this widget can never collide with theme or other-widget
 * styles regardless of what page it's dropped on.
 */

.sitaara-purpose {
	--sp-ivory: #FAF5ED;
	--sp-burgundy: #8E1230;
	--sp-plum: #321528;
	--sp-text: #181515;
	--sp-gold: #B99A69;
	--sp-sand: #E8D9C7;
	--sp-muted: #5A5250;

	position: relative;
	box-sizing: border-box;
	background-color: var(--sp-ivory);
	color: var(--sp-text);
	font-family: 'Manrope', sans-serif;
	padding: 100px 24px;
	overflow: hidden;
}

.sitaara-purpose *,
.sitaara-purpose *::before,
.sitaara-purpose *::after {
	box-sizing: border-box;
}

.sitaara-purpose__inner {
	position: relative;
	max-width: 1320px;
	margin: 0 auto;
}

/* ---- Header ---------------------------------------------------------- */

.sitaara-purpose__header {
	max-width: 720px;
	margin: 0 auto 72px;
	text-align: center;
}

.sitaara-purpose__eyebrow {
	margin: 0 0 18px;
	font-family: 'Manrope', sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--sp-gold);
}

.sitaara-purpose__heading {
	margin: 0 0 24px;
	font-family: 'Cormorant Garamond', serif;
	font-weight: 500;
	font-size: 34px;
	line-height: 1.25;
	color: var(--sp-burgundy);
}

@media (min-width: 600px) {
	.sitaara-purpose__heading {
		font-size: 44px;
	}
}

@media (min-width: 992px) {
	.sitaara-purpose__heading {
		font-size: 52px;
	}
}

.sitaara-purpose__intro {
	margin: 0 auto;
	max-width: 640px;
	font-size: 16px;
	line-height: 1.8;
	color: var(--sp-text);
}

/* ---- Editorial 3-column grid ------------------------------------------ */

.sitaara-purpose__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 48px;
	align-items: start;
}

/* Text-only composition: Vision / divider / Mission as two columns with
 * the divider between them, no image column. */
@media (min-width: 768px) {
	.sitaara-purpose__grid--no-image {
		grid-template-columns: 1fr auto 1fr;
		align-items: start;
		gap: 0 56px;
	}
}

.sitaara-purpose__col {
	min-width: 0;
}

.sitaara-purpose__col-icon {
	display: block;
	width: 28px;
	height: 28px;
	margin-bottom: 20px;
	color: var(--sp-gold);
}

/* ---- Vision ------------------------------------------------------------ */

.sitaara-purpose__vision-title {
	margin: 0 0 20px;
	font-family: 'Manrope', sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sp-burgundy);
}

.sitaara-purpose__vision-text {
	margin: 0;
	font-family: 'Cormorant Garamond', serif;
	font-weight: 500;
	font-size: 24px;
	line-height: 1.5;
	color: var(--sp-plum);
}

@media (min-width: 992px) {
	.sitaara-purpose__vision-text {
		font-size: 26px;
	}
}

/* ---- Divider — vertical on desktop, horizontal below ------------------- */

.sitaara-purpose__divider {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
}

/* Horizontal divider below 768px, matching .sitaara-purpose__grid--no-image's
 * own single-column breakpoint (Vision/Mission stack vertically there, so
 * the divider between them needs to run horizontally too). */
@media (max-width: 767px) {
	.sitaara-purpose__divider {
		flex-direction: row;
		width: 100%;
	}

	.sitaara-purpose__divider-line {
		flex: 1 1 auto;
		height: 1px;
	}
}

/* Vertical divider from 768px up, matching the grid's own 3-column
 * breakpoint — align-self: stretch spans the divider to the row's full
 * height (set by whichever of Vision/Mission is taller), independent of
 * .sitaara-purpose__grid--no-image's align-items: start, which keeps
 * Vision/Mission themselves top-aligned instead of vertically centered. */
@media (min-width: 768px) {
	.sitaara-purpose__divider {
		flex-direction: column;
		align-self: stretch;
		height: 100%;
		min-height: 220px;
		padding: 0 8px;
	}

	.sitaara-purpose__divider-line {
		flex: 1 1 auto;
		width: 1px;
	}
}

.sitaara-purpose__divider-line {
	background-color: var(--sp-sand);
}

.sitaara-purpose__divider-ornament {
	flex-shrink: 0;
	width: 10px;
	height: 10px;
	background-color: var(--sp-gold);
	transform: rotate(45deg);
}

/* ---- Mission ------------------------------------------------------------ */

.sitaara-purpose__mission-title {
	margin: 0 0 16px;
	font-family: 'Manrope', sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sp-burgundy);
}

.sitaara-purpose__mission-text {
	margin: 0 0 36px;
	font-family: 'Cormorant Garamond', serif;
	font-weight: 500;
	font-size: 22px;
	line-height: 1.5;
	color: var(--sp-plum);
}

.sitaara-purpose__mission-items {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sitaara-purpose__mission-item {
	display: flex;
	gap: 16px;
	list-style: none;
}

.sitaara-purpose__mission-item-icon {
	flex-shrink: 0;
	display: block;
	width: 22px;
	height: 22px;
	margin-top: 2px;
	color: var(--sp-gold);
}

.sitaara-purpose__mission-item-body {
	min-width: 0;
}

.sitaara-purpose__mission-item-title {
	margin: 0 0 4px;
	font-family: 'Manrope', sans-serif;
	font-size: 16px;
	font-weight: 700;
	color: var(--sp-text);
}

.sitaara-purpose__mission-item-desc {
	margin: 0;
	font-size: 14px;
	line-height: 1.65;
	color: var(--sp-muted);
}

/* ---- Quote --------------------------------------------------------------- */

.sitaara-purpose__quote {
	margin: 80px 0 0;
	padding: 0;
	border: none;
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.sitaara-purpose__quote-mark {
	display: block;
	margin-bottom: 8px;
	font-family: 'Cormorant Garamond', serif;
	font-size: 56px;
	line-height: 1;
	color: var(--sp-gold);
}

.sitaara-purpose__quote-text {
	margin: 0 0 20px;
	font-family: 'Cormorant Garamond', serif;
	font-style: italic;
	font-weight: 500;
	font-size: 26px;
	line-height: 1.5;
	color: var(--sp-burgundy);
}

@media (min-width: 768px) {
	.sitaara-purpose__quote-text {
		font-size: 30px;
	}
}

.sitaara-purpose__quote-attribution {
	display: block;
	font-style: normal;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sp-gold);
}

/* ---- Decorative motifs (fine linework, mandala/floral/diamond) -------------
 * Purely CSS/SVG mask decoration, no interactivity, no layout
 * participation (position: absolute, aria-hidden already set in markup)
 * — never intrudes on content per the brief's "must not interfere with
 * content" requirement.
 */

.sitaara-purpose__motif {
	position: absolute;
	z-index: 0;
	pointer-events: none;
	opacity: 0.35;
	background-color: var(--sp-gold);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.sitaara-purpose__motif--top {
	top: -40px;
	right: -40px;
	width: 180px;
	height: 180px;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23000' stroke-width='0.6'%3E%3Ccircle cx='50' cy='50' r='46'/%3E%3Ccircle cx='50' cy='50' r='34'/%3E%3Ccircle cx='50' cy='50' r='22'/%3E%3Cpath d='M50 4v92M4 50h92M17 17l66 66M83 17 17 83'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23000' stroke-width='0.6'%3E%3Ccircle cx='50' cy='50' r='46'/%3E%3Ccircle cx='50' cy='50' r='34'/%3E%3Ccircle cx='50' cy='50' r='22'/%3E%3Cpath d='M50 4v92M4 50h92M17 17l66 66M83 17 17 83'/%3E%3C/svg%3E");
}

/* ---- Icon set (mask-based, currentColor-driven) ---------------------------
 * Same technique as the theme's own .craftis-icon system, kept entirely
 * independent here under this widget's own class names.
 */

[class*='sitaara-purpose__icon--'],
.sitaara-purpose__col-icon,
.sitaara-purpose__mission-item-icon {
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.sitaara-purpose__icon--thread {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M4 12c2-3 6-3 8 0s6 3 8 0M4 8c2-3 6-3 8 0s6 3 8 0M4 16c2-3 6-3 8 0s6 3 8 0'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M4 12c2-3 6-3 8 0s6 3 8 0M4 8c2-3 6-3 8 0s6 3 8 0M4 16c2-3 6-3 8 0s6 3 8 0'/%3E%3C/svg%3E");
}

.sitaara-purpose__icon--hands {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 13V5a1.5 1.5 0 0 1 3 0v6M14 12V4a1.5 1.5 0 0 1 3 0v9M17 10.5a1.5 1.5 0 0 1 3 0V14M8 12V6a1.5 1.5 0 0 0-3 0v9c0 3.5 2.5 6.5 7 6.5s6-2 6-5v-4'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 13V5a1.5 1.5 0 0 1 3 0v6M14 12V4a1.5 1.5 0 0 1 3 0v9M17 10.5a1.5 1.5 0 0 1 3 0V14M8 12V6a1.5 1.5 0 0 0-3 0v9c0 3.5 2.5 6.5 7 6.5s6-2 6-5v-4'/%3E%3C/svg%3E");
}

.sitaara-purpose__icon--needle {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 5 5 19M19 5a2 2 0 1 1-4 0 2 2 0 0 1 4 0ZM4 20l2-5 3 3-5 2Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 5 5 19M19 5a2 2 0 1 1-4 0 2 2 0 0 1 4 0ZM4 20l2-5 3 3-5 2Z'/%3E%3C/svg%3E");
}

.sitaara-purpose__icon--link {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 17H7a5 5 0 0 1 0-10h2M15 7h2a5 5 0 0 1 0 10h-2M8 12h8'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 17H7a5 5 0 0 1 0-10h2M15 7h2a5 5 0 0 1 0 10h-2M8 12h8'/%3E%3C/svg%3E");
}

.sitaara-purpose__icon--diamond {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12l4 6-10 12L2 9Z'/%3E%3Cpath d='M2 9h20M9 3l1 6-4 2M15 3l-1 6 4 2M12 9v12'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12l4 6-10 12L2 9Z'/%3E%3Cpath d='M2 9h20M9 3l1 6-4 2M15 3l-1 6 4 2M12 9v12'/%3E%3C/svg%3E");
}

.sitaara-purpose__icon--leaf {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 4C10 4 4 10 4 20c10 0 16-6 16-16Z'/%3E%3Cpath d='M4 20 20 4'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 4C10 4 4 10 4 20c10 0 16-6 16-16Z'/%3E%3Cpath d='M4 20 20 4'/%3E%3C/svg%3E");
}

/* ---- Scroll-reveal animation (JS toggles .is-visible; see purpose.js) ---- */

.sitaara-purpose__reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 700ms ease, transform 700ms ease;
}

.sitaara-purpose__reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.sitaara-purpose__reveal-item {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 500ms ease, transform 500ms ease;
	transition-delay: calc(var(--reveal-index, 0) * 90ms);
}

.sitaara-purpose__reveal-item.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* No-JS / JS-not-yet-run fallback: content must never depend exclusively
 * on the animation to become visible (accessibility requirement) — if
 * purpose.js hasn't run (e.g. blocked, or the Elementor editor iframe
 * timing), everything is still shown, just without the entrance motion. */
.sitaara-purpose:not(.sitaara-purpose--js) .sitaara-purpose__reveal,
.sitaara-purpose:not(.sitaara-purpose--js) .sitaara-purpose__reveal-item {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.sitaara-purpose__reveal,
	.sitaara-purpose__reveal-item {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ---- Mobile: strict vertical stack, never overflow ------------------------ */

@media (max-width: 767px) {
	.sitaara-purpose {
		padding: 64px 20px;
	}

	.sitaara-purpose__header {
		margin-bottom: 48px;
	}

	.sitaara-purpose__quote {
		margin-top: 56px;
	}
}