/* Городская посадочная /pl/<город>/ (src/city.mjs). Подключается после blog.css:
   шапка, подвал, кнопки, форма и переменные темы — оттуда, здесь только своя вёрстка.
   Цвета — только переменные темы; у карты свои, чтобы её можно было перекрасить
   отдельно от страницы. Анимация — только если человек не просил систему двигать меньше. */

.city {
  --map-land: #e3f1f3;
  --map-edge: #a9d3d8;
  --map-line: rgba(11, 143, 151, .28);
  --map-dot: #0b8f97;
  --map-on: #eb8b11;
  --map-pc: #0b1d26;
  --map-pc-in: #19bcc6;
}
:root[data-theme="dark"] .city {
  --map-land: rgba(65, 225, 232, .13);
  --map-edge: rgba(65, 225, 232, .55);
  --map-line: rgba(65, 225, 232, .35);
  --map-dot: #41e1e8;
  --map-on: #ffa62b;
  --map-pc: #163c4a;
  --map-pc-in: #41e1e8;
}

.cl { max-width: var(--w, 1120px); margin: 0 auto; padding: 0 20px 40px; }

/* Первый экран: текст слева, карта справа; на телефоне карта под кнопками. */
.cl-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 32px; align-items: center; padding: 28px 0 36px; }
.cl-hero h1 { font: 400 clamp(1.9rem, 4.2vw, 3rem)/1.12 var(--font-display); color: var(--ink); margin: 6px 0 14px; letter-spacing: -.01em; }
.cl-eyebrow { display: inline-block; margin: 0; padding: 6px 12px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font: 600 .85rem var(--font-body); }
.cl-lead { font-size: 1.12rem; line-height: 1.55; color: var(--text); margin: 0 0 22px; }
.cl-ctas { display: flex; flex-wrap: wrap; gap: 10px 14px; margin: 0; }
.cl-ctas .btn { padding: 14px 26px; font-weight: 700; font-size: 1rem; }
.cl-ctas .soft { margin: 0; padding: 13px 22px; }

.cl-map { margin: 0; position: relative; }
.cl-map figcaption { margin-top: 6px; text-align: center; font: 600 1rem var(--font-body); color: var(--ink); }
.citymap { display: block; width: 100%; height: auto; }
.citymap .pl { fill: var(--map-land); stroke: var(--map-edge); stroke-width: 2; stroke-linejoin: round; }
.citymap .ln { fill: none; stroke: var(--map-line); stroke-width: 1.6; }
.citymap .ln.on { stroke: var(--map-on); stroke-width: 3; }
.citymap .pt { fill: var(--map-dot); }
.citymap .pt.on { fill: var(--map-on); }
.citymap .ring { fill: none; stroke: var(--map-on); stroke-width: 2; opacity: .5; }
.citymap .lbl { font: 700 22px var(--font-body); fill: var(--ink); paint-order: stroke; stroke: var(--bg); stroke-width: 5px; }
.citymap .scr, .citymap .base { fill: var(--map-pc); }
.citymap .scr-in { fill: var(--map-pc-in); opacity: .18; }
.citymap .cam { fill: var(--map-on); }
.citymap .cam-in { fill: #fff; }

@media (prefers-reduced-motion: no-preference) {
  .citymap .ln { stroke-dasharray: 6 8; animation: cl-flow 2.4s linear infinite; }
  .citymap .ln.on { stroke-dasharray: 10 8; animation-duration: 1.4s; }
  .citymap .ring { transform-box: fill-box; transform-origin: center; animation: cl-pulse 2s ease-out infinite; }
}
@keyframes cl-flow { to { stroke-dashoffset: -28; } }
@keyframes cl-pulse { from { transform: scale(.6); opacity: .8; } to { transform: scale(1.6); opacity: 0; } }

/* Разделы */
.cl-sec { padding: 34px 0; border-top: 1px solid var(--line); }
.cl-sec h2 { font: 400 clamp(1.4rem, 2.6vw, 1.9rem)/1.2 var(--font-display); color: var(--ink); margin: 0 0 10px; }
.cl-sub { color: var(--muted); margin: 0 0 18px; }
.cl-sec p { line-height: 1.6; color: var(--text); }

.cl-answer { border-top: 0; }
.cl-answer p { font-size: 1.08rem; max-width: 760px; }

.cl-grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.cl-dir { display: grid; gap: 6px; padding: 18px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); text-decoration: none; transition: border-color .15s, transform .15s; }
.cl-dir:hover { border-color: var(--accent); transform: translateY(-2px); }
.cl-dir b { color: var(--ink); font-size: 1.02rem; line-height: 1.3; }
.cl-dir span:last-child { color: var(--muted); font-size: .92rem; }
.cl-n { font: 400 1.4rem var(--font-display); color: var(--accent); }

