/* Block Mạng lưới nhà máy (Figma 289:953) */

.block-factories {
	isolation: isolate;
	text-align: center;
}

/* Dải lụa nền (dugarco_ribbon): sau cả chữ trang trí, tràn xuống tới hết banner xanh. */
.block-factories .scroll-ribbon {
	z-index: -2;
}

.block-factories__decor {
	position: absolute;
	top: -0.1em;
	left: 50%;
	z-index: -1;
	transform: translateX(-50%);
}

.block-factories__title {
	padding-top: clamp(16px, 2.66vw, 51px);
	font-family: var(--font-body);
	font-size: clamp(32px, 3.75vw, 72px);
	font-weight: 900;
	line-height: 1.26;
	text-transform: uppercase;
	color: var(--color-text);
}

/* Carousel ---------------------------------------------------------------- */

.block-factories__carousel {
	position: relative;
	margin-top: clamp(24px, 3.4vw, 64px);
}

.block-factories__track {
	display: flex;
	gap: clamp(16px, 1.77vw, 34px);
	padding: 8px var(--gutter) 40px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--gutter);
	scrollbar-width: thin;
	text-align: left;
}

.factory-card {
	--fc-bg: var(--color-beige);
	--fc-ink: var(--color-ink);
	--fc-meta: var(--color-brown);
	--fc-more: none;
	position: relative;
	flex: 0 0 clamp(280px, 30.5vw, 585px);
	padding: clamp(12px, 1.04vw, 20px);
	border-radius: var(--radius-md);
	background: var(--fc-bg);
	color: var(--fc-ink);
	box-shadow: var(--shadow-card);
	scroll-snap-align: start;
	transition: background-color 0.3s, color 0.3s;
	outline-offset: 4px;
}

/* Có JS: ẩn thanh cuộn ngang – chuyển card bằng cuộn trang (desktop), nút trước / sau hoặc vuốt. */
.block-factories__carousel.is-enhanced .block-factories__track {
	scrollbar-width: none;
}

.block-factories__carousel.is-enhanced .block-factories__track::-webkit-scrollbar {
	display: none;
}

/* Mặc định mọi card màu be (feedback vòng 4); rê chuột / focus card nào thì card đó đổi màu đỏ, hiện mô tả. */
.factory-card:focus-visible {
	--fc-bg: var(--color-primary-dark);
	--fc-ink: #fff;
	--fc-meta: #fff;
	--fc-more: block;
}

@media (hover: hover) {
	.factory-card:hover {
		--fc-bg: var(--color-primary-dark);
		--fc-ink: #fff;
		--fc-meta: #fff;
		--fc-more: block;
	}
}

.factory-card__media {
	overflow: hidden;
	border-radius: var(--radius-md);
	aspect-ratio: 545 / 321;
}

.factory-card__media picture,
.factory-card__media img {
	width: 100%;
	height: 100%;
}

.factory-card__media img {
	object-fit: cover;
}

/* Card hẹp (màn hình < 1024px, card 280px): ảnh vuông, không thì chữ của card đang chọn (tên, dòng sản phẩm, mô tả)
   cao hơn cả card, che hết ảnh và bị cắt mép trên. */
@media (max-width: 1023px) {
	.factory-card__media {
		aspect-ratio: 1;
	}
}

.factory-card__location {
	position: absolute;
	top: clamp(12px, 1.04vw, 20px);
	right: clamp(12px, 1.04vw, 20px);
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 4px 8px;
	border-bottom-left-radius: 14px;
	background: var(--fc-bg);
	font-size: clamp(14px, 1.04vw, 20px);
	line-height: 1.25;
	transition: background-color 0.3s;
}

.factory-card__location .icon {
	color: var(--color-primary);
}

.factory-card:focus-visible .factory-card__location .icon {
	color: #fff;
}

@media (hover: hover) {
	.factory-card:hover .factory-card__location .icon {
		color: #fff;
	}
}

