/*
 * SKC about — styles for /nosotros/.
 *
 * Auto-loaded by the enqueue gate `is_page( 'nosotros' )`.
 *
 * Reuses atoms from skc-base.css (no overrides for `.skc-display`,
 * `.skc-headline`, `.skc-label-md`, `.skc-body-lg`, `.skc-btn`,
 * `--ghost`, `.skc-container`). The `.skc-page__body > main.skc-about`
 * rule fixes the flex collapse bug (same lesson as home.css:8-12).
 *
 * The team carousel reuses the scroll-snap pattern from home.css
 * (`.skc-home__featured-track`).
 *
 * Mobile-first; breakpoints: 600px, 768px, 1024px.
 *
 * @package TobiSkatechopChild
 */

.skc-page__body > main.skc-about {
	flex: 1 1 100%;
	min-width: 0;
	padding: 0;
}

/* ============================================================== 1. ROOT */

.skc-about {
	display: block;
	background: var(--skc-background);
	color: var(--skc-on-background);
	overflow-x: hidden; /* the team track scrolls inside its own container */
}

/* ============================================================== 2. IMAGE FRAME */

.skc-about__image-frame {
	width: 100%;
	height: 100%;
	background-color: var(--skc-surface-container);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	display: block;
}

/* ============================================================== 3. HERO */

.skc-about__hero {
	padding: var(--skc-md) 0 var(--skc-xl);
}

.skc-about__hero-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--skc-md);
}

@media (min-width: 768px) {
	.skc-about__hero-grid {
		grid-template-columns: 7fr 5fr;
		gap: var(--skc-gutter);
		align-items: start;
	}
}

.skc-about__hero-content {
	order: 2;
}

@media (min-width: 768px) {
	.skc-about__hero-content {
		order: 1;
	}
}

.skc-about__hero-title {
	text-transform: uppercase;
	margin: 0 0 var(--skc-md);
}

.skc-about__hero-lede {
	color: var(--skc-secondary);
	max-width: 36rem;
	margin: 0 0 var(--skc-lg);
}

@media (min-width: 768px) {
	.skc-about__hero-lede {
		margin: 0;
	}
}

.skc-about__hero-media {
	order: 1;
	position: relative;
	aspect-ratio: 4 / 5;
	border: 2px solid var(--skc-primary);
	overflow: hidden;
}

@media (min-width: 768px) {
	.skc-about__hero-media {
		order: 2;
		aspect-ratio: 4 / 5;
	}
}

.skc-about__image-frame--hero {
	filter: grayscale(100%);
	transition: transform var(--skc-transition-slow);
}

.skc-about__hero-media:hover .skc-about__image-frame--hero {
	transform: scale(1.05);
}

.skc-about__hero-badge {
	display: none;
	position: absolute;
	bottom: calc(-1 * var(--skc-md));
	left: calc(-1 * var(--skc-md));
	background: var(--skc-primary);
	color: var(--skc-on-primary);
	padding: var(--skc-sm) var(--skc-md);
	font-size: var(--skc-label-md);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

@media (min-width: 1024px) {
	.skc-about__hero-badge {
		display: block;
	}
}

/* ============================================================== 4. HISTORY */

.skc-about__history {
	background: var(--skc-surface-container-low);
	padding: var(--skc-xl) 0;
}

.skc-about__history-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--skc-lg);
	align-items: start;
}

@media (min-width: 768px) {
	.skc-about__history-grid {
		grid-template-columns: 6fr 5fr;
		gap: var(--skc-gutter);
	}
}

.skc-about__history-media {
	order: 2;
	aspect-ratio: 16 / 9;
	border: 1px solid var(--skc-outline-variant);
	overflow: hidden;
}

@media (min-width: 768px) {
	.skc-about__history-media {
		order: 1;
	}
}

.skc-about__image-frame--history {
	filter: brightness(0.9);
}

.skc-about__history-content {
	order: 1;
}

@media (min-width: 768px) {
	.skc-about__history-content {
		order: 2;
	}
}

.skc-eyebrow {
	display: inline-block;
	font-size: var(--skc-label-md);
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--skc-outline);
	border-bottom: 1px solid var(--skc-outline-variant);
	padding-bottom: var(--skc-xs);
	margin-bottom: var(--skc-md);
}

.skc-about__history-title {
	text-transform: uppercase;
	margin: 0 0 var(--skc-sm);
}

.skc-about__history-body {
	margin: 0 0 var(--skc-md);
	color: var(--skc-on-surface-variant);
	line-height: 1.6;
}

.skc-about__history-body:last-child {
	margin-bottom: 0;
}

/* ============================================================== 5. MISSION BENTO */

.skc-about__mission {
	padding: var(--skc-xl) 0;
}

.skc-about__bento {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--skc-gutter);
}

@media (min-width: 768px) {
	.skc-about__bento {
		grid-template-columns: repeat(3, 1fr);
	}
}

.skc-about__bento-card {
	padding: var(--skc-lg);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 200px;
}

@media (min-width: 768px) {
	.skc-about__bento-card {
		min-height: 0;
	}
}

.skc-about__bento-card--primary {
	grid-column: 1;
	grid-row: 1;
	background: var(--skc-primary);
	color: var(--skc-on-primary);
	aspect-ratio: 16 / 9;
}

@media (min-width: 768px) {
	.skc-about__bento-card--primary {
		grid-column: 1 / 3;
		grid-row: 1 / 3;
		aspect-ratio: auto;
	}
}

