/*
 * About page (templates/about.php) — enqueued for that template only.
 * Tokens follow the "Melbicom About Page" design: text #3a3c4b, greens
 * #1fad58 / #35ca70, greys #f6f7f9 / #e4e4e8 / #7f8893 / #d9dcdf, dark
 * #3a3c4b; Montserrat for headings and figures, Source Sans Pro for copy.
 */

/* The page header (title band + breadcrumb strip) is the theme's own —
   see templates/legal.php — and is deliberately not restyled here. */

/* ---- intro: copy + paged photo collage ---------------------------------- */
.about-intro {

	/* .page__titlebox already contributes its 80px bottom margin. */
	padding: 16px 0 96px;
}

.about-intro__grid {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: 72px;
	align-items: center;
}

.about-intro__copy {
	display: flex;
	flex-direction: column;
	gap: 24px;
	min-width: 0;
}

.page--about .about-intro__title {
	width: auto;
	margin: 0;
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 34px;
	line-height: 1.3;
	color: #3a3c4b;
	text-wrap: balance;
}

.about-intro__text {
	font-size: 16px;
	line-height: 26px;
	color: #3a3c4b;
}

/* The editor's paragraphs carry the legacy aboutcompany__subtitle class
   (900px wide, 20px type, built for the old one-column layout): inside
   the grid column they take the column's width and the design's type. */
.about-intro__text p,
.page--about .about-intro__text .aboutcompany__subtitle {
	width: auto;
	max-width: 100%;
	margin: 0 0 24px;
	font-size: 16px;
	line-height: 26px;
}

.about-intro__text > * {
	max-width: 100%;
}

.about-intro__text p:last-child {
	margin-bottom: 0;
}

.about-intro__text strong,
.about-intro__text b {
	font-weight: 700;
}

.about-intro__media {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.about-collage {
	overflow: hidden;
	height: 460px;
	width: 100%;
}

.about-collage__track {
	display: flex;
	height: 100%;
	transition: transform 0.45s ease;
}

.about-collage__page {
	flex: 0 0 100%;
	display: grid;
	grid-template-columns: 1.35fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 16px;
	height: 100%;
}

/* A page that has finished sliding out is hidden outright, which also
   guarantees it holds no tab stop in browsers without inert support.
   Focusability is dropped the moment paging starts (about.js), so the
   class is only about what is painted, never about what is reachable. */
.about-collage__page.is-offscreen {
	visibility: hidden;
}

.about-collage__item {
	position: relative;
	display: block;
	overflow: hidden;
	background: #eef0f4;
}

.about-collage__item:first-child {
	grid-row: 1 / 3;
}

.about-collage__item .about-collage__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.about-collage__nav {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-top: 24px;
}

.about-collage__count {
	display: flex;
	align-items: baseline;
	gap: 5px;
	font-size: 16px;
	color: #7f8893;
}

.about-collage__count b {
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 26px;
	line-height: 1;
	color: #35ca70;
}

.about-collage__next {
	display: flex;
	align-items: center;
	padding: 6px 0;
	background: none;
	border: 0;
	cursor: pointer;
	color: #35ca70;
	transition: color 0.2s ease;
}

.about-collage__next:hover {
	color: #1fad58;
}

/* The theme zeroes outlines globally; the arrow is a real button, so it
   opts into the house focus ring (same as the products cards on About). */
.about-collage__next:focus-visible,
.about-collage__item:focus-visible {
	outline: 3px solid transparent;
	outline-offset: 2px;
	box-shadow: 0 0 0 2px #fff, 0 0 0 5px #086c35;
}

/* ---- numbers: dark band, 3 × N grid with hairline dividers -------------- */
.about-numbers {
	background: #3a3c4b;
	padding: 120px 0;
}

.about-numbers__title {
	margin: 0 0 56px;
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 36px;
	line-height: 1.2;
	text-align: center;
	color: #fff;
}

.about-numbers__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

.about-numbers__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	text-align: center;
	padding: 40px 24px;
	border-top: 1px solid rgba(127, 136, 147, 0.45);
	border-left: 1px solid rgba(127, 136, 147, 0.45);
}

.about-numbers__item:nth-child(-n + 3) {
	border-top: 0;
}

.about-numbers__item:nth-child(3n + 1) {
	border-left: 0;
}

.about-numbers__value {
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 44px;
	line-height: 1;
	color: #35ca70;
}

.about-numbers__label {
	font-size: 16px;
	color: #d9dcdf;
}

/* ---- responsive -------------------------------------------------------- */
@media (max-width: 992px) {

	.about-intro {
		padding: 8px 0 64px;
	}

	.about-intro__grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.about-collage {
		height: 360px;
	}

	.about-numbers {
		padding: 72px 0;
	}

	.about-numbers__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.about-numbers__item:nth-child(n) {
		border-top: 1px solid rgba(127, 136, 147, 0.45);
		border-left: 1px solid rgba(127, 136, 147, 0.45);
	}

	.about-numbers__item:nth-child(-n + 2) {
		border-top: 0;
	}

	.about-numbers__item:nth-child(2n + 1) {
		border-left: 0;
	}
}

@media (max-width: 600px) {

	.about-intro {
		padding: 0 0 48px;
	}

	.page--about .about-intro__title {
		font-size: 26px;
		line-height: 34px;
		text-align: left;
	}

	.about-collage {
		height: 260px;
	}

	.about-collage__page {
		gap: 10px;
	}

	.about-numbers {
		padding: 56px 0;
	}

	.about-numbers__title {
		font-size: 26px;
		line-height: 34px;
		margin-bottom: 32px;
	}

	.about-numbers__grid {
		grid-template-columns: 1fr;
	}

	.about-numbers__item:nth-child(n) {
		border-left: 0;
		border-top: 1px solid rgba(127, 136, 147, 0.45);
		padding: 28px 16px;
	}

	.about-numbers__item:first-child {
		border-top: 0;
	}

	.about-numbers__value {
		font-size: 36px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.about-collage__track,
	.about-collage__next {
		transition: none;
	}
}