/* Главная: направления каталога — сетка, hover, те же горизонтальные поля, что у Hero */

.lf-cat-dir {
	/*
	 * Figma «Drop shadow» на подписи: X 0, Y 6, Blur 22, Spread 0, #000 25%.
	 * Для текста ближе к макету, чем text-shadow, — filter: drop-shadow (тот же принцип, что у box-shadow).
	 */
	--lf-cat-card-title-filter: drop-shadow(0 6px 22px rgba(0, 0, 0, 0.25));
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.lf-cat-dir__gutter {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	padding: 0 var(--lf-chrome-pad-x, clamp(18px, 3vw, 48px)) 28px;
}

.lf-cat-dir__intro {
	text-align: center;
	font-family: "Rubik", system-ui, sans-serif;
	padding-top: 32px;
	margin-bottom: 28px;
}

.lf-cat-dir__heading {
	margin: 0;
	/* Figma: Lato 400, 48px, line-height 145%, letter-spacing 0.35% */
	font-family: 'Lato', sans-serif;
	font-synthesis: none;
	font-weight: 400;
	font-style: normal;
	font-size: 40px;
	line-height: 1.45;
	letter-spacing: 0.0035em;
	color: #0f172a;
}

/* Центр только на главной; в разделе «Каталог» (корень) выравнивание задаёт lf-catalog-pages */
.lf-cat-dir:not(.lf-cat-dir--catalog-root) .lf-cat-dir__heading {
	text-align: center;
}

.lf-cat-dir__sub {
	margin: 12px auto 0;
	/* Figma Text-xl/500, 18_24: Rubik Medium, 18px, line-height 24px, letter-spacing 0, center */
	font-family: "Rubik", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-weight: 500;
	font-style: normal;
	font-size: clamp(1rem, 1.5vw + 0.75rem, 1.125rem);
	line-height: 1.333333;
	letter-spacing: 0;
	text-align: center;
	color: #475569;
	max-width: 36em;
}

.lf-cat-dir__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
}

@media (min-width: 576px) {
	.lf-cat-dir__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}
}

@media (min-width: 992px) {
	.lf-cat-dir__grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 18px;
	}
}

.lf-cat-dir__cell {
	margin: 0;
	padding: 0;
	min-width: 0;
}

.lf-cat-dir__card {
	display: block;
	position: relative;
	border-radius: 14px;
	overflow: visible;
	text-decoration: none;
	color: #f8fafc;
	background: #0f172a;
	box-shadow: 0 8px 28px rgba(15, 23, 42, 0.12);
	min-height: 200px;
	aspect-ratio: 3 / 4;
	isolation: isolate;
}

@media (min-width: 992px) {
	.lf-cat-dir__card {
		aspect-ratio: 3 / 4;
		min-height: 220px;
	}
}

.lf-cat-dir__card:hover,
.lf-cat-dir__card:focus-visible {
	outline: none;
}

.lf-cat-dir__card:focus-visible {
	box-shadow: 0 0 0 3px #fff, 0 0 0 5px #0f766e;
}

.lf-cat-dir__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: 14px;
	overflow: hidden;
	background: linear-gradient(145deg, #2d2d2d 0%, #1f1f1f 50%, #1a1a1a 100%);
}

.lf-cat-dir__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1);
	transition: transform 0.45s ease;
}

.lf-cat-dir__card:hover .lf-cat-dir__img,
.lf-cat-dir__card:focus-visible .lf-cat-dir__img {
	transform: scale(1.06);
}

.lf-cat-dir__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(0, 0, 0, 0.2);
	pointer-events: none;
	transition: background 0.25s ease;
}

.lf-cat-dir__card:hover .lf-cat-dir__scrim,
.lf-cat-dir__card:focus-visible .lf-cat-dir__scrim {
	background: rgba(0, 0, 0, 0.28);
}

/* Подпись: Rubik 400, 24/32, letter-spacing 10%, uppercase, по центру.
   Bottom: 8.5% от высоты карточки (Figma). */
.lf-cat-dir__title {
	position: absolute;
	left: 0;
	bottom: 8.5%;
	right: 0;
	transform: none;
	z-index: 2;
	box-sizing: border-box;
	max-width: none;
	margin: 0;
	padding: 0 18px;
	background: transparent;
	color: #ffffff;
	font-family: "Rubik", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 24px;
	line-height: 1.142857;
	letter-spacing: 0.1em;
	text-align: center;
	text-transform: uppercase;
	border: none;
	border-radius: 0;
	text-shadow: none;
	filter: var(--lf-cat-card-title-filter, drop-shadow(0 6px 22px rgba(0, 0, 0, 0.25)));
	-webkit-filter: var(--lf-cat-card-title-filter, drop-shadow(0 6px 22px rgba(0, 0, 0, 0.25)));
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	hyphens: none;
	overflow-wrap: normal;
}

/* Главная: при >3 разделов — горизонтальная лента и своя полоска скролла (как подкатегории / корень каталога) */
.lf-cat-dir--root-grid-hscroll {
	--lf-root-grid-gap: 14px;
}

@media (min-width: 576px) {
	.lf-cat-dir--root-grid-hscroll {
		--lf-root-grid-gap: 16px;
	}
}

@media (min-width: 992px) {
	.lf-cat-dir--root-grid-hscroll {
		--lf-root-grid-gap: 18px;
	}
}

.lf-cat-root__mega-scroll[data-lf-cat-dir-root-grid-scroll="1"] {
	min-width: 0;
}

.lf-cat-root__mega-scroll[data-lf-cat-dir-root-grid-scroll="1"] .lf-cat-root__mega-inner {
	--lf-mega-sub-gap: 8px;
	gap: var(--lf-mega-sub-gap) !important;
	scroll-snap-type: none !important;
	overscroll-behavior-x: contain;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

@media (min-width: 576px) {
	.lf-cat-root__mega-scroll[data-lf-cat-dir-root-grid-scroll="1"] .lf-cat-root__mega-inner {
		--lf-mega-sub-gap: 10px;
		gap: var(--lf-mega-sub-gap) !important;
	}
}

@media (min-width: 992px) {
	.lf-cat-root__mega-scroll[data-lf-cat-dir-root-grid-scroll="1"] .lf-cat-root__mega-inner {
		--lf-mega-sub-gap: 12px;
		gap: var(--lf-mega-sub-gap) !important;
	}
}

.lf-cat-dir--root-grid-hscroll .lf-cat-dir__grid--hscroll {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: var(--lf-root-grid-gap) !important;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	scroll-snap-type: none !important;
	scrollbar-width: none;
	-ms-overflow-style: none;
	grid-template-columns: unset;
	margin: 0;
	padding: 0;
	list-style: none;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.lf-cat-dir--root-grid-hscroll .lf-cat-dir__grid--hscroll::-webkit-scrollbar {
	display: none;
	width: 0;
	height: 0;
}

.lf-cat-dir--root-grid-hscroll .lf-cat-dir__cell {
	overflow: visible;
	flex: 0 0 calc((100% - 2 * var(--lf-root-grid-gap)) / 3);
	width: calc((100% - 2 * var(--lf-root-grid-gap)) / 3);
	min-width: calc((100% - 2 * var(--lf-root-grid-gap)) / 3);
	max-width: calc((100% - 2 * var(--lf-root-grid-gap)) / 3);
}

.lf-cat-dir--root-grid-hscroll .lf-cat-dir__gutter > .lf-cat-root__mega-scroll[data-lf-cat-dir-root-grid-scroll="1"] {
	overflow: visible;
	min-width: 0;
}