/* ==================== NEWS: news list + card (patterns/news-list.php) ==================== */

/* query.news-list > ul.news-list__list > li > .news-card
   (post-featured-image.news-card__image + group.news-card__body: post-date.__date + post-title.__title + post-excerpt.__excerpt).
   Desktop and ≤1200px: horizontal strip — photo on the left, text on the right; ≤600px: photo on top.
   The title link covers the whole card (::after), so the card is clickable anywhere. Sizes — --news-*. */

.news-list .news-list__list{
	display: flex;
	flex-direction: column;
	gap: var(--news-card-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.news-list .news-list__list > li{
	margin: 0;
}

.news-list .news-card{
	position: relative;
	display: grid;
	grid-template-columns: var(--news-image-width) minmax(0, 1fr);
	min-height: var(--news-card-height);
	margin: 0;
	overflow: hidden;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--news-card-radius);
}

.news-list .news-card__image{
	margin: 0;
	aspect-ratio: var(--news-image-ratio);
	background: var(--catalog-image-bg);
	overflow: hidden;
}

.news-list .news-card__image a,
.news-list .news-card__image img{
	display: block;
	width: 100%;
	height: 100%;
}

.news-list .news-card__image img{
	object-fit: cover;
	transition: transform .3s ease;
}

.news-list .news-card:hover .news-card__image img{
	transform: scale(1.04);
}

.news-list .news-card__body{
	margin: 0;
	padding: var(--news-text-pad-top) var(--news-text-pad-right) var(--news-text-pad-bottom) var(--news-text-gap);
	font-size: var(--news-text-size);
	line-height: 1.3;
	color: var(--color-black);
}

.news-list .news-card__body > *{
	margin: 0;
}

.news-list .news-card__body > * + *{
	margin-top: var(--news-line-gap);
}

.news-list .news-card__title{
	font-family: inherit;
	font-size: inherit;
	font-weight: 700;
	line-height: inherit;
}

.news-list .news-card__title a{
	color: inherit;
	text-decoration: none;
}

.news-list .news-card__title a::after{
	content: "";
	position: absolute;
	inset: 0;
}

.news-list .news-card:hover .news-card__title a{
	color: var(--catalog-accent);
}

.news-list .news-card__excerpt p{
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--news-excerpt-lines);
}

/* Phone (320 layout): photo above the text. */
@media (max-width: 600px){
	.news-list .news-card{
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ==================== NEWS PAGE: /news/<новость>/ (templates/single-news.html) ==================== */

/* .catalog-page__main.service-single.news-single > post-date.news-single__date + photo + text.
   Photo wrapping and the ≤1200px column come from the service page (services.css); here — only the date above the photo. */

.news-single .news-single__date{
	margin: 0 0 var(--news-date-gap);
	font-size: var(--news-date-size);
	line-height: 1.3;
	color: var(--catalog-muted);
}

@media (max-width: 1200px){
	.news-single .news-single__date{
		order: -1;
		margin: 0;
	}
}

/* ==================== HOME: «Новости» (patterns/home-news.php) ==================== */

/* .home-news > h2.__title + query.__query.product-carousel > ul.__list > li > .__item (post-featured-image.__image + post-title.__name)
   + buttons.__more «Все новости». Container, title, tile, photo and the whole-tile link — shared with .home-services (services.css),
   the button — with .home-services__all (catalog.css). Here: the mosaic, the name bar and the phone carousel.
   Desktop: 12-column grid, the first (latest) news 6 columns, the others 3 (570 / 270 / 270); ≤1200px: the first across, two below;
   ≤600px: one tile per screen with scroll-snap, arrows — assets/product-carousel.js. */

.home-news .home-news__list{
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--home-news-gap-y) var(--home-news-gap-x);
	margin: 0;
	padding: 0;
	list-style: none;
}

.home-news .home-news__list > li{
	grid-column: span var(--home-news-span);
}

.home-news .home-news__list > li:first-child{
	grid-column: span var(--home-news-span-first);
}

/* Shared tile rule sets aspect-ratio for the service tiles; news tiles have a fixed height instead. */
.home-news .home-news__item{
	height: var(--home-news-height);
	aspect-ratio: auto;
}

.home-news .home-news__name{
	box-sizing: border-box;
	display: flex;
	align-items: center;
	min-height: var(--home-news-bar);
	margin: 0;
	padding: 10px var(--home-news-bar-pad);
	background: var(--home-services-bar-bg);
	color: #fff;
	font-size: var(--home-news-name-size);
	font-weight: 500;
	line-height: 1.25;
	text-transform: uppercase;
	transition: background .2s ease;
}

.home-news .home-news__item:hover .home-news__name{
	background: rgba(0, 0, 0, .85);
}

/* Arrows come from the shared carousel script — only for the phone carousel. */
.home-news .product-carousel__arrow{
	display: none;
}

@media (max-width: 600px){
	.home-news .home-news__list{
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.home-news .home-news__list::-webkit-scrollbar{
		display: none;
	}

	.home-news .home-news__list > li,
	.home-news .home-news__list > li:first-child{
		flex: 0 0 100%;
		scroll-snap-align: start;
	}

	.home-news .home-news__item{
		height: auto;
		aspect-ratio: var(--home-news-ratio);
	}

	.home-news .product-carousel__arrow{
		display: block;
		top: calc(50% - var(--home-news-bar) / 2);
	}
}