.skc-about__bento-card--primary .skc-about__bento-text {
	opacity: 0.8;
	max-width: 28rem;
}

.skc-about__bento-card:nth-of-type(2) {
	background: var(--skc-surface-container-high);
	border: 2px solid var(--skc-primary);
}

@media (min-width: 768px) {
	.skc-about__bento-card:nth-of-type(2) {
		grid-column: 3;
		grid-row: 1;
	}
}

.skc-about__bento-card:nth-of-type(3) {
	background: var(--skc-on-primary);
	border: 1px solid var(--skc-outline-variant);
}

@media (min-width: 768px) {
	.skc-about__bento-card:nth-of-type(3) {
		grid-column: 3;
		grid-row: 2;
	}
}

.skc-about__bento-icon {
	font-size: 2.5rem;
	display: block;
	margin-bottom: var(--skc-sm);
}

.skc-about__bento-card--primary .skc-about__bento-icon {
	color: var(--skc-on-primary);
}

.skc-about__bento-card:nth-of-type(2) .skc-about__bento-icon,
.skc-about__bento-card:nth-of-type(3) .skc-about__bento-icon {
	color: var(--skc-primary);
}

.skc-about__bento-title {
	text-transform: uppercase;
	margin: 0 0 var(--skc-sm);
	font-size: var(--skc-headline-md);
	line-height: 1.3;
	font-weight: 600;
}

.skc-about__bento-text {
	margin: 0;
	color: var(--skc-on-surface-variant);
	line-height: 1.5;
}

.skc-about__bento-media {
	position: relative;
	height: 20rem;
	overflow: hidden;
}

@media (min-width: 768px) {
	.skc-about__bento-media {
		grid-column: 1 / 3;
		grid-row: 3;
		height: 20rem;
	}
}

.skc-about__image-frame--bento {
	filter: grayscale(100%);
	transition: filter var(--skc-transition-slow);
}

.skc-about__bento-media:hover .skc-about__image-frame--bento {
	filter: grayscale(0%);
}

/* ============================================================== 6. TEAM */

.skc-about__team {
	padding: var(--skc-xl) 0;
}

.skc-about__team-head {
	margin-bottom: var(--skc-lg);
}

.skc-about__team-title {
	text-align: right;
	text-transform: uppercase;
	margin: 0;
}

.skc-about__team-title-outline {
	-webkit-text-stroke: 1px currentColor;
	color: transparent;
}

.skc-about__team-track {
	display: flex;
	gap: var(--skc-md);
	overflow-x: auto;
	padding: 0 var(--skc-margin-mobile) var(--skc-lg);
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
	-webkit-overflow-scrolling: touch;
}

.skc-about__team-track::-webkit-scrollbar {
	display: none;
}

@media (min-width: 768px) {
	.skc-about__team-track {
		padding-left: var(--skc-margin-desktop);
		padding-right: var(--skc-margin-desktop);
	}
}

.skc-about__team-card {
	flex: 0 0 300px;
	scroll-snap-align: start;
	display: block;
}

@media (min-width: 768px) {
	.skc-about__team-card {
		flex: 0 0 400px;
	}
}

.skc-about__team-card--stagger {
	transform: translateY(calc(-1 * var(--skc-md))); /* 24px up, scaled to design's -40px feel */
}

.skc-about__image-frame--team-wrapper,
.skc-about__team-card .skc-about__image-frame--team {
	aspect-ratio: 3 / 4;
	background: var(--skc-surface-container);
	overflow: hidden;
	margin-bottom: var(--skc-sm);
	border: 1px solid transparent;
	transition: border-color var(--skc-transition), filter var(--skc-transition);
	filter: grayscale(100%);
}

.skc-about__team-card:hover .skc-about__image-frame--team {
	filter: grayscale(0%);
	border-color: var(--skc-primary);
}

.skc-about__team-role {
	color: var(--skc-primary);
	margin: 0 0 var(--skc-xs);
}

.skc-about__team-name {
	text-transform: uppercase;
	margin: 0;
	font-size: var(--skc-headline-md);
	line-height: 1.3;
	font-weight: 600;
}

/* ============================================================== 7. CTA */

.skc-about__cta {
	padding: var(--skc-xl) 0;
	border-top: 1px solid var(--skc-outline-variant);
}

.skc-about__cta-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.skc-about__cta-title {
	text-transform: uppercase;
	margin: 0 0 var(--skc-md);
}

.skc-about__cta-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--skc-md);
	justify-content: center;
}

.skc-about__cta-btn {
	/* reuses .skc-btn atom */
}

/* ============================================================== 7. SECTION RHYTHM */

/*
 * Each large section of the about page gets `.skc-about__section` so
 * they share the same vertical rhythm. Mirrors `.skc-home__section` on
 * the home (same `var(--skc-xl)` token). The contact form rendered at
 * the bottom of the page reuses this rhythm too.
 */

.skc-about__section {
	padding: var(--skc-xl) 0;
}

/* ============================================================== 8. REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {
	.skc-about__image-frame--hero,
	.skc-about__image-frame--bento,
	.skc-about__image-frame--team,
	.skc-about__bento-media,
	.skc-about__team-card,
	.skc-about__team-card .skc-about__image-frame--team {
		transition: none;
	}

	.skc-about__team-card--stagger {
		transform: none;
	}
}