/* ============================================================
   Persentr Energy Map — page styles for districts & localities
   Used by /map/<district>/ and /map/<district>/<locality>/
   ============================================================ */

/* PROMPT-217: шрифт Onest (как на главной карте), вместо Inter */
@import url('https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700&display=swap');

:root {
  --ph-bg: #ffffff;
  --ph-page: #FAF8F8;        /* PROMPT-236: тёплый светло-серый фон (эталон persentr.ru) */
  --ph-bg-soft: #f7f7f5;
  --ph-bg-muted: #f0f0ec;
  --ph-ink: #1a1a1a;
  --ph-ink-soft: #555;
  --ph-ink-mute: #888;
  --ph-line: #e8e8e4;
  --ph-line-soft: #f0f0ec;

  --ph-green: #3AC47D;
  --ph-green-dark: #2ea866;
  /* PROMPT-234b: бренд-лайм (как лого) для CTA первого экрана редизайна. */
  --ph-lime: #8acb4c;
  --ph-lime-dark: #79b73f;
  --ph-blue: #2B9DFF;
  --ph-red: #dc2626;

  --ph-risk-low: #4ade80;
  --ph-risk-moderate: #15803d;
  --ph-risk-elevated: #fb923c;
  --ph-risk-high: #f97316;
  --ph-risk-chronic: #dc2626;
  --ph-risk-out: #94a3b8;

  --ph-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --ph-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
  --ph-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12);

  --ph-radius-sm: 6px;
  --ph-radius-md: 10px;
  --ph-radius-lg: 16px;

  --ph-content-max: 1120px;
  --ph-narrative-max: 720px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  /* PROMPT-217: единая типографика с главной картой — Onest */
  font-family: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--ph-ink);
  background: var(--ph-page);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--ph-blue); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 {
  margin: 0 0 0.6em;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
/* PROMPT-217: H1 спокойнее (был 48px «баннер») — ~28→36px; H2 в гармонию */
h1 { font-size: clamp(1.75rem, 3vw, 2.25rem); }
h2 { font-size: clamp(1.3rem, 2.2vw, 1.6rem); margin-top: 0; }
h3 { font-size: 1.15rem; }

p { margin: 0 0 1em; }

img { max-width: 100%; display: block; }

/* ============================================================
   HEADER
   ============================================================ */
.ph-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 12px 24px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--ph-line);
  box-shadow: var(--ph-shadow-sm);
}

.ph-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ph-ink);
  text-decoration: none;
  font-weight: 700;
}
.ph-logo:hover { text-decoration: none; }
/* PROMPT-217: фирменный wordmark-лого (как на главной карте, #8acb4c, самодостаточен) */
.ph-logo-wordmark { height: 19px; width: auto; display: block; flex-shrink: 0; }
.ph-logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--ph-green);
  color: #fff;
  border-radius: 8px;
  font-size: 1.05rem;
}
.ph-logo-text {
  font-size: 1.05rem;
  letter-spacing: 0.02em;
}
.ph-logo-text small {
  display: block;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--ph-ink-mute);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ph-nav {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 0.95rem;
  color: var(--ph-ink-soft);
}
.ph-nav a {
  color: var(--ph-ink-soft);
  text-decoration: none;
}
.ph-nav a:hover { color: var(--ph-ink); text-decoration: none; }
.ph-nav-current {
  color: var(--ph-ink);
  font-weight: 600;
}

.ph-cta-header {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: var(--ph-green);
  color: #fff !important;
  border-radius: var(--ph-radius-md);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none !important;
  transition: background 0.15s ease, transform 0.15s ease;
}
.ph-cta-header:hover {
  background: var(--ph-green-dark);
  transform: translateY(-1px);
}

/* ============================================================
   HERO
   ============================================================ */
.ph-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  max-width: var(--ph-content-max);
  margin: 0 auto;
  padding: 48px 24px 32px;
}

.ph-hero-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}

.ph-risk-badge {
  align-self: flex-start;
  display: inline-block;
  padding: 6px 14px;
  background: var(--ph-bg-muted);
  color: #fff;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.ph-risk-badge.ph-risk-low      { background: var(--ph-risk-low); }
.ph-risk-badge.ph-risk-moderate { background: var(--ph-risk-moderate); }
.ph-risk-badge.ph-risk-elevated { background: var(--ph-risk-elevated); }
.ph-risk-badge.ph-risk-high     { background: var(--ph-risk-high); }
.ph-risk-badge.ph-risk-chronic  { background: var(--ph-risk-chronic); }
.ph-risk-badge.ph-risk-out      { background: var(--ph-risk-out); }

.ph-subtitle {
  margin: 0;
  font-size: 1.15rem;
  color: var(--ph-ink-soft);
}

.ph-iri-block {
  margin-top: 8px;
  padding: 18px 22px;
  background: var(--ph-bg-soft);
  border: 1px solid var(--ph-line);
  border-radius: var(--ph-radius-lg);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 14px 24px;
}
.ph-iri-value {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.ph-iri-number {
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ph-ink);
}
.ph-iri-label {
  font-size: 0.95rem;
  color: var(--ph-ink-soft);
}
.ph-iri-district {
  font-size: 0.9rem;
  color: var(--ph-ink-mute);
}

.ph-hero-map {
  min-height: 320px;
  background:
    repeating-linear-gradient(
      45deg,
      var(--ph-bg-soft) 0 10px,
      var(--ph-bg-muted) 10px 20px
    );
  border: 1px solid var(--ph-line);
  border-radius: var(--ph-radius-lg);
}

/* ============================================================
   SECTIONS / LAYOUT
   ============================================================ */
.ph-section {
  max-width: var(--ph-content-max);
  margin: 0 auto;
  padding: 44px 24px;
}
/* PROMPT-214: вертикальный ритм — секции не слипаются (было padding-top:16px) */
.ph-section + .ph-section { padding-top: 44px; }
/* PROMPT-214: ширина чтения — текст не на всю 1120, а ~720 (как hero-lead).
   Карта/сетка посёлков остаются широкими (свои max-width ниже). */
.ph-section > p,
.ph-section > h2,
.ph-faq p { max-width: var(--ph-narrative-max); }

.ph-section-subtitle {
  margin: -8px 0 24px;
  color: var(--ph-ink-soft);
  font-size: 1rem;
}

/* ============================================================
   NARRATIVE
   ============================================================ */
.ph-narrative {
  max-width: var(--ph-narrative-max);
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--ph-ink);
}
.ph-narrative p { margin-bottom: 1em; }
.ph-narrative p:last-child { margin-bottom: 0; }

