/*
 * About page History / Mission / Vision (about-page-template.php, section 4).
 *
 * From lg up: one side photo shared by all tabs, with a column of solid tab
 * tiles overlapping its right edge, and the active tab's title, text and
 * second photo in the column beside it. Below lg the tiles run across the
 * foot of the photo and the copy follows underneath. Plain CSS: the theme
 * ships without node_modules, so Tailwind classes missing from the compiled
 * build would not render.
 */

.about-story {
	display: grid;
	gap: 3rem;
}

/* From lg up both columns stretch to the taller one, so the side photo runs
   down to the foot of the copy column's photo. */
@media (min-width: 1024px) {
	.about-story {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
		align-items: stretch;
		gap: 5.5rem;
	}
}

/* ----- Side photo + tab tiles ----- */

.about-story__stage {
	position: relative;
}

/* From lg up the photo fills the stage's height and leaves room on its right
   for the tiles to overhang. */
@media (min-width: 1024px) {
	.about-story__stage {
		display: flex;
		flex-direction: column;
		padding-right: 18%;
	}
}

.about-story__media {
	position: relative;
	margin: 0;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	border-radius: 0.375rem;
	background: #E2E8F0;
}

@media (min-width: 1024px) {
	.about-story__media {
		flex: 1 1 auto;
		min-height: 26rem;
		aspect-ratio: auto;
	}
}

.about-story__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.about-story__placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #94A3B8;
	font-size: 3rem;
}

/* Below lg: a row of three across the foot of the photo, half on it. */
.about-story__rail {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.75rem;
	margin: -2.75rem 0.75rem 0;
}

/* From lg up: a column pinned to the stage's right edge, overlapping the
   photo, the three tiles sharing its height. */
@media (min-width: 1024px) {
	.about-story__rail {
		position: absolute;
		top: 7%;
		right: 0;
		bottom: 7%;
		width: 36%;
		grid-template-columns: 1fr;
		grid-template-rows: repeat(3, minmax(0, 1fr));
		gap: 1.5rem;
		margin: 0;
	}
}

.about-story__tab {
	display: flex;
	min-height: 5.5rem;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	padding: 0.9rem 0.5rem;
	border: 0;
	border-radius: 0.375rem;
	background: #0F172A;
	box-shadow: 0 16px 36px -18px rgb(15 23 42 / 0.6);
	color: #FFFFFF;
	font-size: 0.85rem;
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
	cursor: pointer;
	transition: background-color .25s ease, box-shadow .25s ease;
}

@media (min-width: 1024px) {
	.about-story__tab {
		min-height: 0;
		gap: 0.7rem;
		padding: 0.75rem 0.5rem;
		font-size: 1rem;
	}
}

@media (min-width: 1280px) {
	.about-story__tab {
		gap: 0.85rem;
		font-size: 1.1rem;
	}
}

.about-story__tab .material-symbols-outlined {
	font-size: 1.75rem;
	font-weight: 300;
}

@media (min-width: 1024px) {
	.about-story__tab .material-symbols-outlined {
		font-size: 2.25rem;
	}
}

@media (min-width: 1280px) {
	.about-story__tab .material-symbols-outlined {
		font-size: 2.6rem;
	}
}

.about-story__tab:hover {
	background: #1E293B;
}

.about-story__tab:focus-visible {
	outline: 2px solid #06B6D4;
	outline-offset: 3px;
}

.about-story__tab.is-active {
	background: #4F46E5;
	box-shadow: 0 18px 36px -14px rgb(79 70 229 / 0.65);
}

/* ----- Copy ----- */

.about-story__pane.hidden {
	display: none;
}

/* Runs each time a pane loses .hidden, so every tab switch fades in. */
.about-story__pane:not(.hidden) {
	animation: about-story-in .5s ease both;
}

/* From lg up the panes stack in one cell, hidden ones kept in the layout but
   invisible, so the column is as tall as the longest tab and the side photo
   keeps one height whichever tab is open. Each pane's photo grows to the
   foot of that cell, so its bottom always lines up with the side photo's. */
@media (min-width: 1024px) {
	.about-story__panes {
		display: grid;
	}

	.about-story__pane,
	.about-story__pane.hidden {
		display: flex;
		grid-area: 1 / 1;
		flex-direction: column;
	}

	.about-story__pane.hidden {
		visibility: hidden;
	}
}

@keyframes about-story-in {
	from {
		opacity: 0;
		transform: translateY(14px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.about-story__title {
	margin: 0;
	color: #0F172A;
	font-size: 1.85rem;
	font-weight: 600;
	line-height: 1.2;
	text-wrap: balance;
}

@media (min-width: 768px) {
	.about-story__title {
		font-size: 2.25rem;
	}
}

.about-story__desc {
	margin: 1.25rem 0 0;
	color: #64748B;
	font-size: 0.975rem;
	line-height: 1.8;
	text-wrap: pretty;
}

.about-story__photo {
	position: relative;
	margin: 1.75rem 0 0;
	overflow: hidden;
	aspect-ratio: 3 / 2;
	border-radius: 0.375rem;
	background: #E2E8F0;
}

/* 3:2 is its starting height; it grows to fill the rest of the pane. */
@media (min-width: 1024px) {
	.about-story__photo {
		flex: 1 0 auto;
	}
}

.about-story__photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
	.about-story__pane:not(.hidden) {
		animation: none;
	}

	.about-story__tab {
		transition: none;
	}
}