/* Issue #273: service-first UX for district pages.
   Loaded after persentr-map.css so rollback is one file + one template link. */
@import url('/assets/district-visual-polish-p1.css?v=273p1');

.district-page .ph-firstscreen {
  max-width: none;
  margin-top: 0;
  padding: 20px;
  background: #fff;
  border: 1px solid rgba(33, 9, 0, 0.07);
  border-radius: 18px;
  box-shadow: 0 12px 34px rgba(33, 9, 0, 0.06);
}

.district-page .ph-search {
  max-width: none;
  margin-top: 0;
}

.ph-search-label {
  display: block;
  margin: 0 0 8px;
  color: var(--ph-ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}

.district-page .ph-search input {
  min-height: 48px;
  padding: 13px 15px;
  border-radius: 14px;
  font-size: 16px;
}

.district-page .ph-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 14px;
}

.district-page .ph-actions .ph-btn {
  width: 100%;
  min-height: 48px;
  border-radius: 14px;
}

.district-page .ph-actions .ph-btn-primary {
  font-size: 16px;
}

.ph-report-action {
  min-height: 44px !important;
  justify-content: flex-start !important;
  padding: 8px 4px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--ph-ink-soft) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
  box-shadow: none !important;
}

.ph-report-action:hover {
  color: var(--ph-green-dark) !important;
}

.ph-report-note {
  display: block;
  margin: -2px 0 0 4px;
  color: var(--ph-ink-mute);
  font-size: 12px;
  line-height: 1.45;
}

.ph-today-status {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--ph-line);
}

.ph-today-status strong {
  color: var(--ph-ink);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
}

.ph-today-status span {
  color: var(--ph-ink-mute);
  font-size: 13px;
  line-height: 1.45;
}

.ph-search-result {
  margin-top: 12px;
  padding: 14px 15px;
  border: 1px solid var(--ph-line);
  border-radius: 14px;
  background: var(--ph-bg-soft);
}

.ph-search-result[hidden] {
  display: none !important;
}

.ph-search-result.is-planned {
  border-color: rgba(121, 183, 63, 0.38);
  background: rgba(138, 203, 76, 0.09);
}

.ph-search-result.is-clear {
  border-color: rgba(12, 58, 46, 0.18);
  background: rgba(12, 58, 46, 0.045);
}

.ph-search-result.is-unknown {
  background: #faf9f7;
}

.ph-search-result-title {
  margin: 0 0 6px;
  color: var(--ph-ink);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
}

.ph-search-result-line {
  margin: 2px 0 0;
  color: var(--ph-ink-soft);
  font-size: 14px;
  line-height: 1.5;
}

.ph-search-result-line.ph-result-place {
  color: var(--ph-ink);
  font-size: 16px;
  font-weight: 600;
}

.ph-search-result-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  margin-top: 8px;
  color: var(--ph-green-dark);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.ph-search-result-link:hover {
  text-decoration: underline;
}

.ph-area-up,
.ph-area-tel,
.ph-area-map,
.ph-area-svet {
  scroll-margin-top: 16px;
}

.ph-sv-context {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
  margin-bottom: 2px;
}

.ph-sv-context strong {
  color: var(--ph-ink);
  font-size: 13px;
  font-weight: 700;
}

.ph-sv-context span {
  color: var(--ph-ink-mute);
  font-size: 12px;
}

.district-page .ph-svetofor {
  padding: 16px;
  border-radius: 16px;
}

.district-page .ph-sv-word {
  font-size: 14px;
}

@media (max-width: 1199px) {
  .district-page .ph-district-grid {
    gap: 16px;
  }

  .district-page .ph-map-iframe {
    height: min(56vh, 420px);
    min-height: 320px;
  }

  .district-page .ph-section.ph-help,
  .district-page .ph-upcoming,
  .district-page .ph-nosvet {
    border-radius: 16px;
  }
}

@media (max-width: 560px) {
  .district-page .ph-firstscreen {
    padding: 16px;
  }

  .ph-today-status strong {
    font-size: 14px;
  }

  .district-page .ph-map-iframe {
    height: 360px;
    min-height: 320px;
  }

  /* Stable two-line outage rows: long locality names no longer push time unpredictably. */
  .district-page .ph-up-item {
    display: grid;
    grid-template-columns: minmax(78px, auto) minmax(0, 1fr);
    grid-template-areas:
      "date place"
      "time place";
    align-items: baseline;
    gap: 6px 12px;
  }

  .district-page .ph-up-hidden {
    display: none;
  }

  .district-page .ph-up-date {
    grid-area: date;
    min-width: 0;
  }

  .district-page .ph-up-np {
    grid-area: place;
  }

  .district-page .ph-up-time {
    grid-area: time;
  }

  .district-page .ph-up-open .ph-up-hidden {
    display: grid;
  }
}

@media (min-width: 1200px) {
  /* Balanced desktop: answer + map first, then outage list and phone help side by side. */
  .district-page .ph-district-grid {
    grid-template-columns: minmax(340px, 0.9fr) minmax(0, 1.25fr);
    grid-template-areas:
      "hero map"
      "act  map"
      "up   tel"
      "svet svet"
      "now  now";
    column-gap: 32px;
    row-gap: 16px;
    align-items: start;
  }

  .district-page .ph-district-grid.ph-no-upcoming {
    grid-template-areas:
      "hero map"
      "act  map"
      "tel  tel"
      "svet svet"
      "now  now";
  }

  .district-page .ph-area-hero { grid-area: hero; }
  .district-page .ph-area-act  { grid-area: act; }
  .district-page .ph-area-up   { grid-area: up; align-self: stretch; }
  .district-page .ph-area-tel  { grid-area: tel; align-self: start; }
  .district-page .ph-area-map  { grid-area: map; align-self: stretch; height: 100%; }
  .district-page .ph-area-svet { grid-area: svet; }
  .district-page .ph-area-now  { grid-area: now; }

  .district-page .ph-area-map .ph-map-frame,
  .district-page .ph-area-map .ph-map-iframe {
    height: 100%;
  }

  .district-page .ph-area-map .ph-map-iframe {
    min-height: 620px;
  }

  .district-page .ph-area-tel.ph-help {
    max-width: none;
  }
}

/* Keep the compact two-column locality catalogue at the 360px QA viewport. */
@media (min-width: 341px) and (max-width: 380px) {
  .district-page .ph-poselki-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .district-page .ph-poselki-list li {
    min-height: 104px;
    padding: 12px;
  }
}

/* Tighten the desktop commercial bridge so its text no longer stretches the visual. */
@media (min-width: 761px) {
  .district-page .phx-reserve-copy {
    padding: 32px 38px;
  }

  .district-page .ph-sell .phx-reserve h2 {
    margin-bottom: 12px;
    font-size: clamp(34px, 3.35vw, 43px);
  }

  .district-page .phx-reserve-lead {
    margin-bottom: 16px;
    font-size: 15.5px;
    line-height: 1.48;
  }

  .district-page .phx-reserve-button {
    min-height: 48px;
  }

  .district-page .phx-reserve-note {
    margin-top: 8px;
  }

  .district-page .phx-reserve-proof {
    margin-top: 18px;
    padding-top: 12px;
  }
}