/**
 * About page sections (patterns/about/).
 *
 * Same direction as the home page; tokens come from home.css and the
 * heading block from portfolio.css.
 */

.a-hero__img {
	margin-top: clamp(2.5rem, 5vw, 4rem) !important;
}

.a-hero__img img {
	aspect-ratio: 3 / 1;
	object-position: 50% 40%;
}

/* Story: words left, a picture from the workshop right. */

.a-story {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--gap);
	row-gap: 2rem;
	align-items: center;
}

.a-story__title {
	grid-column: 1 / 7;
	grid-row: 1;
	align-self: end;
	font-size: var(--s-head);
	line-height: 1.02;
}

.a-story__text {
	grid-column: 1 / 6;
	grid-row: 2;
	align-self: start;
}

.a-story__text p + p {
	margin-top: 1.1rem !important;
}

.a-story__img {
	grid-column: 8 / 13;
	grid-row: 1 / 3;
}

.a-story__img img {
	aspect-ratio: 4 / 5;
}

/* Vision and mission: two quiet statements on sand. */

.a-vision {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2.5rem clamp(2rem, 6vw, 6rem);
	background: var(--sand);
}

.a-vision__title {
	color: var(--soft) !important;
	font-size: var(--s-body);
	font-weight: 400;
	letter-spacing: 0;
}

.a-vision__text {
	max-width: 30ch;
	margin-top: 0.75rem !important;
	font-size: var(--s-lead);
	font-weight: 300;
	line-height: 1.3;
}

/* Philosophy: three principles with a room each. */

.a-ideas__title {
	font-size: var(--s-head);
	line-height: 1;
}

.a-ideas__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2.5rem var(--gap);
	margin-top: clamp(2rem, 4vw, 3rem) !important;
}

.a-idea__img img {
	aspect-ratio: 4 / 5;
}

.a-idea__title {
	margin-top: 1.1rem !important;
	font-size: var(--s-lead);
	font-weight: 400;
	line-height: 1.15;
}

.a-idea__text {
	max-width: 32ch;
	margin-top: 0.5rem !important;
	line-height: 1.5;
}

/* Team: hidden until the first member is published. */

.a-team:not(:has(.a-team__grid > li)) {
	display: none;
}

.a-team {
	padding-top: 0;
}

.a-team__title {
	font-size: var(--s-head);
	line-height: 1;
}

.a-team__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 2.5rem var(--gap);
	margin: clamp(2rem, 4vw, 3rem) 0 0;
	padding: 0;
	list-style: none;
}

.a-person__photo {
	margin: 0 !important;
	overflow: hidden;
	border-radius: var(--r);
}

.a-person__photo img {
	width: 100%;
	height: auto !important;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--r);
}

.a-person__name {
	margin-top: 0.9rem !important;
	font-size: var(--s-body);
	font-weight: 500;
	letter-spacing: 0;
}

.a-person__role {
	margin-top: 0.2rem !important;
	color: var(--soft);
	font-size: 1rem;
}

/* Recognition (optional section). */

.a-recognition {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--gap);
	row-gap: 2rem;
	align-items: start;
}

.a-recognition__title {
	grid-column: 1 / 5;
	font-size: var(--s-head);
	line-height: 1;
}

.a-recognition__cols {
	grid-column: 5 / 13;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2rem var(--gap);
}

.a-recognition__cols h3 {
	font-size: var(--s-body);
	font-weight: 500;
	letter-spacing: 0;
}

.a-recognition__cols ul {
	margin-top: 0.75rem !important;
	color: var(--soft);
	font-size: 1rem;
	line-height: 1.5;
}

@media (max-width: 1024px) {
	.a-team__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 781px) {
	.a-hero__img img {
		aspect-ratio: 4 / 3;
	}

	.a-story,
	.a-recognition {
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}

	.a-vision,
	.a-ideas__list,
	.a-recognition__cols {
		grid-template-columns: 1fr;
	}

	.a-team__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}