/* ==================== SERVICES: service grid + card ==================== */

/* query.service-grid > ul.service-grid__list > li > .service-card
   (post-featured-image.service-card__image + post-title.service-card__title + button.service-card__more «Подробнее»).
   Grid, image, title and button base are shared with the product card (catalog.css); here — only the differences:
   square photo and an uppercase «ПОДРОБНЕЕ» button instead of the price. */

.service-grid .service-card__image{
	aspect-ratio: var(--service-card-ratio);
}

.service-grid .service-card__more .wp-block-button__link{
	font-size: var(--service-card-btn-size);
	font-weight: 600;
	text-transform: uppercase;
}

/* ==================== SERVICE PAGE: /service/<услуга>/ (templates/single-service.html) ==================== */

/* .catalog-page__main.service-single > post-featured-image.service-single__image + post-content.service-single__content
   + webmaster/order-form.service-single__order. Desktop: photo floats left and the text wraps it, «Заказать» under the text.
   ≤1200px: column photo → «Заказать» → text (as in the 768/320 mockups); ≤600px the photo goes edge to edge.
   The news page (templates/single-news.html) reuses these classes without the order form; its date — news.css. */

.catalog-page .service-single{
	display: flow-root;
}

.service-single .service-single__image{
	float: left;
	width: var(--service-image-width);
	margin: 0 var(--service-image-gap) var(--service-image-gap) 0;
	aspect-ratio: var(--service-image-ratio);
	background: var(--catalog-image-bg);
	overflow: hidden;
}

.service-single .service-single__image img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Core gives post-content display:flow-root — that turns it into a column beside the photo instead of wrapping it. */
.service-single .service-single__content{
	display: block;
	margin: 0;
	font-size: var(--catalog-text-size);
	line-height: 1.5;
	color: var(--color-black);
}

.service-single .service-single__content > *{
	margin: 0 0 1em;
}

.service-single .service-single__content > :last-child{
	margin-bottom: 0;
}

.service-single .service-single__order{
	--order-btn-height: var(--service-order-height);
	--order-btn-size: var(--service-order-size);
	clear: both;
	width: var(--service-order-width);
	max-width: 100%;
	margin: var(--service-order-top) 0 0;
}

@media (max-width: 1200px){
	.catalog-page .service-single{
		display: flex;
		flex-direction: column;
		gap: var(--service-stack-gap);
	}

	.service-single .service-single__image{
		float: none;
		order: 0;
		width: calc(100% + 2 * var(--service-image-bleed));
		margin: 0 calc(-1 * var(--service-image-bleed));
	}

	.service-single .service-single__order{
		order: 1;
		margin: 0;
	}

	.service-single .service-single__content{
		order: 2;
	}
}

/* ==================== HOME: «Услуги» (patterns/home-services.php) ==================== */

/* .home-services > h2.__title + query.__query > ul.__list > li > .__item (post-featured-image.__image + post-title.__name)
   + buttons.__more «Посмотреть все» (button styles shared with .home-categories__all, catalog.css).
   Tiles: photo fills the tile, the name sits on a dark bar at the bottom; the name link covers the whole tile (::after).
   Columns 4 / 2 (≤1200) / 1 (≤600) — --home-services-*. Only services with «Показывать на главной» (filter webmasterHome).
   The home «Новости» tiles (.home-news, news.css) share the container, title, tile, photo and link rules. */

.home-services,

.home-news{
	max-width: var(--container-width);
	margin-left: auto;
	margin-right: auto;
	padding: 0 15px;
}

.home-services .home-services__title,

.home-news .home-news__title{
	margin: 0 0 var(--home-title-gap);
	font-size: var(--catalog-title-size);
	font-weight: 700;
	line-height: 1.2;
	color: var(--color-black);
}

.home-services .home-services__query,

.home-news .home-news__query{
	margin: 0;
}

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

.home-services .home-services__list > li,

.home-news .home-news__list > li{
	margin: 0;
}

/* isolation: the photo goes under the (non-positioned) name bar with z-index:-1 without leaving the tile. */
.home-services .home-services__item,
.home-news .home-news__item{
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	aspect-ratio: var(--home-services-ratio);
	margin: 0;
	overflow: hidden;
	background: var(--catalog-image-bg);
}

.home-services .home-services__image,

.home-news .home-news__image{
	position: absolute;
	inset: 0;
	z-index: -1;
	margin: 0;
}

.home-services .home-services__image img,

.home-news .home-news__image img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}

.home-services .home-services__item:hover .home-services__image img,

.home-news .home-news__item:hover .home-news__image img{
	transform: scale(1.05);
}

.home-services .home-services__name{
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--home-services-bar);
	margin: 0;
	padding: 8px 12px;
	background: var(--home-services-bar-bg);
	color: #fff;
	font-size: var(--home-services-name-size);
	font-weight: 800;
	line-height: 1.2;
	text-align: center;
	text-transform: uppercase;
	transition: background .2s ease;
}

.home-services .home-services__item:hover .home-services__name{
	background: rgba(0, 0, 0, .85);
}

.home-services .home-services__name a,

.home-news .home-news__name a{
	color: inherit;
	text-decoration: none;
}

.home-services .home-services__name a::after,

.home-news .home-news__name a::after{
	content: "";
	position: absolute;
	inset: 0;
}