/* NEW WOOD ART — страница каталога (product/nwa_catalog) ---------------------
   Плитка категорий. Панель, подвал, палитра, типографика, крошки и заголовок
   приходят из nwa-inner.css по классу nwa-page, как на «Услугах». Этот файл
   описывает только карточку.

   Устройство карточки повторяет «стену категорий» боевого newwoodart.ru:
   картинка во всю ширину полосой 4:3, поверх её нижней части иконка с
   названием, под картинкой короткое описание.

   Чем отличается от боевого и почему. Там карточка тёмная — весь сайт на
   тёмной теме. У нас внутренние страницы светлые, и карточки товара на
   «Услугах» белые: nwa-inner.css красит .uni-item в #FFFFFF с рамкой #E2E2DE,
   а при наведении поднимает на 3px и красит рамку в #DEA568. Здесь взяты те
   же значения, чтобы каталог и соседние страницы ощущались одним сайтом.
   Затемнение осталось только на картинке, под подписью: без него белый текст
   на светлом снимке не читается.

   Цвета — из переменных палитры, которые nwa-inner.css задаёт на
   body.nwa-page. Числами прописаны только те, что взяты у карточек товара
   один в один, и оранжевый акцент иконок с боевого сайта.
   -------------------------------------------------------------------------- */

body.nwa-page .nwa-catalog{
	padding-bottom:48px;
}
body.nwa-page .nwa-catalog__grid{
	display:grid;
	grid-template-columns:repeat(3, minmax(0, 1fr));
	gap:24px;
	margin:8px 0 24px;
}

/* ── Карточка ──────────────────────────────────────────────────────────────
   Ссылка на всю карточку, поэтому display:flex, а не inline. Цвет текста
   задан здесь: тёмная тема красит ссылки внутри .uni-wrapper своим цветом,
   и без !important подпись ушла бы в бежевый. */
body.nwa-page .nwa-catalog__item{
	display:flex;
	flex-direction:column;
	min-width:0;
	background:#FFFFFF;
	border:1px solid #E2E2DE;
	color:var(--nwa-text) !important;
	text-decoration:none !important;
	transition:border-color .2s ease, transform .25s ease;
}
body.nwa-page .nwa-catalog__item:hover{
	border-color:#F38454;
	transform:translateY(-3px);
}

/* ── Картинка с подписью поверх ───────────────────────────────────────────
   position:relative нужен затемнению и подписи. aspect-ratio держит полосу
   4:3 независимо от того, какого размера пришёл файл: у категорий картинки
   разных пропорций, и без него плитка шла лесенкой. */
body.nwa-page .nwa-catalog__media{
	position:relative;
	display:block;
	overflow:hidden;
	background:#FAFAF8;
	aspect-ratio:4 / 3;
}
body.nwa-page .nwa-catalog__media img{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
	transition:transform .35s ease;
}
body.nwa-page .nwa-catalog__item:hover .nwa-catalog__media img{
	transform:scale(1.04);
}

/* Затемнение снизу вверх. Плотное у нижнего края, где лежит подпись, и сходит
   на нет к середине, чтобы не гасить саму картинку. */
body.nwa-page .nwa-catalog__scrim{
	position:absolute;
	inset:0;
	background:linear-gradient(
		to top,
		rgba(8,9,11,.88) 0%,
		rgba(8,9,11,.62) 26%,
		rgba(8,9,11,.12) 55%,
		rgba(8,9,11,0) 78%
	);
	pointer-events:none;
}

body.nwa-page .nwa-catalog__head{
	position:absolute;
	left:0;
	right:0;
	bottom:0;
	display:flex;
	align-items:center;
	gap:12px;
	padding:16px;
	pointer-events:none;
}

/* Иконка в скруглённом квадрате — как на боевой стене. Фон полупрозрачный
   белый: он одинаково работает и на светлом, и на тёмном участке снимка. */
body.nwa-page .nwa-catalog__icon{
	flex:0 0 auto;
	display:flex;
	align-items:center;
	justify-content:center;
	width:44px;
	height:44px;
	border-radius:10px;
	background:rgba(255,255,255,.14);
	border:1px solid rgba(255,255,255,.22);
	backdrop-filter:blur(2px);
}
body.nwa-page .nwa-catalog__icon img{
	display:block;
	width:26px;
	height:26px;
}

/* Белый с !important: правило nwa-inner.css для ссылок внутри .uni-wrapper
   иначе красит подпись в цвет текста страницы, а она лежит на затемнении. */
body.nwa-page .nwa-catalog__title{
	min-width:0;
	font-family:var(--body-font);
	font-size:18px;
	font-weight:600;
	line-height:1.25;
	color:#FFFFFF !important;
	text-shadow:0 1px 2px rgba(0,0,0,.45);
}

/* ── Описание под картинкой ─────────────────────────────────────────────── */
body.nwa-page .nwa-catalog__summary{
	display:block;
	padding:14px 16px 18px;
	font-size:14px;
	line-height:1.45;
	color:var(--nwa-text-secondary) !important;
}

body.nwa-page .nwa-catalog__empty{
	padding:24px 0;
	color:var(--nwa-text-secondary);
}

/* ── Адаптив ──────────────────────────────────────────────────────────────
   Ширины повторяют сетку карточек товара на внутренних страницах. */
@media (max-width:991px){
	body.nwa-page .nwa-catalog__grid{grid-template-columns:repeat(2, minmax(0, 1fr));gap:18px}
	body.nwa-page .nwa-catalog__title{font-size:16px}
	body.nwa-page .nwa-catalog__icon{width:38px;height:38px;border-radius:9px}
	body.nwa-page .nwa-catalog__icon img{width:22px;height:22px}
}
@media (max-width:575px){
	body.nwa-page .nwa-catalog__grid{grid-template-columns:1fr}
	body.nwa-page .nwa-catalog__head{padding:13px}
	body.nwa-page .nwa-catalog__summary{padding:12px 13px 15px}
}