/* ============================================================
   AFFECTED LIST
   ============================================================ */
.ph-affected-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.ph-affected-list li {
  display: grid;
  grid-template-columns: 44px 1fr;
  grid-template-rows: auto auto;
  column-gap: 14px;
  align-items: center;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid var(--ph-line);
  border-radius: var(--ph-radius-md);
  box-shadow: var(--ph-shadow-sm);
}
.ph-affected-icon {
  grid-row: 1 / 3;
  font-size: 1.8rem;
  line-height: 1;
}
.ph-affected-name {
  font-weight: 600;
  color: var(--ph-ink);
}
.ph-affected-desc {
  font-size: 0.92rem;
  color: var(--ph-ink-soft);
}

/* ============================================================
   EVIDENCE TIMELINE
   ============================================================ */
.ph-evidence-timeline {
  position: relative;
  padding-left: 28px;
}
.ph-evidence-timeline::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--ph-line);
}
.ph-evidence-item {
  position: relative;
  padding: 12px 0 12px 8px;
  border-bottom: 1px dashed var(--ph-line-soft);
}
.ph-evidence-item:last-child { border-bottom: none; }
.ph-evidence-item::before {
  content: '';
  position: absolute;
  left: -28px;
  top: 18px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ph-blue);
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--ph-line);
}
.ph-evidence-date {
  font-size: 0.85rem;
  color: var(--ph-ink-mute);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.ph-evidence-cause {
  margin-top: 2px;
  font-size: 1rem;
  color: var(--ph-ink);
}
.ph-evidence-duration {
  margin-top: 2px;
  font-size: 0.9rem;
  color: var(--ph-ink-soft);
}

/* ============================================================
   LOCALITIES GRID
   ============================================================ */
.ph-localities-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.ph-locality-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid var(--ph-line);
  border-radius: var(--ph-radius-md);
  box-shadow: var(--ph-shadow-sm);
  color: var(--ph-ink) !important;
  text-decoration: none !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  position: relative;
}
.ph-locality-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--ph-shadow-md);
  border-color: var(--ph-blue);
}
.ph-locality-name {
  font-weight: 600;
  font-size: 1.05rem;
}
.ph-locality-type {
  font-size: 0.85rem;
  color: var(--ph-ink-mute);
}
.ph-locality-iri {
  font-size: 0.9rem;
  color: var(--ph-ink-soft);
  font-weight: 500;
}
.ph-locality-installed {
  align-self: flex-start;
  margin-top: 4px;
  padding: 3px 10px;
  background: rgba(58, 196, 125, 0.12);
  color: var(--ph-green-dark);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
}
/* coloured left border by risk */
.ph-locality-card.ph-risk-low      { border-left: 4px solid var(--ph-risk-low); }
.ph-locality-card.ph-risk-moderate { border-left: 4px solid var(--ph-risk-moderate); }
.ph-locality-card.ph-risk-elevated { border-left: 4px solid var(--ph-risk-elevated); }
.ph-locality-card.ph-risk-high     { border-left: 4px solid var(--ph-risk-high); }
.ph-locality-card.ph-risk-chronic  { border-left: 4px solid var(--ph-risk-chronic); }
.ph-locality-card.ph-risk-out      { border-left: 4px solid var(--ph-risk-out); }

/* ============================================================
   SEGMENTOR
   ============================================================ */
.ph-segmentor-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.ph-segmentor-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 26px 16px;
  background: #fff;
  border: 1px solid var(--ph-line);
  border-radius: var(--ph-radius-md);
  text-align: center;
  text-decoration: none !important;
  color: var(--ph-ink) !important;
  box-shadow: var(--ph-shadow-sm);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.ph-segmentor-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--ph-shadow-md);
  border-color: var(--ph-blue);
}
.ph-seg-icon {
  font-size: 2rem;
  line-height: 1;
}
.ph-seg-label {
  font-weight: 600;
  font-size: 1rem;
}
.ph-seg-hint {
  font-size: 0.85rem;
  color: var(--ph-ink-mute);
}
.ph-segmentor-card.ph-seg-urgent {
  border: 2px solid var(--ph-red);
  background: rgba(220, 38, 38, 0.04);
}
.ph-segmentor-card.ph-seg-urgent:hover {
  background: rgba(220, 38, 38, 0.08);
  border-color: var(--ph-red);
}
.ph-segmentor-card.ph-seg-urgent .ph-seg-label {
  color: var(--ph-red);
}

/* ============================================================
   SOCIAL PROOF
   ============================================================ */
.ph-social-proof {
  max-width: var(--ph-content-max);
  margin: 0 auto;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: rgba(58, 196, 125, 0.12);
  border-top: 1px solid rgba(58, 196, 125, 0.3);
  border-bottom: 1px solid rgba(58, 196, 125, 0.3);
  text-align: left;
}
.ph-sp-icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ph-green);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  font-weight: 700;
}
.ph-sp-content {
  max-width: 780px;
}
.ph-sp-headline {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ph-ink);
}
.ph-sp-text {
  font-size: 0.95rem;
  color: var(--ph-ink-soft);
  margin-top: 4px;
}

/* ============================================================
   SUBSCRIBE / LEAD FORM
   ============================================================ */
.ph-subscribe,
.ph-lead-form {
  background: var(--ph-bg-soft);
  border-radius: var(--ph-radius-lg);
  margin-top: 16px;
}
.ph-subscribe h2,
.ph-lead-form h2 { margin-top: 0; }

