/**
 * Обо мне, Услуги и цены, Контакты.
 */

/* Реальное фото — поясной портрет (голова + бабочка + камера в руках) на
   почти квадратном кадре, с считаными пикселями фона над волосами. Никакой
   object-position не добавит отступа, которого нет в исходнике — растянутый
   на всю ширину узкий баннер неизбежно резал либо макушку, либо смысл кадра.
   Вместо этого показываем фото компактным контейнером ближе к его
   собственным пропорциям — обрезаем совсем немного, по минимуму. */
.ls-about-cover {
	max-width: 640px;
	margin-inline: auto;
	padding-top: var(--ls-space-lg);
}

.ls-about-cover img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center 8%;
}

.ls-about-body { padding-block: var(--ls-space-xl); }
.ls-about-body > *:not(:first-child) { margin-top: var(--ls-space-md); }

.ls-service-card--full {
	padding: var(--ls-space-lg);
	border: 1px solid var(--ls-color-line);
	display: flex;
	flex-direction: column;
	gap: var(--ls-space-sm);
}

.ls-service-card__specs {
	display: flex;
	flex-direction: column;
	gap: var(--ls-space-2xs);
	padding-block: var(--ls-space-sm);
	border-block: 1px solid var(--ls-color-line);
}

.ls-service-card__specs > div { display: flex; justify-content: space-between; gap: var(--ls-space-sm); }
.ls-service-card__specs dt { color: var(--ls-color-muted); }
.ls-service-card__specs dd { margin: 0; }

.ls-service-card__block ul { display: flex; flex-direction: column; gap: var(--ls-space-3xs); margin-top: var(--ls-space-2xs); }

.ls-contacts-grid {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: var(--ls-space-2xl);
	padding-block: var(--ls-space-xl) var(--ls-space-2xl);
	align-items: start;
}

@media (max-width: 800px) {
	.ls-contacts-grid { grid-template-columns: 1fr; }
}

.ls-contacts-info__list {
	display: flex;
	flex-direction: column;
	gap: var(--ls-space-sm);
	margin-bottom: var(--ls-space-lg);
}

.ls-contacts-info__list dt { font-size: var(--ls-fs-small); color: var(--ls-color-muted); }
.ls-contacts-info__list dd { margin: 0; font-family: var(--ls-font-display); font-size: var(--ls-fs-h3); }

.ls-contacts-info__messengers {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ls-space-sm);
	margin-bottom: var(--ls-space-lg);
}

.ls-contacts-info__social {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ls-space-sm);
	margin-bottom: var(--ls-space-lg);
}

.ls-contacts-map {
	display: inline-block;
	padding-block: var(--ls-space-sm);
	border-top: 1px solid var(--ls-color-line);
	color: var(--ls-color-muted);
}

.ls-contacts-map:hover, .ls-contacts-map:focus-visible { color: var(--ls-color-accent); }