/* Продвижение на Яндекс Картах. Основа — style_page_audit_site.css (body.audit-site)
   и хаб style_page_yandex_direct.css (body.yandex-direct): кнопки первого экрана,
   проблемы, работы с рамкой цены. Здесь своё: карта района с карточкой организации,
   пять факторов ранжирования, отзывы, «нужен ли Яндекс Бизнес», ниши и ссылки на
   2ГИС и Авито. Цвета — только токены палитры. */

.ym-karty .ma-hero h1 { margin: 0 0 30px; font-size: clamp(44px, 5.2vw, 78px); }

/* Первый экран: карта района, наша точка и карточка над ней. */
.ym-karty .ym-art { position: relative; width: 100%; aspect-ratio: 1.04; isolation: isolate; }
.ym-karty .ym-map { position: absolute; inset: 4% 2% 10% 8%; overflow: hidden; border: 1px solid var(--k-line); border-radius: 24px; background: var(--k-surface-2); transform: rotate(-3deg); box-shadow: 0 30px 50px -36px var(--k-muted); }
.ym-karty .ym-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ym-karty .ym-map__block { fill: var(--k-sunken); }
.ym-karty .ym-map__road { stroke: var(--k-surface); stroke-width: 14; }
.ym-karty .ym-map__river { stroke: var(--k-accent-soft); stroke-width: 18; stroke-linecap: round; }
.ym-karty .ym-pin { position: absolute; left: var(--x); top: var(--y); width: 18px; height: 18px; margin: -18px 0 0 -9px; border-radius: 50% 50% 50% 0; background: var(--k-muted-soft); transform: rotate(-45deg); }
.ym-karty .ym-pin--me { z-index: 2; width: 34px; height: 34px; margin: -34px 0 0 -17px; background: var(--k-accent); box-shadow: 0 0 0 10px var(--k-accent-pale); }
.ym-karty .ym-pin--me i { position: absolute; left: 11px; top: 11px; width: 12px; height: 12px; border-radius: 50%; background: var(--k-on-accent); }
.ym-karty .ym-card { position: absolute; z-index: 3; right: 0; top: 34%; display: flex; flex-direction: column; gap: 6px; width: 56%; padding: 18px 20px; background: var(--k-overlay); border: 1px solid var(--k-line); border-radius: 16px; box-shadow: 0 24px 44px -28px var(--k-muted); transform: rotate(2.5deg); font: 400 13px/1.4 Roboto, sans-serif; color: var(--k-muted); }
.ym-karty .ym-card__photo { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 4px; height: 70px; margin-bottom: 6px; }
.ym-karty .ym-card__photo i { border-radius: 6px; background: linear-gradient(135deg, var(--k-accent-soft), var(--k-sunken)); }
.ym-karty .ym-card b { font: 500 18px/1.3 Roboto, sans-serif; color: var(--k-ink); }
.ym-karty .ym-card__rating { display: flex; align-items: center; gap: 8px; color: var(--k-ink-2); }
/* Звёзды рейтинга — цвет интерфейса Яндекс Карт, не наш (CLAUDE.md, правило 4):
   живёт здесь, а не в палитре. На тёмной бумаге читается так же. */