.ph-subscribe-tabs {
  display: inline-flex;
  gap: 18px;
  margin-bottom: 14px;
  font-size: 0.95rem;
  color: var(--ph-ink-soft);
}
.ph-subscribe-tabs label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.ph-subscribe-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 640px;
}
.ph-subscribe-form .ph-subscribe-tabs {
  flex: 0 0 100%;
  margin-bottom: 0;
}
.ph-subscribe-form input[type="text"] {
  flex: 1 1 240px;
  padding: 12px 14px;
  font-size: 1rem;
  border: 1px solid var(--ph-line);
  border-radius: var(--ph-radius-md);
  background: #fff;
  color: var(--ph-ink);
  font-family: inherit;
}
.ph-subscribe-form input::placeholder {
  color: var(--ph-ink-mute);
  font-weight: 400;
}
.ph-subscribe-form input:focus {
  outline: none;
  border-color: var(--ph-green);
  box-shadow: 0 0 0 3px rgba(58, 196, 125, 0.2);
}
.ph-subscribe-form button {
  padding: 12px 22px;
  background: var(--ph-green);
  color: #fff;
  border: none;
  border-radius: var(--ph-radius-md);
  font-weight: 600;
  font-size: 1rem;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.ph-subscribe-form button:hover {
  background: var(--ph-green-dark);
  transform: translateY(-1px);
}

/* Lead form (locality page) */
.ph-form { max-width: 480px; }
.ph-form-row { margin-bottom: 12px; }
.ph-form input[type="text"],
.ph-form input[type="tel"] {
  width: 100%;
  padding: 12px 14px;
  font-size: 1rem;
  border: 1px solid var(--ph-line);
  border-radius: var(--ph-radius-md);
  background: #fff;
  font-family: inherit;
}
.ph-form input:focus {
  outline: none;
  border-color: var(--ph-green);
  box-shadow: 0 0 0 3px rgba(58, 196, 125, 0.2);
}
.ph-form-submit {
  width: 100%;
  padding: 14px 22px;
  background: var(--ph-green);
  color: #fff;
  border: none;
  border-radius: var(--ph-radius-md);
  font-weight: 600;
  font-size: 1.05rem;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.ph-form-submit:hover {
  background: var(--ph-green-dark);
  transform: translateY(-1px);
}
.ph-form-disclaimer {
  margin-top: 10px;
  font-size: 0.85rem;
  color: var(--ph-ink-mute);
  text-align: center;
}

/* ============================================================
   RELATED (neighbouring localities)
   ============================================================ */
.ph-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.ph-related-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--ph-line);
  border-radius: var(--ph-radius-md);
  box-shadow: var(--ph-shadow-sm);
  color: var(--ph-ink) !important;
  text-decoration: none !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ph-related-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--ph-shadow-md);
}
.ph-related-card.ph-risk-low      { border-left: 4px solid var(--ph-risk-low); }
.ph-related-card.ph-risk-moderate { border-left: 4px solid var(--ph-risk-moderate); }
.ph-related-card.ph-risk-elevated { border-left: 4px solid var(--ph-risk-elevated); }
.ph-related-card.ph-risk-high     { border-left: 4px solid var(--ph-risk-high); }
.ph-related-card.ph-risk-chronic  { border-left: 4px solid var(--ph-risk-chronic); }
.ph-related-card.ph-risk-out      { border-left: 4px solid var(--ph-risk-out); }
.ph-related-name { font-weight: 600; }
.ph-related-iri  { font-size: 0.9rem; color: var(--ph-ink-soft); }
.ph-related-type { font-size: 0.8rem; color: var(--ph-ink-mute); }

.ph-related-back {
  display: inline-block;
  margin-top: 20px;
  font-size: 0.95rem;
  color: var(--ph-blue);
}

/* ============================================================
   FOOTER
   ============================================================ */
.ph-footer {
  margin-top: 40px;
  background: var(--ph-bg-soft);
  border-top: 1px solid var(--ph-line);
}
.ph-footer .ph-disclaimer,
.ph-footer .ph-footer-meta {
  max-width: var(--ph-content-max);
  margin: 0 auto;
  padding: 18px 24px;
}
.ph-footer .ph-disclaimer {
  color: var(--ph-ink-mute);
  border-bottom: 1px solid var(--ph-line-soft);
  column-count: 2;
  column-gap: 28px;
}
.ph-footer .ph-disclaimer small {
  font-size: 0.82rem;
  line-height: 1.5;
}
.ph-footer .ph-footer-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 22px;
  align-items: center;
  justify-content: flex-end;
  font-size: 0.85rem;
  color: var(--ph-ink-mute);
}
.ph-footer .ph-footer-meta a { color: var(--ph-ink-soft); }
.ph-footer .ph-footer-meta a:hover { color: var(--ph-ink); }

/* ============================================================
   RESPONSIVE — mobile <= 768px
   ============================================================ */
@media (max-width: 768px) {
  .ph-header {
    flex-wrap: wrap;
    padding: 10px 16px;
    gap: 12px;
  }
  .ph-nav {
    order: 3;
    width: 100%;
    flex-wrap: wrap;
    font-size: 0.88rem;
    gap: 8px;
  }
  .ph-cta-header {
    margin-left: auto;
    padding: 8px 14px;
    font-size: 0.88rem;
  }

  .ph-hero {
    grid-template-columns: 1fr;
    padding: 28px 16px 20px;
    gap: 20px;
  }
  .ph-hero-map { min-height: 220px; }
  .ph-iri-number { font-size: 2.2rem; }

  .ph-section { padding: 28px 16px; }

  .ph-narrative {
    font-size: 1rem;
    line-height: 1.6;
  }

  .ph-affected-list,
  .ph-localities-grid,
  .ph-related-grid {
    grid-template-columns: 1fr;
  }

  .ph-segmentor-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ph-social-proof {
    flex-direction: column;
    text-align: center;
    padding: 18px 16px;
  }

  .ph-subscribe-form {
    flex-direction: column;
  }
  .ph-subscribe-form input[type="text"],
  .ph-subscribe-form button {
    width: 100%;
  }

  .ph-footer .ph-disclaimer {
    column-count: 1;
  }
  .ph-footer .ph-footer-meta {
    justify-content: flex-start;
  }
}

@media (max-width: 480px) {
  h1 { font-size: 1.7rem; }
  h2 { font-size: 1.3rem; }
  .ph-logo-text small { display: none; }
}

/* ============================================================
   Index map — locality markers popup + legend dot
   Used by site/index.html only.
   ============================================================ */