.factory-card__body {
	position: absolute;
	bottom: clamp(8px, 0.63vw, 12px);
	left: clamp(8px, 0.83vw, 16px);
	max-width: calc(100% - 2 * clamp(12px, 1.04vw, 20px));
	padding: 8px 16px;
	border-top-right-radius: var(--radius-md);
	background: var(--fc-bg);
	transition: background-color 0.3s;
}

.factory-card__name {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: clamp(18px, 1.67vw, 32px);
	font-weight: 700;
	line-height: 1.22;
}

.factory-card__name .icon {
	width: clamp(20px, 1.25vw, 24px);
	height: clamp(20px, 1.25vw, 24px);
	color: var(--fc-meta);
}

.factory-card__products {
	margin-top: 2px;
	padding-left: calc(clamp(20px, 1.25vw, 24px) + 8px);
	font-size: 14px;
	line-height: 1.3;
	color: var(--fc-meta);
}

.factory-card__more {
	display: var(--fc-more);
	margin-top: 8px;
	padding-left: calc(clamp(20px, 1.25vw, 24px) + 8px);
	font-size: clamp(14px, 1.04vw, 20px);
	line-height: 1.25;
	color: rgba(255, 255, 255, 0.8);
}

.factory-card__subtitle {
	font-family: var(--font-display);
	font-size: clamp(16px, 1.25vw, 24px);
	font-weight: 600;
	color: #fff;
}

/* Số liệu ----------------------------------------------------------------- */

.block-factories__stats {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	row-gap: 24px;
	margin-top: clamp(32px, 3vw, 56px);
}

.block-factories__stat {
	display: flex;
	flex-direction: column-reverse;
	align-items: center;
	padding-inline: clamp(16px, 1.41vw, 27px);
}

.block-factories__stat + .block-factories__stat {
	border-left: 1px solid #d1d1d6;
}

.block-factories__stat dd {
	font-size: clamp(36px, 3.96vw, 76px);
	font-weight: 800;
	line-height: 1.26;
	color: var(--color-text-strong);
}

.block-factories__stat dt {
	font-size: var(--fs-body-lg);
	line-height: 1.25;
	color: var(--color-text-strong);
}

@media (max-width: 639px) {
	.block-factories__stat {
		flex: 0 0 50%;
	}

	.block-factories__stat:nth-child(odd) {
		border-left: 0;
	}
}

/* Cuộn trang để chuyển card (factory-network.js gắn .is-pinned khi nội dung vừa 1 màn hình) ---------------------------
   Section cao thêm (số trang 3 card − 1) chặng × 60vh, khung (stage) dính dưới header. Desktop (.is-paged): mỗi chặng trượt
   sang 3 card kế tiếp, mỗi trang đúng 3 card vừa khung. Mobile: dải card trượt ngang liền mạch theo cuộn dọc. */
.block-factories.is-pinned {
	height: calc(100vh - var(--header-height) + (var(--fn-pages, 1) - 1) * 60vh);
}

.is-pinned .block-factories__stage {
	position: sticky;
	top: var(--header-height);
	display: grid;
	grid-template-columns: minmax(0, 1fr); /* cột không giãn theo dải card – dải phải tràn để cuộn ngang được */
	align-content: center;
	height: calc(100vh - var(--header-height));
}

.is-pinned .block-factories__track {
	scroll-snap-type: none;
	touch-action: pan-y; /* điện thoại: vuốt dọc cuộn trang (và trượt card), không kéo ngang tự do */
}

@media (min-width: 1024px) {
	.is-paged .factory-card {
		flex-basis: calc((100% - 2 * clamp(16px, 1.77vw, 34px)) / 3);
	}
}

/* Mobile / tablet (feedback vòng 4): bỏ nút mũi tên – chuyển card bằng cuộn trang (hoặc vuốt ngang khi không dính). */
@media (max-width: 1023px) {
	.block-factories .carousel-nav {
		display: none !important;
	}
}