.cl-steps { list-style: none; counter-reset: s; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 0; margin: 16px 0 0; }
.cl-steps li { counter-increment: s; display: grid; gap: 6px; padding: 18px; border-radius: 18px; background: var(--panel); }
.cl-steps li::before { content: counter(s); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 700; }
.cl-steps b { color: var(--ink); }
.cl-steps span { color: var(--muted); font-size: .94rem; }

.cl-phones { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 18px; margin-top: 16px; }
.cl-phones figure { margin: 0; }
.cl-phones img { width: 100%; height: auto; border-radius: 18px; border: 1px solid var(--line); }
.cl-phones figcaption { margin-top: 6px; color: var(--muted); font-size: .85rem; line-height: 1.35; font-style: normal; text-align: left; }

.cl-online { }
.cl-online > p { max-width: 760px; }
.cl-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.cl-tile { display: grid; gap: 4px; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); border-left: 4px solid var(--accent); }
.cl-tile b { color: var(--ink); }
.cl-tile span { color: var(--muted); font-size: .94rem; }

.cl-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(176px, 1fr); gap: 14px; overflow-x: auto; padding-bottom: 6px; margin-top: 16px; scroll-snap-type: x mandatory; }
.cl-strip figure { margin: 0; scroll-snap-align: start; }
.cl-strip img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 14px; }
.cl-strip.sq img { aspect-ratio: 1; }
.cl-strip figcaption { display: grid; margin-top: 6px; font-style: normal; text-align: left; }
.cl-strip figcaption b { color: var(--ink); }
.cl-strip figcaption span { color: var(--muted); font-size: .88rem; }

.cl-start { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cl-card { padding: 24px; border-radius: 22px; background: var(--panel); border: 1px solid var(--line); }
.cl-card h2 { font-size: 1.4rem; }
.cl-note { color: var(--muted); font-size: .88rem; margin-bottom: 0; }
.cl-price ul { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 8px; }
.cl-price li { display: grid; gap: 2px; }
.cl-price li b { color: var(--ink); }
.cl-price li span { color: var(--text); }

.cl-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 14px; }
.cl-links a { display: grid; gap: 4px; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--line); text-decoration: none; background: var(--surface); }
.cl-links a:hover { border-color: var(--accent); }
.cl-links b { color: var(--accent); }
.cl-links span { color: var(--muted); font-size: .92rem; }

.cl-faq details { border: 1px solid var(--line); border-radius: 14px; padding: 14px 18px; margin: 10px 0; background: var(--surface); }
.cl-faq summary { cursor: pointer; font-weight: 600; color: var(--ink); }
.cl-faq details p { margin: 10px 0 0; }

/* Запись — как форма на главной: заголовок и подзаголовок сверху, под ними форма
   шириной до 520 px, без внешней плашки вокруг всего блока. */
.cl-end > p { margin: 0 0 20px; max-width: 760px; }
.cl-end .form-wrap { max-width: 520px; }

@media (max-width: 900px) {
  .cl-hero { grid-template-columns: 1fr; gap: 18px; padding-top: 16px; }
  .cl-grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cl-steps, .cl-start, .cl-grid2 { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .cl { padding: 0 16px 32px; }
  .cl-grid4 { grid-template-columns: 1fr; }
  .cl-phones { grid-auto-columns: 42%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
  .cl-phones figure { scroll-snap-align: start; }
  .cl-ctas .btn { flex: 1 1 100%; text-align: center; justify-content: center; }
}