/* =========================================================
   GRAND BAR: секция «О компании» со слайдером фото магазина
   ========================================================= */

.gb-about-company {
	background-image: none !important;
}

.gb-about {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 56px;
	align-items: center;
	font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	color: #1d1d1b;
}

/* ---------- Медиа-колонка ---------- */
.gb-about__media {
	position: relative;
	padding: 18px;
}

.gb-about__deco {
	position: absolute;
	z-index: 0;
	border-radius: 50%;
	pointer-events: none;
}

.gb-about__deco--yellow {
	top: -10px;
	right: -10px;
	width: 180px;
	height: 180px;
	background: #FFE7B3;
}

.gb-about__deco--gray {
	bottom: -6px;
	left: -10px;
	width: 120px;
	height: 120px;
	background: #e5e7eb;
}

/* ---------- Слайдер ---------- */
.gb-about-slider {
	position: relative;
	z-index: 1;
	border-radius: 20px;
	overflow: hidden;
	background: #f3f4f6;
	box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
	aspect-ratio: 5 / 4;
}

.gb-about-slider__track {
	display: flex;
	width: 100%;
	height: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.gb-about-slider__track::-webkit-scrollbar {
	display: none;
}

.gb-about-slider__slide {
	position: relative;
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
	margin: 0;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

.gb-about-slider__slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	user-select: none;
	-webkit-user-drag: none;
}

/* подпись к фото */
.gb-about-slider__caption {
	position: absolute;
	left: 16px;
	bottom: 46px;
	max-width: calc(100% - 32px);
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(29, 29, 27, 0.72);
	color: #ffffff;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	backdrop-filter: blur(4px);
}

/* стрелки */
.gb-about-slider__arrow {
	position: absolute;
	top: 50%;
	z-index: 2;
	width: 42px;
	height: 42px;
	margin-top: -21px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.92);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 18px 18px;
	box-shadow: 0 6px 16px rgba(15, 23, 42, 0.18);
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.2s, transform 0.2s, background-color 0.2s;
}

.gb-about-slider:hover .gb-about-slider__arrow,
.gb-about-slider__arrow:focus-visible {
	opacity: 1;
}

.gb-about-slider__arrow:hover {
	background-color: #F9A91D;
	transform: scale(1.06);
}

.gb-about-slider__arrow--prev {
	left: 14px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d1d1b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E");
}

.gb-about-slider__arrow--next {
	right: 14px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d1d1b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
}

/* счетчик */
.gb-about-slider__counter {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 2;
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba(29, 29, 27, 0.6);
	color: #ffffff;
	font-size: 12px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* точки */
.gb-about-slider__dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 14px;
	z-index: 2;
	display: flex;
	justify-content: center;
	gap: 6px;
}

.gb-about-slider__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: none;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.65);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
	cursor: pointer;
	transition: width 0.25s, background-color 0.25s;
}

.gb-about-slider__dot.is-active {
	width: 24px;
	background: #F9A91D;
}

/* заглушка, если фото еще нет */
.gb-about-slider--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	background:
		linear-gradient(135deg, #fffaf0 0%, #f3f4f6 100%);
}

.gb-about-slider__placeholder {
	padding: 0 24px;
	font-size: 14px;
	font-weight: 600;
	color: #9ca3af;
	text-align: center;
}

/* ---------- Текстовая колонка ---------- */
.gb-about__text p {
	margin: 0 0 14px;
	font-size: 15px;
	line-height: 1.7;
	color: #4b5563;
}

.gb-about__text strong {
	font-weight: 700;
	color: #1d1d1b;
}

/* цифры-факты */
.gb-about__facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 12px;
	margin: 22px 0;
}

.gb-about__fact {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 14px 16px;
	border: 1px solid #f6d590;
	border-left: 4px solid #F9A91D;
	border-radius: 14px;
	background: #fffaf0;
}

.gb-about__fact-value {
	font-size: 24px;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.gb-about__fact-label {
	font-size: 13px;
	color: #6b7280;
}

/* список с желтыми галочками */
.gb-about__list-title {
	margin: 20px 0 10px;
	font-size: 16px;
	font-weight: 700;
}

.gb-about__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px 20px;
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
}

.gb-about__list li {
	position: relative;
	padding-left: 32px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.5;
	color: #1d1d1b;
}

.gb-about__list li::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #F9A91D no-repeat center url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d1d1b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
	background-size: 12px 12px;
}

.gb-about__outro {
	margin: 0 0 20px;
	font-size: 15px;
	line-height: 1.7;
	color: #4b5563;
}

/* кнопка «Построить маршрут» */
.gb-about__route,
.gb-about__route:visited {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 48px;
	padding: 0 24px;
	border-radius: 999px;
	background: #F9A91D;
	color: #1d1d1b;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	box-shadow: 0 8px 18px rgba(249, 169, 29, 0.35);
	transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.gb-about__route:hover {
	background: #e09005;
	color: #1d1d1b;
	text-decoration: none;
	transform: translateY(-1px);
	box-shadow: 0 12px 24px rgba(249, 169, 29, 0.45);
}

.gb-about__route-icon {
	width: 18px;
	height: 18px;
	background: no-repeat center url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d1d1b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
	background-size: contain;
}

/* ---------- Адаптив ---------- */
@media (max-width: 991px) {
	.gb-about {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.gb-about__media {
		max-width: 720px;
		width: 100%;
		margin: 0 auto;
	}

	.gb-about-slider {
		aspect-ratio: 4 / 3;
	}
}

@media (max-width: 575px) {
	.gb-about__media {
		padding: 10px;
	}

	.gb-about__deco--yellow {
		width: 90px;
		height: 90px;
	}

	.gb-about__deco--gray {
		width: 60px;
		height: 60px;
	}

	.gb-about-slider {
		border-radius: 16px;
	}

	/* на телефоне стрелки не нужны — листаем пальцем */
	.gb-about-slider__arrow {
		display: none;
	}

	.gb-about__list {
		grid-template-columns: 1fr;
	}

	.gb-about__route {
		width: 100%;
		justify-content: center;
	}
}