.ym-karty { --ym-star: #f8b500; }
.ym-karty .ym-stars { display: inline-block; width: 70px; height: 12px; font-style: normal;
    background: linear-gradient(90deg, var(--ym-star) calc(var(--r) / 5 * 100%), var(--k-line) 0);
    -webkit-mask: repeating-linear-gradient(90deg, #000 0 12px, transparent 12px 14.5px); mask: repeating-linear-gradient(90deg, #000 0 12px, transparent 12px 14.5px); }
.ym-karty .ym-card__actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ym-karty .ym-card__actions i { padding: 5px 12px; border-radius: 20px; font: 400 12px/1.3 Roboto, sans-serif; font-style: normal; color: var(--k-ink-2); background: var(--k-sunken); }
.ym-karty .ym-card__actions i:first-child { color: var(--k-on-accent); background: var(--k-accent); }
.ym-karty .ym-query { position: absolute; z-index: 4; left: 0; top: 0; display: flex; align-items: center; gap: 10px; padding: 12px 20px; background: var(--k-overlay); border: 1px solid var(--k-line); border-radius: 30px; box-shadow: 0 18px 34px -24px var(--k-muted); transform: rotate(-2deg); font: 400 16px/1.3 Roboto, sans-serif; color: var(--k-ink); }
.ym-karty .ym-query i { color: var(--k-muted); }

/* Пять факторов: номер в кольце, текст под ним. */
.ym-karty .ym-factors { padding-top: 60px; }
.ym-karty .ym-factors__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px; margin: 0; padding: 0; list-style: none; }
.ym-karty .ym-factors__list li { position: relative; padding-top: 30px; border-top: 1px solid var(--k-line); }
.ym-karty .ym-factors__num { position: absolute; top: -17px; left: 0; display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--k-accent); border-radius: 50%; background: var(--k-paper); color: var(--k-accent-ink); font: 400 15px/1 Oswald, sans-serif; }
.ym-karty .ym-factors__list h3 { margin: 0 0 12px; font: 400 21px/1.3 Roboto, sans-serif; }
.ym-karty .ym-factors__list p { margin: 0; font: 300 16px/1.6 Roboto, sans-serif; color: var(--k-ink-2); }
.ym-karty .ym-note { max-width: 900px; margin: 34px auto 0; text-align: center; }

/* Отзывы: текст слева, схема рамкой справа. */
.ym-karty .ym-reviews { padding-bottom: 60px; }
.ym-karty .ym-h2 { margin: 0 0 30px; font: 300 clamp(36px, 3.8vw, 54px)/1.1 Oswald, sans-serif; text-transform: uppercase; color: var(--k-ink); text-wrap: balance; }
.ym-karty .ym-reviews__text p { margin: 0 0 22px; font: 300 19px/1.65 Roboto, sans-serif; color: var(--k-ink-2); }
.ym-karty .ym-reviews__text p:last-child { margin-bottom: 0; }
.ym-karty .ym-reviews__text .ym-reviews__lead { font: 200 clamp(22px, 1.9vw, 27px)/1.45 Roboto, sans-serif; color: var(--k-ink); }
.ym-karty .ma-frame__icon { font: 400 18px/1 Oswald, sans-serif; }

/* Цена: подзаголовки раздела, «нужен ли Яндекс Бизнес» и этапы. */
.ym-karty .ym-subtitle { margin: 110px 0 44px; font: 300 clamp(30px, 2.8vw, 40px)/1.15 Oswald, sans-serif; text-transform: uppercase; color: var(--k-ink); }
.ym-karty .ym-need { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--k-line); }
.ym-karty .ym-need article { padding: 36px; }
.ym-karty .ym-need article + article { border-left: 1px solid var(--k-line); }
.ym-karty .ym-need h4 { margin: 0 0 18px; font: 300 30px/1.2 Oswald, sans-serif; text-transform: uppercase; color: var(--k-ink); }
.ym-karty .ym-need ul { margin: 0; padding-left: 20px; }
.ym-karty .ym-need li { padding-bottom: 10px; font: 300 17px/1.55 Roboto, sans-serif; color: var(--k-ink-2); }
.ym-karty .ma-steps__list h4 { margin: 62px 0 12px; font: 400 23px/1.3 Roboto, sans-serif; color: var(--k-ink); }

/* Кому подходит: плашки ниш. */
.ym-karty .ym-who { padding-top: 40px; }
.ym-karty .ym-who__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 0; padding: 0; list-style: none; }
.ym-karty .ym-who__list li { padding: 12px 22px; border: 1px solid var(--k-line); border-radius: 40px; background: var(--k-surface); font: 400 18px/1.3 Roboto, sans-serif; color: var(--k-ink-2); }

