/**
 * Thaicon Theme — Блок: О компании DC Engineering
 *
 * По скриншоту #4:
 *   - Заголовок слева + лого компании справа
 *   - 2 большие тёмные карточки с иконкой
 *   - 4 маленькие светлые карточки с цифрами
 *   - Кнопка внизу
 *
 * @package Thaicon
 */

.block-about-jac {
	background: var(--t-white);
	padding: 5rem 0;
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

/* Фоновое изображение (карта с точками) */
.block-about-jac__bg {
	position: absolute;
	right: 0;
	top:15rem;
	width: 65%;
	height: 100%;
	z-index: -1;
	pointer-events: none;
}

.block-about-jac__bg img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: right top;
}

.block-about-jac__container {

}


/* ================================================================
   ЗАГОЛОВОК + ЛОГО
   ================================================================ */

.block-about-jac__header {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 3rem;
	align-items: flex-start;
	margin-bottom: 5rem;                   /* 48px */
}

.block-about-jac__header-content {
	max-width: 50rem;                      /* 800px */
}

.block-about-jac__title {
	font-size: 2.1875rem;                  /* 35px */
	font-weight: 700;
	line-height: 1.6;
	color: var(--t-dark);
	text-transform: uppercase;
	margin-bottom: 2.5rem;
}

.block-about-jac__text {
	font-size: 1rem;                       /* 16px */
	line-height: 1.6;
	max-width: 31rem;
}

.block-about-jac__text p {
	margin-bottom: 1em;
}
.block-about-jac__text p:last-child { margin-bottom: 0; }

.block-about-jac__logo {
	flex-shrink: 0;
	max-width: 20rem;
	height: 5rem;
}

.block-about-jac__logo img {
	max-width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	width: 100%;
}


/* ================================================================
   БОЛЬШИЕ ТЁМНЫЕ КАРТОЧКИ (hero-stats)
   ================================================================ */

.block-about-jac__hero-stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem;                          /* 20px */
	margin-bottom: 1.25rem;
	max-width: 55rem;
}

.hero-stat {
	display: flex;
	align-items: flex-start;
	gap: 1.25rem;                          /* 20px */
	padding: 2rem;                         /* 32px */
	background: var(--t-blue-medium);
	border-radius: 1.25rem;                /* 20px */
	color: var(--t-white);
	transition: transform var(--t-speed-normal);
}

.hero-stat:hover {
	transform: translateY(-0.25rem);
}

.hero-stat__icon {
	flex-shrink: 0;
	width: 3.5rem;                         /* 56px */
	height: 3.5rem;
	border-radius: 0.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hero-stat__icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.hero-stat__content {
	flex: 1;
	min-width: 0;
}

.hero-stat__title {
	font-size: 1.75rem;                    /* 28px */
	font-weight: 700;
	line-height: 1.15;
	color: var(--t-white);
	text-transform: uppercase;
	margin-bottom: 0.5rem;
}

.hero-stat__desc {
	font-size: 0.9375rem;                  /* 15px */
	line-height: 1.4;
}


/* ================================================================
   МАЛЫЕ СВЕТЛЫЕ КАРТОЧКИ
   ================================================================ */

.block-about-jac__stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: 1.25rem;                          /* 20px */
	margin-bottom: 2.5rem;
}

.about-jac-stat {
	padding: 1.5rem 1.75rem;               /* 24/28 */
	background: var(--t-blue-pale);
	border-radius: 1rem;                   /* 16px */
	transition: background-color var(--t-speed-normal);
}

.about-jac-stat:hover {
	background: var(--t-blue-light);
}

.about-jac-stat__value {
	display: flex;
	align-items: baseline;
	gap: 0.25rem;
	font-size: 1.5rem;                     /* 24px */
	font-weight: 700;
	line-height: 1;
	color: var(--t-dark);
	margin-bottom: 0.625rem;
}

.about-jac-stat__number {
	font-weight: 700;
}

.about-jac-stat__suffix {
	font-size: 1.125rem;
	color: var(--t-blue-medium);
}

.about-jac-stat__label {
	font-size: 0.875rem;                   /* 14px */
	line-height: 1.4;
	color: var(--t-dark-muted);
}


/* ================================================================
   СНОСКА
   ================================================================ */

.block-about-jac__footnote {
	font-size: 0.75rem;                    /* 12px */
	color: var(--t-dark-muted);
	margin-bottom: 2rem;
	font-style: italic;
}


/* ================================================================
   КНОПКА
   ================================================================ */

.block-about-jac__cta {
	margin-top: 1rem;
}

.block-about-jac__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.9375rem 2rem;               /* 15/32 */
	background: var(--t-dark);
	color: var(--t-white);
	font-size: 0.875rem;                   /* 14px */
	font-weight: 700;
	text-transform: uppercase;
	border-radius: 1.0625rem;              /* 17px */
	transition: background-color var(--t-speed-normal);
}

.block-about-jac__btn:hover {
	background: var(--t-blue-medium);
	color: var(--t-white);
}


/* ================================================================
   АДАПТИВ
   ================================================================ */

@media (max-width: 959px) {
	.block-about-jac__title {
		font-size: 1.75rem;
	}
	.block-about-jac__hero-stats {
		grid-template-columns: 1fr;
	}
	.hero-stat {
		padding: 1.5rem;
	}
	.hero-stat__title {
		font-size: 1.375rem;
	}
}

@media (max-width: 639px) {
	.block-about-jac {
		padding: 40px 0;
	}
	.block-about-jac__container {
		padding: 0 15px;
	}
	.block-about-jac__header {
		grid-template-columns: 1fr;
		gap: 20px;
		margin-bottom: 28px;
	}
	.block-about-jac__title {
		font-size: 20px;
	}
	.block-about-jac__text {
		font-size: 14px;
	}
	.block-about-jac__logo {
		max-width: 120px;
	}
	.hero-stat {
		padding: 20px;
		gap: 14px;
		border-radius: 16px;
	}
	.hero-stat__icon {
		width: 42px;
		height: 42px;
	}
	.hero-stat__title {
		font-size: 16px;
	}
	.hero-stat__desc {
		font-size: 13px;
	}
	.about-jac-stat {
		padding: 18px;
	}
	.about-jac-stat__value {
		font-size: 20px;
	}
	.about-jac-stat__label {
		font-size: 12px;
	}
	.block-about-jac__btn {
		font-size: 12px;
		padding: 14px 28px;
	}
}