.ph-locality-popup-wrap .leaflet-popup-content {
  margin: 12px 14px;
  font-family: 'Onest', system-ui, -apple-system, sans-serif;
}
.ph-locality-popup {
  min-width: 200px;
  line-height: 1.45;
  color: #0f172a;
}
.ph-locality-popup strong {
  font-size: 15px;
  display: block;
  margin-bottom: 2px;
  color: #0f172a;
}
.ph-locality-type {
  display: block;
  color: #64748b;
  font-size: 12px;
}
.ph-locality-installs {
  background: #3AC47D;
  color: #fff;
  padding: 6px 10px;
  border-radius: 5px;
  margin-top: 8px;
  font-size: 12px;
  text-align: center;
  font-weight: 600;
}
.ph-locality-link {
  display: inline-block;
  margin-top: 10px;
  color: #2B9DFF;
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
}
.ph-locality-link:hover {
  text-decoration: underline;
}

.ph-legend-divider {
  height: 1px;
  background: #e5e7eb;
  margin: 8px 0;
}
.ph-legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.ph-legend-dot-locality {
  background: #3AC47D;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.2);
}

/* ═══════ PROMPT-211: районная страница «от боли» ═══════ */

/* Hero — одна колонка */
.ph-hero-single { display: block; }
.ph-hero-single .ph-hero-content { max-width: var(--ph-content-max); }
/* PROMPT-215: сухой подзаголовок (тон /karta/) вместо признания «от боли» */
.ph-hero-sub {
  margin-top: 12px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ph-ink-soft);
  max-width: var(--ph-narrative-max);
}
/* PROMPT-234: подстрочник под подзаголовком — топонимы + словесная частота (#84).
   Тише подзаголовка (вторичная строка SEO-контекста). */
.ph-hero-meta {
  margin-top: 8px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ph-ink-mute);
  max-width: var(--ph-narrative-max);
}

/* ───── PROMPT-234b: антикризисный первый экран — 3 действия + поиск + статус ───── */
.ph-firstscreen { max-width: var(--ph-content-max); margin-top: 20px; }
.ph-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.ph-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 18px; min-height: 44px; box-sizing: border-box;
  font-family: 'Onest', sans-serif; font-size: 15px; font-weight: 600;
  border-radius: var(--ph-radius-md); cursor: pointer; text-decoration: none;
  border: 1px solid var(--ph-line); background: #fff; color: var(--ph-ink);
  transition: background .15s, border-color .15s, color .15s;
}
.ph-btn:hover { border-color: var(--ph-lime); color: var(--ph-lime-dark); }
.ph-btn-primary { background: var(--ph-lime); border-color: var(--ph-lime); color: #1a1a1a; }
.ph-btn-primary:hover { background: var(--ph-lime-dark); border-color: var(--ph-lime-dark); color: #1a1a1a; }
.ph-search { margin-top: 14px; max-width: var(--ph-narrative-max); }
.ph-search input {
  width: 100%; box-sizing: border-box; padding: 13px 16px;
  font-family: 'Onest', sans-serif; font-size: 15px; color: var(--ph-ink);
  background: #fff; border: 1px solid var(--ph-line);
  border-radius: var(--ph-radius-md); outline: none; transition: border-color .15s;
}
.ph-search input:focus { border-color: var(--ph-lime); }
.ph-search-hint { margin-top: 6px; min-height: 18px; font-size: 13px; color: var(--ph-ink-mute); }
.ph-search-hint a { color: var(--ph-green-dark); }
.ph-status { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.ph-status-item {
  flex: 1 1 0; min-width: 140px;
  display: flex; flex-direction: column; gap: 3px;
  padding: 12px 14px; background: var(--ph-bg-soft);
  border: 1px solid var(--ph-line); border-radius: var(--ph-radius-md);
}
.ph-status-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ph-ink-mute);
}
.ph-status-value { font-size: 15px; font-weight: 600; color: var(--ph-ink); }
@media (max-width: 600px) {
  .ph-actions .ph-btn { flex: 1 1 100%; }
}

/* PROMPT-223: живая карта района (iframe главной, embed). Фикс-высота — без CLS;
   на всю ширину контента; lazy-load в шаблоне. */
.ph-map-embed { padding-top: 16px; padding-bottom: 16px; }
.ph-map-iframe {
  display: block;
  width: 100%;
  height: 600px;
  border: 1px solid var(--ph-line);
  border-radius: var(--ph-radius-md);
  background: var(--ph-bg-soft);
}
@media (max-width: 768px) {
  .ph-map-iframe { height: 70vh; }
}

/* Блок помощи — info-плашка со списком действий */
/* PROMPT-214: .ph-section.ph-help (0,0,2,0) перебивает .ph-section+.ph-section
   padding-top:44px — иначе у плашки верх 44, низ 22 (несимметрично) */
.ph-section.ph-help {
  background: var(--ph-bg);     /* PROMPT-217: белая карточка на сером фоне */
  border: 1px solid var(--ph-line);
  border-radius: var(--ph-radius-md);
  padding: 22px 24px;          /* PROMPT-214: плашка с внутренним воздухом */
  max-width: 720px;            /* ширина чтения */
}
.ph-help-list {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: flex;
  flex-direction: column;
  gap: 16px;                   /* PROMPT-214: воздух между действиями */
}
.ph-help-list li {
  font-size: 15px;
  line-height: 1.7;            /* PROMPT-214: межстрочный воздух */
  color: var(--ph-ink-soft);
  padding-left: 22px;
  position: relative;
}
.ph-help-list li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--ph-green-dark);
  font-weight: 700;
}
.ph-help-list strong { color: var(--ph-ink); }
.ph-help-list a { color: var(--ph-green-dark); text-decoration: none; font-weight: 600; }
.ph-help-list a:hover { text-decoration: underline; }