/* 2ГИС и Авито: две карточки со ссылками. */
.ym-karty .ym-links { padding-top: 20px; }
.ym-karty .ym-links__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.ym-karty .ym-links__grid article { padding: 40px 44px; border: 1px solid var(--k-line); border-radius: 20px; background: linear-gradient(120deg, var(--k-accent-pale), var(--k-surface) 70%); }
.ym-karty .ym-links__grid h2 { margin: 0 0 14px; font: 300 clamp(28px, 2.6vw, 38px)/1.15 Oswald, sans-serif; text-transform: uppercase; color: var(--k-ink); }
.ym-karty .ym-links__grid p { margin: 0 0 20px; font: 300 18px/1.6 Roboto, sans-serif; color: var(--k-ink-2); }
.ym-karty .ma-faq .ma-title a { color: var(--k-accent-ink); }

:root.pr-dark .ym-karty :is(.ym-card, .ym-query, .ym-map), :root[data-theme="dark"] .ym-karty :is(.ym-card, .ym-query, .ym-map) { box-shadow: 0 26px 44px -26px var(--k-dark); }

@media (max-width: 1199px) {
    .ym-karty .ym-factors__list { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 48px; }
}
@media (max-width: 991px) {
    .ym-karty .ma-hero h1 { font-size: 64px; }
    .ym-karty .ym-art { max-width: 580px; margin: 10px auto 0; }
    .ym-karty .ym-need, .ym-karty .ym-links__grid { grid-template-columns: minmax(0, 1fr); }
    .ym-karty .ym-need article + article { border-left: 0; border-top: 1px solid var(--k-line); }
    .ym-karty .ym-subtitle { margin-top: 80px; }
}
@media (max-width: 767px) {
    .ym-karty .ma-hero h1 { font-size: clamp(34px, 10vw, 60px); }
    .ym-karty .ym-art { aspect-ratio: .9; }
    .ym-karty .ym-card { width: 72%; top: 40%; padding: 12px 14px; font-size: 11px; }
    .ym-karty .ym-card b { font-size: 15px; }
    .ym-karty .ym-card__photo { height: 44px; }
    .ym-karty .ym-card__actions i { padding: 4px 9px; font-size: 11px; }
    .ym-karty .ym-query { padding: 9px 14px; font-size: 14px; }
    .ym-karty .ym-factors__list { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
    .ym-karty .ym-h2 { font-size: 32px; margin-bottom: 22px; }
    .ym-karty .ym-reviews__text p { font-size: 17px; }
    .ym-karty .ym-reviews__text .ym-reviews__lead { font-size: 20px; }
    .ym-karty .ym-subtitle { margin: 60px 0 30px; font-size: 28px; }
    .ym-karty .ym-need article { padding: 26px 22px; }
    .ym-karty .ym-need h4 { font-size: 25px; }
    .ym-karty .ym-need li { font-size: 16px; }
    .ym-karty .ma-steps__list h4 { margin: 0 0 10px; font-size: 21px; }
    .ym-karty .ym-who__list li { padding: 9px 16px; font-size: 16px; }
    .ym-karty .ym-links__grid article { padding: 28px 22px; border-radius: 16px; }
    .ym-karty .ym-links__grid p { font-size: 16px; }
}

/* Карточка 2ГИС у края карты: та же точка во второй площадке. */
.ym-karty .ym-gis { position: absolute; z-index: 4; left: 2%; bottom: 3%; display: flex; flex-direction: column; gap: 2px; padding: 12px 18px; background: var(--k-overlay); border: 1px solid var(--k-line); border-radius: 14px; box-shadow: 0 18px 34px -24px var(--k-muted); transform: rotate(-3deg); font: 400 13px/1.3 Roboto, sans-serif; color: var(--k-muted); }
.ym-karty .ym-gis b { font: 500 17px/1.2 Roboto, sans-serif; color: var(--k-ink); }
@media (max-width: 767px) {
    .ym-karty .ym-gis { padding: 8px 12px; font-size: 11px; }
    .ym-karty .ym-gis b { font-size: 14px; }
}