/* Каталог специалистов — V1 «Витрина» (ACK
   yd-catalog-people-2026-10-09-confirm-1791550749826, winner v1;
   макет-источник vc-batch2/build.py V1X/V1_MOBILE).
   Подключается только на /specialists из views/specialists.templ.
   База = все ширины (mobile: фото сверху, одна колонка); слой ≥900px —
   desktop-витрина: 2 крупные колонки, фото слева 200×226, крупная типографика.
   Токены — из public/app.css; primary-действия — терракота #C2410C
   (решение турнира S2, TestAppCSS_PrimaryActionColorContract). */

/* ── Шапка страницы: заголовок слева (счётчик — в шапке сетки ниже) ── */
.pg-head { text-align: left; max-width: none; margin: 0 0 var(--sp-5); }
.pg-head .lead { max-width: 560px; margin: 6px 0 0; }

/* ── Карточка: имя-ссылка терракотой (макет V1), клик поверх stretched-ссылки */
.vcard-name a { position: relative; z-index: 1; color: #C2410C; text-decoration: none; }
.vcard-name a:hover { color: #9A3412; }

/* ── Метка пресетов и футер-зона списка — только витрина ── */
.specs-presets-label { display: none; }
.list-foot { display: none; }

/* ── F-044: активный topic-пресет — терракотовая обводка + тёплый фон,
   без новых оттенков (та же пара #C2410C + --primary-tint, что у CTA) ── */
.specs-presets .chip--active { border-color: #C2410C; background: var(--primary-tint); }

/* ── Карточка V1: строки 1–4 ── */
.vcard-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.vcard-top .rating { font-size: 14px; white-space: nowrap; }
.spec-name { font-size: 18px; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; margin: 0; }
/* fb42 (B8-3 V3): сводный бейдж «Верифицированный специалист» — pill-канон
   .badge badge--coral из app.css; локально только отступ от строки имени. */
.vcard-verified { margin-top: 6px; }
.vcard-meta { font-size: 14px; color: var(--muted); }
.vcard-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0; }
.vcard-tags .chip { font-size: 12px; padding: 4px 11px; }
.vcard-bio {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 14px;
	color: var(--muted);
	line-height: 1.55;
	margin: 0;
}

/* Строка 4 — футер карточки: цена слева крупно, CTA справа, ОБЩАЯ нижняя
   граница (align-items:flex-end ⇒ price.bottom == CTA.bottom; директива
   владельца о «зоне суммы», браузерный тест меряет ≤2px). */
.vcard-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-3); margin-top: auto; padding-top: var(--sp-3); border-top: 1px solid var(--border); }
.vcard-pricecol { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vcard-price { font-size: 18px; font-weight: 500; color: var(--text); white-space: nowrap; }
.vcard-price em { font-style: normal; font-size: 13px; font-weight: 500; color: var(--muted); }
.vcard-slots { font-size: 13px; font-weight: 600; color: var(--primary); }
.vcard-foot .spec-link { flex: none; font-size: 14px; padding: 11px 20px; border-radius: 11px; }

/* ── W9 / task-63 П.7: CTA не заходит в коридор фиксированного help-FAB ──
   На одноколоночных ширинах (<900) CTA «Профиль и запись» прижат к правому
   краю карточки — ровно под фиксированный help-FAB (на m390 измерено
   пересечение в точке ~(335,804)). Футер карточки резервирует правый отступ
   под коридор: габариты FAB живут в токенах app.css (--help-fab-size +
   --help-fab-right: 56+12 на ≤639px, 64+16 выше), +8px зазор; flex-wrap
   переносит CTA на отдельную строку, когда цена + CTA в сжатую ширину не
   помещаются — перенос уводит CTA влево от коридора. Прецедент ухода от
   коридора — .profile-booking (specialist.templ, «Keep all card content
   clear of the existing Help FAB»). */
@media (max-width: 899px) {
	.vcard-foot { padding-right: calc(var(--help-fab-size) + var(--help-fab-right) + 8px); flex-wrap: wrap; }
}

@media (min-width: 900px) {
	/* ── Витрина: 2 крупные колонки (макет V1, не прежняя 3-колонка) ── */
	.specs-grid--vitrina { grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); }

	/* Карточка: фото слева 200×200-пропорция-226, тело строками 1–4 */
	.specs-grid--vitrina .spec-card { flex-direction: row; gap: var(--sp-5); padding: var(--sp-5); }
	.specs-grid--vitrina .vcard-photo { width: 200px; flex: none; aspect-ratio: 200 / 226; }
	.specs-grid--vitrina .vcard-photo img { object-position: center; }
	.specs-grid--vitrina .vcard-body { padding: 0; gap: 10px; }
	.specs-grid--vitrina .spec-name { font-size: 20px; }
	.specs-grid--vitrina .vcard-top .rating { font-size: 15px; }
	.specs-grid--vitrina .vcard-price { font-size: 20px; }

	/* ── Пресеты: метка «Быстро:» ── */
	.specs-presets-label {
		display: inline-flex;
		align-items: center;
		font-size: 13px;
		font-weight: 700;
		letter-spacing: .06em;
		text-transform: uppercase;
		color: var(--muted);
		margin-right: var(--sp-1);
	}

	/* ── Футер-зона списка: серверной пагинации нет, только текст ── */
	.list-foot {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--sp-3);
		padding: var(--sp-7) 0;
	}
	.lf-text { font-size: 15px; color: var(--muted); }
}