/* About page ("O nama") — styling for the block content. Scoped to .about-page
   (baked into the page's blocks), so it's slug-independent and can't leak. */

.about-page > * + * {
	margin-top: var(--space-lg);
}

/* Intro — lead text + photo */
.about-intro {
	align-items: center;
}

.about-lead {
	font-family: var(--font-head);
	font-size: var(--font-size-lg);
	line-height: var(--line-height-head);
	color: var(--color-heading);
}

.about-image img {
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
	width: 100%;
	height: auto;
}

/* Callout — highlighted goal statement */
.about-callout {
	margin: 0;
	padding: var(--space-md);
	border-left: 4px solid var(--color-coral);
	border-radius: var(--radius);
	background: var(--color-bg);
	font-family: var(--font-head);
	font-size: var(--font-size-lg);
	line-height: var(--line-height-head);
	color: var(--color-heading);
}

/* Feature highlights — soft, playful, kindergarten-friendly cards: white card,
   pale icon badge, colour-accented title, and a hand-drawn spot illustration
   over a soft tinted blob. Colours adapted to our teal/coral palette. */
.about-features {
	gap: var(--space-md);
}

/* Padding and the illustration/blob widths are mobile-first here — the
   desktop padding-right (40%, reserved for the illustration) leaves under
   165px for the title+paragraph on a phone. Bumped back up at 480px,
   shrinking the illustration by the same proportion so it doesn't spill
   into the now-narrower reserved area. */
.about-feature {
	position: relative;
	overflow: hidden;
	min-height: 15rem;
	height: 100%;
	padding: var(--space-md);
	padding-right: 30%;
	border-radius: var(--radius-card);
	background: var(--color-white);
	box-shadow: var(--shadow-card);
	text-align: left;
}

/* soft tinted blob, bottom-right, behind the illustration */
.about-feature::before {
	content: "";
	position: absolute;
	right: -12%;
	bottom: -28%;
	width: 51%;
	height: 58%;
	border-radius: 50%;
	z-index: 0;
}

.about-feature--teal::before {
	background: color-mix(in srgb, var(--color-teal) 16%, white);
}

.about-feature--coral::before {
	background: color-mix(in srgb, var(--color-coral) 16%, white);
}

/* spot illustration, bottom-right */
.about-feature::after {
	content: "";
	position: absolute;
	right: var(--space-sm);
	bottom: var(--space-sm);
	width: 32%;
	height: 54%;
	background-repeat: no-repeat;
	background-position: bottom right;
	background-size: contain;
	z-index: 1;
}

.about-feature--teal::after {
	background-image: url(../images/about-care.svg?v=2);
}

.about-feature--coral::after {
	background-image: url(../images/about-learning.svg);
}

/* pale icon badge */
.about-feature__icon {
	position: relative;
	z-index: 2;
	display: block;
	width: 3.25rem;
	height: 3.25rem;
	margin-bottom: var(--space-sm);
	border-radius: 50%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 1.6rem;
}

.about-feature--teal .about-feature__icon {
	background-color: color-mix(in srgb, var(--color-teal) 16%, white);
	background-image: url(../images/about-icon-care.svg?v=2);
}

.about-feature--coral .about-feature__icon {
	background-color: color-mix(in srgb, var(--color-coral) 16%, white);
	background-image: url(../images/about-icon-learning.svg);
}

/* title + short colour underline */
.about-feature h3 {
	position: relative;
	z-index: 2;
	margin: 0 0 var(--space-sm);
	padding-bottom: var(--space-xs);
	color: var(--color-heading);
	font-size: var(--font-size-lg);
}

.about-feature h3::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 2.5rem;
	height: 3px;
	border-radius: 2px;
}

.about-feature--teal h3::after {
	background: var(--color-teal);
}

.about-feature--coral h3::after {
	background: var(--color-coral);
}

.about-feature p {
	position: relative;
	z-index: 2;
	margin: 0;
	color: var(--color-text);
	font-size: var(--font-size-sm);
}

@media (min-width: 480px) {
	.about-feature {
		padding: var(--space-lg);
		padding-right: 40%;
	}

	.about-feature::before {
		width: 68%;
		height: 78%;
	}

	.about-feature::after {
		width: 42%;
		height: 72%;
	}
}