/* sm-theme - „За нас" (B4.4). Макет: makets/final/za-nas-desktop.html, za-nas-mobile.html;
   design/dc/За нас.dc.html. Секцията „Защо не сме по-скъпи?" (.sm-why…) е стилизирана
   в home.css (зарежда се от page-templates/za-nas.php преди този файл). */

/* ---------- Hero: трохи, H1, подзаглавие + снимка 4:3 ---------- */
.sm-about-hero {
	max-width: var(--sm-container);
	margin: 0 auto;
	padding: 48px 20px 80px;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: 5fr 7fr;
	gap: 64px;
	align-items: center;
}

.sm-about-hero__text {
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
}

.sm-about-crumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	font-size: 13px;
	color: var(--sm-muted);
}

.sm-about-crumbs a {
	color: var(--sm-muted);
}

.sm-about-crumbs a:hover {
	color: var(--sm-ink);
}

.sm-about-crumbs__current {
	color: var(--sm-ink);
}

.sm-about-hero__title {
	margin: 0;
	font-size: 52px;
	font-weight: 800;
	line-height: 1.08;
}

.sm-about-hero__title mark {
	background: linear-gradient(transparent 64%, var(--sm-accent) 64%);
	color: inherit;
}

.sm-about-hero__sub {
	margin: 0;
	font-size: 18px;
	color: var(--sm-muted);
}

.sm-about-hero__media {
	aspect-ratio: 4 / 3;
	border-radius: var(--sm-radius-s);
	overflow: hidden;
	background: var(--sm-img);
}

.sm-about-hero__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 35%;
}

/* ---------- Текст + 2 колони с икона ---------- */
.sm-about-intro {
	max-width: 760px;
	margin: 0 auto;
	padding: 0 20px 80px;
	box-sizing: border-box;
}

.sm-about-intro__lead {
	margin: 0;
	font-size: 21px;
	line-height: 1.55;
	font-weight: 600;
	text-wrap: pretty;
}

.sm-about-intro__cols {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}

.sm-about-intro__lead + .sm-about-intro__cols {
	margin-top: 40px;
}

.sm-about-intro__col {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding: 24px;
	background: var(--sm-surface);
	border-radius: var(--sm-radius);
}

.sm-about-intro__icon {
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	object-fit: contain;
}

.sm-about-intro__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.sm-about-intro__h3 {
	margin: 0;
	font-size: 17px;
	font-weight: 800;
	line-height: normal;
}

.sm-about-intro__text {
	margin: 0;
	color: var(--sm-muted);
	line-height: 1.5;
}

/* ---------- Галерия + бутон ---------- */
.sm-about-gallery {
	max-width: var(--sm-container);
	margin: 0 auto;
	padding: 0 20px 80px;
	box-sizing: border-box;
}

.sm-about-gallery__grid {
	display: grid;
	grid-template-columns: 2fr 3fr;
	gap: 16px;
}

.sm-about-gallery__item {
	height: 520px;
	border-radius: var(--sm-radius-s);
	overflow: hidden;
	background: var(--sm-img);
}

.sm-about-gallery__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}

.sm-about-gallery__item--1 .sm-about-gallery__img {
	object-position: 50% 25%;
}

.sm-about-gallery__cta {
	display: flex;
	justify-content: center;
	margin-top: 40px;
}

.sm-about-gallery__btn {
	height: 52px;
	padding: 0 32px;
}

/* ---------- Мобилно (390px клонът на макета) ---------- */
@media (max-width: 767px) {
	.sm-about-hero {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
		padding: 24px 16px 48px;
	}

	.sm-about-hero__title {
		font-size: 34px;
	}

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

	.sm-about-intro__lead {
		font-size: 18px;
	}

	.sm-about-intro__cols {
		grid-template-columns: minmax(0, 1fr);
	}

	.sm-about-gallery {
		padding: 0 16px 48px;
	}

	.sm-about-gallery__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.sm-about-gallery__item {
		height: 420px;
	}
}