/* Посёлки и СНТ — превью-карта + список */
.ph-preview {
  margin: 12px 0 18px;
  max-width: 360px;
}
.ph-preview-svg {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--ph-radius-md);
}
.ph-preview-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 10px;
  font-size: 13px;
  color: var(--ph-ink-mute);
}
.ph-preview-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ph-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.ph-dot-high { background: #C73B3B; }
.ph-dot-med  { background: #E08A1E; }
.ph-dot-low  { background: #9aa39a; }

/* PROMPT-214: сетка карточек вместо простыни на 1120px */
.ph-poselki-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.ph-poselki-list li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 12px 14px;
  background: var(--ph-bg);     /* PROMPT-217: белая карточка на сером фоне */
  border: 1px solid var(--ph-line);
  border-radius: 10px;
  font-size: 15px;
}
.ph-poselki-name { font-weight: 600; color: var(--ph-ink); }
.ph-poselki-type { color: var(--ph-ink-mute); font-size: 13px; }
.ph-poselki-link {
  margin-top: 6px;
  color: var(--ph-green-dark);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.ph-poselki-link:hover { text-decoration: underline; }
.ph-poselki-more { margin-top: 12px; font-size: 14px; color: var(--ph-ink-soft); }
.ph-poselki-more a { color: var(--ph-green-dark); font-weight: 600; text-decoration: none; }
.ph-poselki-more a:hover { text-decoration: underline; }

/* ═══════ PROMPT-215: сервис без продажи в лоб ═══════ */

/* Ближайшие плановые отключения — список аккуратных карточек-строк
   (фон #F7F7F5 = --ph-bg-soft, radius, padding), ответ на «когда дадут» */
.ph-upcoming-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: var(--ph-narrative-max);
}
/* PROMPT-234c: карточка отключения — строка данных + подвал (бейдж + «на карте»). */
.ph-up-item {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px 16px;
  background: var(--ph-bg);     /* PROMPT-217: белая карточка на сером фоне */
  border: 1px solid var(--ph-line);
  border-radius: var(--ph-radius-md);
  font-size: 15px;
}
.ph-up-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.ph-up-date { font-weight: 700; color: var(--ph-ink); min-width: 88px; }
.ph-up-np   { color: var(--ph-ink); flex: 1 1 auto; }
.ph-up-time { color: var(--ph-ink-soft); font-variant-numeric: tabular-nums; }
.ph-up-foot {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px;
  padding-top: 8px; border-top: 1px solid var(--ph-line-soft);
}
/* бейдж «Плановое» — оранж (семантика статуса нагрузки, решение Ivan: оранж для бейджей) */
/* PROMPT-240 #3: бейдж приглушён — повторяется в ~10 строках, был визуальным шумом.
   Мелкий бледный текст вместо заметной плашки (смысл «плановое» сохранён). */
.ph-up-badge {
  font-size: 11px; font-weight: 500; color: var(--ph-ink-mute);
  background: none; border: none;
  padding: 0; border-radius: 0;
}
.ph-up-onmap { font-size: 13px; font-weight: 600; color: var(--ph-green-dark); text-decoration: none; }
.ph-up-onmap:hover { text-decoration: underline; }
/* PROMPT-234c: блок UGC (канал ФАКТ переехал из сайдбара карты в шаблон). */
.ph-ugc-block p { margin-top: 8px; font-size: 15px; line-height: 1.55; color: var(--ph-ink-soft); max-width: var(--ph-narrative-max); }
.ph-ugc-block .ph-btn { margin-top: 14px; }
.ph-upcoming-more {
  margin-top: 12px; font-size: 14px; color: var(--ph-ink-soft);
  max-width: var(--ph-narrative-max);
}
.ph-upcoming-more a { color: var(--ph-green-dark); font-weight: 600; text-decoration: none; }
.ph-upcoming-more a:hover { text-decoration: underline; }
.ph-upcoming-note {
  margin-top: 12px; font-size: 13px; color: var(--ph-ink-mute);
  line-height: 1.5; max-width: var(--ph-narrative-max);
}

/* softLink — тихая продажа (как .pp-soft-link на главной): не кричащий блок,
   аккуратный фон + зелёный акцент слева + читаемая ссылка, НЕ заливная кнопка */
.ph-soft-link {
  max-width: var(--ph-narrative-max);
  padding: 14px 16px;
  background: #fafdf7;
  border: 1px solid var(--ph-line);
  border-left: 3px solid var(--ph-green);
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ph-ink-soft);
}
.ph-soft-main { color: var(--ph-ink); font-weight: 500; }
.ph-soft-link a {
  color: var(--ph-green-dark);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid var(--ph-green-dark);
  white-space: nowrap;
}
.ph-soft-link a:hover { color: var(--ph-green); border-bottom-color: var(--ph-green); }

/* ════════════════════════════════════════════════════════════
   PROMPT-236: ДИЗАЙН-PR районной — вайрфрейм → продукт по макету persentr.ru
   (тёплый фон #FAF8F8 уже в --ph-page; H1 вес 500; лайм-акценты #8acb4c;
   2 колонки на десктопе; светофор; блок «нет света»; блок доверия; иконки;
   крошки + бургер; перехват скролла карты на мобиле). Скоуп — .district-page.
   ════════════════════════════════════════════════════════════ */

/* H1 легче (вес 500, не 700) — спокойный заголовок как на persentr.ru */
.district-page h1 { font-weight: 500; }

/* PROMPT-238 #1 / 242 #2: никакого горизонтального вылета (на html И body) */
html, body.district-page { overflow-x: hidden; }
.district-page .ph-section, .ph-district-grid { max-width: min(var(--ph-content-max), 100%); }

/* ── Шапка: телефон ЛАЙМ #8acb4c (бренд единый, PROMPT-238 #7), бургер на мобиле ── */
.ph-nav-phone { font-weight: 600; color: var(--ph-lime) !important; white-space: nowrap; }
.ph-nav-phone:hover { color: var(--ph-lime-dark) !important; }
.ph-burger {
  display: none; margin-left: auto; flex-direction: column; gap: 5px;
  width: 44px; height: 44px; padding: 11px 9px; box-sizing: border-box;
  background: none; border: 1px solid var(--ph-line); border-radius: var(--ph-radius-sm); cursor: pointer;
}
.ph-burger span { display: block; height: 2px; border-radius: 2px; background: var(--ph-ink); transition: transform .2s, opacity .2s; }
.ph-burger-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ph-burger-open span:nth-child(2) { opacity: 0; }
.ph-burger-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Хлебные крошки (видимые) ── */
.ph-breadcrumbs {
  max-width: var(--ph-content-max); margin: 0 auto; padding: 14px 24px 0;
  font-size: 13px; color: var(--ph-ink-mute);
}
.ph-breadcrumbs a { color: var(--ph-ink-soft); }
.ph-breadcrumbs a:hover { color: var(--ph-ink); text-decoration: none; }
.ph-bc-sep { margin: 0 7px; color: var(--ph-line); }
.ph-bc-current { color: var(--ph-ink-soft); }

/* ── 2-колоночная сетка района (десктоп ≥980px): слева данные, справа карта ── */
.ph-district-grid {
  max-width: var(--ph-content-max);
  margin: 0 auto;
  padding: 8px 24px 0;
  display: grid;
  grid-template-columns: 1fr;   /* мобайл: одна колонка, DOM-порядок = порядок макета */
  gap: 18px;
}
.ph-district-grid > .ph-section,
.ph-district-grid > .ph-hero { max-width: none; margin: 0; padding-left: 0; padding-right: 0; }
.ph-district-grid > .ph-hero { padding-top: 8px; padding-bottom: 0; }
.ph-area-act { margin-top: 0 !important; }

@media (min-width: 1200px) {
  /* PROMPT-240 #1: 2 колонки ТОЛЬКО на широких (≥1200) — на 980-1199 колонки
     жались и резали заголовок/время справа; ниже 1200 — одна колонка. */
  .ph-district-grid {
    grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.25fr);
    column-gap: 32px;
    row-gap: 16px;
    align-items: start;
    /* PROMPT-238 #3: поиск/действия выше, светофор компактной плашкой ниже */
    grid-template-areas:
      "hero map"
      "act  map"
      "svet map"
      "tel  up";
  }
  .ph-area-hero { grid-area: hero; }
  .ph-area-act  { grid-area: act; }
  .ph-area-svet { grid-area: svet; }
  .ph-area-map  { grid-area: map; align-self: stretch; }
  .ph-area-up   { grid-area: up; }
  .ph-area-tel  { grid-area: tel; }
  /* карта тянется на высоту левой колонки (крупная) */
  .ph-area-map, .ph-area-map .ph-map-frame { height: 100%; }
  .ph-area-map .ph-map-iframe { height: 100%; min-height: 460px; }
  .ph-area-tel.ph-help { margin-top: 0; }
}

