.bl-services-head { margin-bottom: clamp(2rem, 4vw, 3.25rem); max-width: 760px; }
.bl-services-head .bl-heading { overflow-wrap: anywhere; }
.bl-text-center .bl-services-head { margin-inline: auto; }

.bl-services-grid { display: grid; gap: clamp(1.25rem, 3vw, 2rem); }
.bl-services--grid .bl-services-grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) {
	.bl-services--grid .bl-services-grid--cols-2,
	.bl-services--grid .bl-services-grid--cols-3,
	.bl-services--grid .bl-services-grid--cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
	.bl-services--grid .bl-services-grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.bl-services--grid .bl-services-grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	/* В узком контейнере четыре карточки схлопываются до нечитаемой ширины. */
	.bl-services--grid .bl-container-narrow .bl-services-grid--cols-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Единственная карточка не должна растягиваться во всю ширину блока. */
.bl-services--grid .bl-services-grid:has(> :only-child) { grid-template-columns: minmax(0, 26rem); }

.bl-services--list .bl-services-grid { grid-template-columns: minmax(0, 1fr); }
.bl-services--list .bl-services-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
@media (min-width: 641px) {
	/* Колонка под фото резервируется только когда фото действительно есть,
	   иначе текст сжимался в 240px, а справа оставалась пустота. */
	.bl-services--list .bl-services-card:has(.bl-services-card__media) {
		grid-template-columns: 240px minmax(0, 1fr);
	}
}

.bl-services-card {
	border-radius: var(--bl-card-radius);
	overflow: hidden;
	background: var(--bl-surface);
	border: var(--bl-border-width, 1px) solid var(--bl-border);
	box-shadow: var(--bl-shadow, none);
	transition: transform .2s ease, box-shadow .2s ease;
}
.bl-hover--lift .bl-services-card:hover { transform: translateY(-6px); }
.bl-hover--zoom .bl-services-card__media img { transition: transform .3s ease; }
.bl-hover--zoom .bl-services-card:hover .bl-services-card__media img { transform: scale(1.06); }

.bl-services-card { display: flex; flex-direction: column; }
.bl-services-card__media { position: relative; overflow: hidden; }
/* Бейдж карточки определён в блоке «Каталог»; на странице без каталога
   его стили не подгружаются, поэтому витрина услуг описывает его у себя. */
.bl-services .bl-card-badge {
	position: absolute;
	top: .75rem;
	left: .75rem;
	z-index: 2;
	max-width: calc(100% - 1.5rem);
	padding: .3rem .7rem;
	border-radius: var(--bl-radius-pill);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: uppercase;
	overflow-wrap: anywhere;
	color: var(--bl-accent-contrast);
	background: var(--bl-accent);
}
.bl-services-card__body {
	/* Отступ не меньше скругления: у карточки overflow: hidden, и при крупном
	   радиусе текст в углу иначе срезается. */
	padding: max(1.5rem, calc(var(--bl-card-radius, 1.5rem) * .75)) max(1.6rem, calc(var(--bl-card-radius, 1.6rem) * .75));
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
}
.bl-services-card__body h3 {
	margin: 0 0 .5em;
	font-size: 1.1875rem;
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.25;
	overflow-wrap: anywhere;
}
.bl-services-card__body h3 a { color: inherit; text-decoration: none; }
.bl-services-card__body h3 a:hover { color: var(--bl-accent); }
.bl-services-card__body p { margin: 0; color: var(--bl-muted); font-size: .9375rem; line-height: 1.55; overflow-wrap: anywhere; }

.bl-services-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem 1rem;
	flex-wrap: wrap;
	margin-top: auto;
	padding-top: 1.5rem;
}
.bl-services-card__price {
	display: flex;
	flex-direction: column;
	font-weight: 750;
	font-size: 1.0625rem;
	letter-spacing: -0.01em;
	line-height: 1.25;
	color: var(--bl-accent);
}
/* Акцент на тёмном фоне даёт всего ~3:1 — для мелкого текста цены этого мало,
   поэтому там он подмешивается к основному цвету текста. */
.bl-theme-dark .bl-services-card__price,
.bl-bg-image .bl-services-card__price,
.bl-bg-video .bl-services-card__price { color: color-mix(in srgb, var(--bl-accent) 45%, var(--bl-text)); }
.bl-services-card__price small { font-size: .72rem; font-weight: 500; color: var(--bl-muted); letter-spacing: 0; }
.bl-services-card__price del { font-size: .8rem; font-weight: 500; color: var(--bl-muted); }
.bl-services-card__footer .bl-btn { padding: .7em 1.3em; font-size: .9375rem; max-width: 100%; overflow-wrap: anywhere; }

.bl-services-more { text-align: center; margin-top: clamp(2rem, 4vw, 3rem); }