/* ── Светофор: компактная плашка — ЧИСТЫЙ градиент зелёный→красный + указатель
   на позицию района; человеческой строкой, без числа (PROMPT-238 #3,#4) ── */
.ph-svetofor {
  display: flex; flex-direction: column; gap: 9px;
  padding: 12px 16px 13px; background: var(--ph-bg);
  border: 1px solid var(--ph-line); border-radius: var(--ph-radius-md);
}
.ph-sv-bar {
  position: relative; height: 10px; border-radius: 6px;
  background: linear-gradient(90deg, #4ade80 0%, #facc15 38%, #fb923c 68%, #dc2626 100%);
}
.ph-sv-pointer {
  position: absolute; top: 50%; left: 50%; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; border: 3px solid var(--ph-ink);
  transform: translate(-50%, -50%); transition: left .25s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.ph-sv-low      .ph-sv-pointer { left: 10%; }
.ph-sv-moderate .ph-sv-pointer { left: 32%; }
.ph-sv-elevated .ph-sv-pointer { left: 53%; }
.ph-sv-high     .ph-sv-pointer { left: 76%; }
.ph-sv-chronic  .ph-sv-pointer { left: 93%; }
.ph-sv-text { display: flex; flex-direction: column; gap: 2px; }
.ph-sv-word { font-size: 15px; font-weight: 600; color: var(--ph-ink); }
.ph-sv-sub { font-size: 12.5px; line-height: 1.4; color: var(--ph-ink-mute); }

/* ── Иконки: в кнопках действий и статус-строке ── */
.ph-ic { width: 18px; height: 18px; margin-right: 8px; fill: currentColor; flex-shrink: 0; }
.ph-status-item { flex-direction: row !important; align-items: center; gap: 10px !important; }
.ph-status-ic { width: 22px; height: 22px; fill: var(--ph-lime-dark); flex-shrink: 0; }
.ph-status-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

/* ── Карта: рамка + слой-перехватчик скролла на мобиле (ДОП2 #1) ── */
.ph-map-frame { position: relative; }
.ph-map-tapcatch {
  display: none;   /* десктоп: карта интерактивна сразу */
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%;
  border: none; background: transparent; cursor: pointer;
  align-items: flex-end; justify-content: center; padding-bottom: 16px;
  font-family: 'Onest', sans-serif;
}
.ph-map-tapcatch span {
  background: rgba(26,26,26,0.72); color: #fff; font-size: 13px; font-weight: 600;
  padding: 8px 14px; border-radius: 999px; pointer-events: none;
}
.ph-map-active .ph-map-tapcatch { display: none; }

/* ── Блок «Если света нет прямо сейчас» — карточка с чек-листом ── */
.ph-nosvet {
  background: var(--ph-bg); border: 1px solid var(--ph-line);
  border-radius: var(--ph-radius-md); padding: 20px 22px;
}
.ph-nosvet h2 { font-size: 1.15rem; }
.ph-nosvet-list { margin: 10px 0 0; padding-left: 0; list-style: none; counter-reset: nosvet; }
.ph-nosvet-list li {
  position: relative; padding: 8px 0 8px 38px; font-size: 15px; line-height: 1.5;
  color: var(--ph-ink-soft); border-top: 1px solid var(--ph-line-soft); counter-increment: nosvet;
}
.ph-nosvet-list li:first-child { border-top: none; }
.ph-nosvet-list li::before {
  content: counter(nosvet); position: absolute; left: 0; top: 7px;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(138,203,76,0.18); color: var(--ph-lime-dark);
  font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.ph-nosvet-list strong { color: var(--ph-ink); font-weight: 600; }
.ph-nosvet-list a { color: var(--ph-lime-dark); font-weight: 600; }

/* ── PROMPT-238 #5+#6: продающий блок внизу — CTA резерва С ФОТО + доверие рядом
   (сначала помощь «нет света», потом мягко резерв и «кто мы») ── */
.ph-sell-grid {
  max-width: var(--ph-content-max); margin: 0 auto;
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; align-items: stretch;
}
.ph-rezerv-cta {
  display: flex; flex-direction: column; overflow: hidden; min-width: 0;
  background: var(--ph-bg); border: 1px solid var(--ph-line);
  border-radius: var(--ph-radius-lg); box-shadow: var(--ph-shadow-sm);
}
.ph-rezerv-photo { position: relative; aspect-ratio: 16 / 7; background: #2b3a55; }
.ph-rezerv-photo svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ph-rezerv-body { padding: 20px 22px 22px; }
.ph-rezerv-body h2 { font-size: 1.3rem; margin-bottom: 8px; }
.ph-rezerv-body p { font-size: 15px; line-height: 1.55; color: var(--ph-ink-soft); margin-bottom: 16px; }
.ph-btn-lg { padding: 14px 22px; font-size: 16px; }

/* Блок доверия — иконки + рамка, единым блоком рядом с CTA (PROMPT-238 #6) */
.ph-trust {
  min-width: 0; background: var(--ph-bg); border: 1px solid var(--ph-line);
  border-radius: var(--ph-radius-lg); box-shadow: var(--ph-shadow-sm); padding: 18px 20px;
}
.ph-trust-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.ph-trust-item { display: flex; align-items: flex-start; gap: 12px; }
.ph-trust-ic {
  width: 28px; height: 28px; flex-shrink: 0; fill: var(--ph-lime-dark);
  background: rgba(138,203,76,0.14); border-radius: 7px; padding: 5px; box-sizing: border-box;
}
.ph-trust-text { font-size: 13.5px; line-height: 1.45; color: var(--ph-ink-soft); }
.ph-trust-text strong { color: var(--ph-ink); font-weight: 600; }

/* PROMPT-238 #1: карточки/списки в grid не распирают колонку (min-width:0 + перенос) */
.ph-up-item, .ph-up-row, .ph-up-np, .ph-upcoming-list, .ph-poselki-list,
.ph-poselki-list li, .ph-status-item, .ph-status-body { min-width: 0; }
.ph-up-np, .ph-poselki-name { overflow-wrap: anywhere; }

/* ════════ PROMPT-236/238/240: одна колонка ниже 1200px ════════ */
@media (max-width: 1199px) {
  .ph-burger { display: flex; }
  .ph-nav {
    order: 3; flex-basis: 100%; flex-direction: column; align-items: flex-start;
    gap: 4px; max-height: 0; overflow: hidden; transition: max-height .25s ease;
  }
  .ph-nav.ph-nav-open { max-height: 240px; padding-top: 8px; }
  /* карта на мобиле — перехватчик скролла активен (палец листает страницу) */
  .ph-map-frame:not(.ph-map-active) .ph-map-tapcatch { display: flex; }
  .ph-map-frame:not(.ph-map-active) .ph-map-iframe { pointer-events: none; }
  .ph-sell-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .ph-actions .ph-btn { flex: 1 1 100%; }
}

/* ════════════════════════════════════════════════════════════
   PROMPT-239: ПРЕМИУМ под persentr.ru (значения сняты с theme CSS сайта)
   — тёплая мягкая тень, радиус 16, воздух ~64px, числа-герои синим, H2 вес 500.
   Композицию #90/#91, overflow-фикс #91 и СВЕТОФОР — НЕ трогаем (только визуал).
   ════════════════════════════════════════════════════════════ */
:root {
  --ph-shadow-card: 0 0 1px rgba(0,0,0,.24), 0 10px 52px rgba(33,9,0,.08);   /* persentr.ru */
  --ph-shadow-card-hover: 0 0 1px rgba(0,0,0,.24), 0 14px 56px rgba(33,9,0,.13);
  --ph-num-accent: #d4900a;   /* PROMPT-240: синий → ЗОЛОТО (родной цвет чисел persentr.ru) */
  --ph-radius-card: 16px;
}

/* Карточки района — премиум: тёплая тень, радиус 16, мягкая рамка вместо жёсткой,
   щедрый padding. Светофор НЕ включаем (он ок после #91). */
.district-page .ph-up-item,
.district-page .ph-status-item,
.district-page .ph-poselki-list li,
.district-page .ph-nosvet,
.district-page .ph-rezerv-cta,
.district-page .ph-trust-card,
.district-page .ph-section.ph-help {
  border: 1px solid rgba(33, 9, 0, 0.05);
  box-shadow: var(--ph-shadow-card);
  border-radius: var(--ph-radius-card);
}
.district-page .ph-up-item { padding: 18px 20px; }
.district-page .ph-poselki-list li { padding: 16px 18px; }
.district-page .ph-section.ph-help { padding: 26px 28px; }
.district-page .ph-nosvet { padding: 26px 28px; }
.district-page .ph-up-item:hover,
.district-page .ph-poselki-list li:hover { box-shadow: var(--ph-shadow-card-hover); }

/* Воздух — щедрые межсекционные отступы (умеренно ~64px, эталон сайта 100) */
.district-page .ph-district-grid ~ .ph-section { padding-top: 64px; padding-bottom: 0; }
.district-page .ph-faq { padding-bottom: 24px; }
.ph-district-grid { row-gap: 22px; }

/* H2 — лёгкие (вес 500), крупнее у мажорных секций, больший отступ снизу */
.district-page h2 { font-weight: 500; letter-spacing: -0.01em; }
.district-page .ph-sell h2,
.district-page .ph-poselki h2,
.district-page .ph-ugc-block h2,
.district-page .ph-faq h2 { font-size: clamp(1.5rem, 2.6vw, 1.95rem); margin-bottom: 20px; }

/* Числа-герои (блок доверия) — крупное число синим + мелкая подпись, белая карточка */
.ph-trust { background: transparent; border: none; box-shadow: none; padding: 0; }
.ph-trust-list { display: flex; flex-direction: column; gap: 14px; }
.ph-trust-card { display: flex; flex-direction: column; gap: 2px; padding: 18px 20px; background: var(--ph-bg); }
.ph-trust-ic { width: 22px; height: 22px; fill: var(--ph-ink-mute); margin-bottom: 4px; }
.ph-trust-num { font-size: 2.4rem; font-weight: 600; line-height: 1; color: var(--ph-num-accent); }
.ph-trust-cap { font-size: 13px; line-height: 1.4; color: var(--ph-ink-soft); }

/* CTA-фото — крупнее, скруглённее (стиль hero сайта) */
.ph-rezerv-photo { aspect-ratio: 16 / 10; }
.ph-rezerv-cta { box-shadow: var(--ph-shadow-card); }
.ph-rezerv-body { padding: 24px 26px 26px; }

@media (max-width: 560px) {
  .ph-trust-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .ph-trust-num { font-size: 2rem; }
}

/* ════════════════════════════════════════════════════════════
   PROMPT-240: ФИНАЛ районной — #1 обрезка справа.
   Контейнер шире (≤1440, центр) + больший боковой padding, чтобы заголовок
   секции и время НЕ упирались в правый край. Списки уже min-width:0 (#91).
   ════════════════════════════════════════════════════════════ */
.district-page { --ph-content-max: 1440px; }
.district-page .ph-district-grid,
.district-page .ph-section,
.district-page .ph-breadcrumbs,
.district-page .ph-header { padding-left: 32px; padding-right: 32px; }
@media (max-width: 600px) {
  .district-page .ph-district-grid,
  .district-page .ph-section,
  .district-page .ph-breadcrumbs,
  .district-page .ph-header { padding-left: 16px; padding-right: 16px; }
}

/* ════════════════════════════════════════════════════════════
   PROMPT-240 РАСШИРЕНИЕ — список-аккордеон (#3), блок «адреса нет» (#7),
   мобайл-overflow плиток + светофор-указатель в границах (#5).
   ════════════════════════════════════════════════════════════ */
/* #3: компактные строки в одну линию (бейдж убран в шаблоне) + аккордеон 5+ */
.ph-up-item { flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; padding: 12px 18px; }
.ph-up-date { min-width: 84px; }
.ph-up-np { flex: 1 1 auto; }
.ph-up-onmap { font-size: 12px; font-weight: 500; color: var(--ph-ink-mute); text-decoration: none; white-space: nowrap; }
.ph-up-onmap:hover { color: var(--ph-ink-soft); text-decoration: underline; }
.ph-up-hidden { display: none; }
.ph-up-open .ph-up-hidden { display: flex; }
.ph-up-toggle {
  margin-top: 12px; padding: 9px 16px; min-height: 40px;
  font-family: 'Onest', sans-serif; font-size: 14px; font-weight: 600;
  color: var(--ph-ink); background: var(--ph-bg); cursor: pointer;
  border: 1px solid var(--ph-line); border-radius: var(--ph-radius-md);
  transition: border-color .15s;
}
.ph-up-toggle:hover { border-color: var(--ph-lime); }

/* #7: «Не нашли свой адрес?» — компактная плашка под статусом */
.ph-noaddr { margin-top: 16px; padding: 16px 18px; background: var(--ph-bg-soft); border: 1px solid var(--ph-line); border-radius: var(--ph-radius-card, 16px); }
.ph-noaddr p { margin: 0 0 12px; font-size: 14px; line-height: 1.5; color: var(--ph-ink-soft); }
.ph-noaddr strong { color: var(--ph-ink); }
.ph-noaddr-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.ph-btn-sm { padding: 9px 14px; min-height: 40px; font-size: 14px; }

/* #5: указатель светофора не вылезает за шкалу на крайних позициях */
.ph-sv-low .ph-sv-pointer { left: 12%; }
.ph-sv-high .ph-sv-pointer { left: 74%; }
.ph-sv-chronic .ph-sv-pointer { left: 88%; }

/* #5: мобайл — статус-плитки 2 в ряд (3-я переносится), не вылезают за край */
@media (max-width: 600px) {
  .ph-status { gap: 8px; }
  .ph-status-item { flex: 1 1 calc(50% - 4px); min-width: 0; }
  .ph-noaddr-actions .ph-btn-sm { flex: 1 1 100%; }
}

/* ════════════════════════════════════════════════════════════
   PROMPT-241: реальное фото в блоке резерва (до/после) вместо SVG.
   Вертикальная 2:3, object-fit cover (не искажать). Мобайл — фото сверху,
   текст под ним. Десктоп — фото слева от текста (кроп только вертикальный,
   ширина 240 ≥ высота/1.5 → лево/право со сплитом не режутся).
   ════════════════════════════════════════════════════════════ */
.ph-rezerv-photo { aspect-ratio: 2 / 3; background: #2b3a55; overflow: hidden; }
.ph-rezerv-photo picture { display: block; width: 100%; height: 100%; }
.ph-rezerv-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 700px) {
  /* фото слева; ширина ~350 ≈ высота_карточки × 2/3, чтобы вертикальная 2:3
     заполняла столбец БЕЗ горизонтального кропа (лево/право со сплитом целы). */
  .ph-rezerv-cta { flex-direction: row; align-items: stretch; }
  .ph-rezerv-photo { flex: 0 0 350px; aspect-ratio: auto; align-self: stretch; }
}

/* ════════════════════════════════════════════════════════════
   PROMPT-244: автокомплит-подсказки поиска + подсветка найденной строки.
   ════════════════════════════════════════════════════════════ */
.ph-search { position: relative; }
.ph-ac {
  display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20;
  background: var(--ph-bg); border: 1px solid var(--ph-line);
  border-radius: var(--ph-radius-md); box-shadow: 0 10px 30px rgba(15,23,42,0.14);
  max-height: 290px; overflow-y: auto;
}
.ph-ac.ph-ac-open { display: block; }
.ph-ac-item {
  display: block; width: 100%; text-align: left; box-sizing: border-box;
  padding: 11px 16px; min-height: 44px;
  background: none; border: 0; border-bottom: 1px solid var(--ph-line-soft); cursor: pointer;
  font-family: 'Onest', sans-serif; font-size: 15px; color: var(--ph-ink);
}
.ph-ac-item:last-child { border-bottom: 0; }
.ph-ac-item:hover { background: var(--ph-bg-soft); }
/* подсветка найденной строки отключения после «Проверить адрес» */
/* PROMPT-247: подсветка применяется и к строке отключения, и к посёлку в списке */
.ph-up-hit { outline: 2px solid var(--ph-lime); outline-offset: 1px; animation: phHit 2.8s ease; border-radius: var(--ph-radius-card, 16px); }
@keyframes phHit { 0%, 100% { background: var(--ph-bg); } 18% { background: rgba(138,203,76,0.20); } }

/* PROMPT-246: ссылки в ответах FAQ — неярко, в тон тексту (не кричащие) */
.ph-faq-link { color: var(--ph-lime-dark); text-decoration: underline; text-underline-offset: 2px; font-weight: 500; }
.ph-faq-link:hover { color: var(--ph-lime); }