/* Блоки главной uchastki47 — собраны из макета 15.09 через block-engine.
   Каждый блок в своём пространстве имён ds-u47-*: тема ничего не переопределяет.
   Файл собирается из project-notes/landing-blocks/<блок>/style.css — правь ТАМ. */

/* ================= u47-hero ================= */
/* Блок «Ближе к тому, что важно» — герой главной uchastki47.
   Все имена начинаются с ds-u47-hero, токены объявлены внутри корневого класса:
   блок можно вставить в живую тему, ничего в ней не переопределяя. */

.ds-u47-hero{
  --c-temnyj:#0b2b33;        /* заголовки и основной текст */
  --c-akcent:#0d3b45;        /* залитая кнопка, тёмные плашки */
  --c-vtor:#5c6b70;          /* подзаголовок, подписи */
  --c-fon:#f7f9f8;           /* фон страницы */
  --c-belyj:#ffffff;
  --c-linija:#dbe4e3;
  --c-chip-fon:#f0f3f2;
  --r-pill:999px;
  --r-karta:16px;

  position:relative;
  overflow:hidden;
  background:var(--c-fon);
  font-family:'Inter','Helvetica Neue',Arial,'DejaVu Sans',sans-serif;
  color:var(--c-temnyj);
  padding:0 0 56px;
  min-height:600px;
  isolation:isolate;
}

/* ---- фотография и завеса ---- */
.ds-u47-hero__foto{
  position:absolute;
  inset:0 0 auto auto;
  width:62%;
  height:100%;
  background-image:url("img/hero-zaliv.jpg");
  background-size:cover;
  background-position:center right;
  z-index:-2;
}
.ds-u47-hero__zavesa{
  position:absolute;
  inset:0;
  background:linear-gradient(100deg,
    var(--c-fon) 0%,
    var(--c-fon) 34%,
    rgba(247,249,248,.92) 44%,
    rgba(247,249,248,.35) 56%,
    rgba(247,249,248,0) 68%);
  z-index:-1;
}

/* ---- рукописные пометки ---- */
.ds-u47-hero__pero{
  position:absolute;
  width:210px;
  height:auto;
  opacity:.9;
  pointer-events:none;
}
.ds-u47-hero__pero--verh{ top:28px; left:56%; }
.ds-u47-hero__pero--niz{ bottom:70px; right:40px; width:250px; }

/* ---- содержание ---- */
.ds-u47-hero__nutro{
  position:relative;
  max-width:1160px;
  margin:0 auto;
  padding:78px 16px 0;
}
.ds-u47-hero__zagolovok{
  margin:0 0 20px;
  font-size:72px;
  line-height:1.03;
  font-weight:760;
  letter-spacing:-1.4px;
}
.ds-u47-hero__podzagolovok{
  margin:0 0 30px;
  font-size:21px;
  line-height:1.45;
  color:var(--c-vtor);
}

.ds-u47-hero__opory{
  display:flex;
  flex-wrap:wrap;
  gap:34px;
  margin:0 0 30px;
  padding:0;
  list-style:none;
}
.ds-u47-hero__opora{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:14px;
  line-height:1.35;
  color:var(--c-temnyj);
}
.ds-u47-hero__znak{
  flex:0 0 auto;
  width:20px;
  height:20px;
  fill:var(--c-akcent);
}

/* ---- строка поиска ---- */
.ds-u47-hero__poisk{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  max-width:720px;
  padding:8px 8px 8px 22px;
  background:var(--c-belyj);
  border-radius:var(--r-pill);
  box-shadow:0 10px 30px rgba(11,43,51,.10);
}
.ds-u47-hero__lupa{ flex:0 0 auto; width:20px; height:20px; fill:var(--c-vtor); }
.ds-u47-hero__podpis{
  position:absolute;
  width:1px; height:1px;
  margin:-1px; padding:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}
.ds-u47-hero__pole{
  flex:1 1 auto;
  min-width:0;
  border:0;
  outline:0;
  background:transparent;
  font:inherit;
  font-size:16px;
  color:var(--c-temnyj);
  padding:12px 0;
}
.ds-u47-hero__pole::placeholder{ color:#8a979b; }
.ds-u47-hero__knopka{
  flex:0 0 auto;
  border:0;
  cursor:pointer;
  background:var(--c-akcent);
  color:var(--c-belyj);
  font:inherit;
  font-size:15px;
  font-weight:600;
  padding:14px 26px;
  border-radius:var(--r-pill);
}
.ds-u47-hero__knopka:hover{ background:#0a2f38; }

/* ---- быстрые фильтры ---- */
.ds-u47-hero__bystro{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin-top:18px;
  max-width:860px;
}
.ds-u47-hero__chip{
  display:inline-flex;
  align-items:center;
  height:36px;
  padding:0 16px;
  border-radius:var(--r-pill);
  background:var(--c-chip-fon);
  border:1px solid var(--c-linija);
  color:var(--c-temnyj);
  font-size:14px;
  text-decoration:none;
}
.ds-u47-hero__chip:hover{ background:#e6ecea; }
.ds-u47-hero__vse{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-left:12px;
  color:var(--c-temnyj);
  font-size:14px;
  text-decoration:none;
}
.ds-u47-hero__vse svg{ width:18px; height:18px; fill:var(--c-vtor); }
.ds-u47-hero__vse:hover{ text-decoration:underline; }

/* ---- узкий экран ---- */
@media (max-width:900px){
  .ds-u47-hero{ min-height:0; }
  .ds-u47-hero__foto{ width:100%; height:260px; inset:0 0 auto 0; }
  .ds-u47-hero__zavesa{
    background:linear-gradient(180deg, rgba(247,249,248,0) 0%, rgba(247,249,248,.55) 66%, var(--c-fon) 88%);
  }
  .ds-u47-hero__nutro{ padding:292px 16px 0; }
  .ds-u47-hero__zagolovok{ font-size:40px; letter-spacing:-.6px; }
  .ds-u47-hero__podzagolovok{ font-size:17px; }
  .ds-u47-hero__podzagolovok br{ display:none; }
  .ds-u47-hero__opory{ gap:18px 24px; }
  .ds-u47-hero__poisk{
    flex-wrap:wrap;
    border-radius:20px;
    padding:14px 16px;
  }
  .ds-u47-hero__knopka{ width:100%; justify-content:center; }
  .ds-u47-hero__pero{ display:none; }
}

/* ================= u47-napravleniya ================= */
/* Блок «Куда вас тянет?» — шесть направлений главной uchastki47.
   Фотография каждой карточки подставляется файлом img/napr-*.jpg;
   пока файла нет, карточка держит цвет и остаётся читаемой. */

.ds-u47-napravleniya{
  --c-temnyj:#0b2b33;
  --c-vtor:#5c6b70;
  --c-fon:#f7f9f8;
  --c-belyj:#ffffff;
  --c-ssylka:#27476d;
  --c-plashka:#132c38;
  --r-karta:16px;

  background:var(--c-fon);
  font-family:'Inter','Helvetica Neue',Arial,'DejaVu Sans',sans-serif;
  color:var(--c-temnyj);
  padding:56px 0 64px;
}
.ds-u47-napravleniya__nutro{
  max-width:1160px;
  margin:0 auto;
  padding:0 16px;
}
.ds-u47-napravleniya__shapka{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:26px;
}
.ds-u47-napravleniya__zagolovok{
  margin:0 0 6px;
  font-size:40px;
  line-height:1.1;
  font-weight:740;
  letter-spacing:-.8px;
}
.ds-u47-napravleniya__podpis{
  margin:0;
  font-size:16px;
  color:var(--c-vtor);
}
.ds-u47-napravleniya__vse{
  flex:0 0 auto;
  font-size:15px;
  color:var(--c-ssylka);
  text-decoration:none;
  border-bottom:1px solid rgba(39,71,109,.35);
  padding-bottom:2px;
}
.ds-u47-napravleniya__vse:hover{ border-bottom-color:var(--c-ssylka); }

.ds-u47-napravleniya__setka{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin:0;
  padding:0;
  list-style:none;
}
.ds-u47-napravleniya__karta{
  position:relative;
  display:block;
  min-height:206px;
  padding:22px 24px 24px;
  border-radius:var(--r-karta);
  overflow:hidden;
  color:var(--c-belyj);
  text-decoration:none;
  background-color:var(--c-plashka);
  background-size:cover;
  background-position:center;
  isolation:isolate;
}
.ds-u47-napravleniya__karta::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(95deg, rgba(10,26,33,.80) 0%, rgba(10,26,33,.58) 40%, rgba(10,26,33,.14) 80%, rgba(10,26,33,.04) 100%);
}
.ds-u47-napravleniya__karta--gorod{ background-image:url("img/napr-peterburg.jpg"); }
.ds-u47-napravleniya__karta--les{ background-image:url("img/napr-les.jpg"); }
.ds-u47-napravleniya__karta--voda{ background-image:url("img/napr-voda.jpg"); }
.ds-u47-napravleniya__karta--zhizn{ background-image:url("img/napr-postoyannaya-zhizn.jpg"); }
.ds-u47-napravleniya__karta--dacha{ background-image:url("img/napr-dacha.jpg"); }
.ds-u47-napravleniya__karta--dom{ background-image:url("img/napr-dom.jpg"); }

.ds-u47-napravleniya__znak{
  display:block;
  width:26px;
  height:26px;
  margin-bottom:14px;
  fill:rgba(255,255,255,.92);
}
.ds-u47-napravleniya__imya{
  display:block;
  font-size:26px;
  line-height:1.15;
  font-weight:720;
  letter-spacing:-.4px;
  margin-bottom:8px;
  text-shadow:0 1px 12px rgba(6,20,26,.45);
}
.ds-u47-napravleniya__slova{
  display:block;
  font-size:14px;
  line-height:1.4;
  color:rgba(255,255,255,.86);
  max-width:230px;
  text-shadow:0 1px 10px rgba(6,20,26,.45);
}
.ds-u47-napravleniya__metka{
  position:absolute;
  right:18px;
  bottom:18px;
  display:inline-flex;
  align-items:center;
  height:32px;
  padding:0 14px;
  border-radius:8px;
  background:rgba(255,255,255,.92);
  color:var(--c-temnyj);
  font-size:14px;
  font-weight:640;
}
.ds-u47-napravleniya__karta:hover .ds-u47-napravleniya__metka{ background:var(--c-belyj); }

@media (max-width:1100px){
  .ds-u47-napravleniya__setka{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:700px){
  .ds-u47-napravleniya{ padding:40px 0 44px; }
  .ds-u47-napravleniya__nutro{ padding:0 16px; }
  .ds-u47-napravleniya__shapka{ flex-direction:column; align-items:flex-start; gap:10px; }
  .ds-u47-napravleniya__zagolovok{ font-size:28px; }
  .ds-u47-napravleniya__setka{ grid-template-columns:1fr; gap:14px; }
  .ds-u47-napravleniya__karta{ min-height:170px; }
  .ds-u47-napravleniya__imya{ font-size:22px; }
}

/* ================= u47-dalshe ================= */
/* Блок «Что меняется, если отъехать дальше?» — три ступени удалённости и врезка с картой. */

.ds-u47-dalshe{
  --c-temnyj:#0b2b33;
  --c-vtor:#5c6b70;
  --c-fon:#e4eeea;
  --c-belyj:#ffffff;
  --c-akcent:#0d3b45;
  --c-ssylka:#27476d;
  --c-linija:#cfdfda;

  background:var(--c-fon);
  font-family:'Inter','Helvetica Neue',Arial,'DejaVu Sans',sans-serif;
  color:var(--c-temnyj);
  padding:52px 0 56px;
}
.ds-u47-dalshe__nutro{ max-width:1160px; margin:0 auto; padding:0 16px; }
.ds-u47-dalshe__shapka{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:30px;
}
.ds-u47-dalshe__zagolovok{
  margin:0 0 6px;
  font-size:36px;
  line-height:1.12;
  font-weight:740;
  letter-spacing:-.7px;
}
.ds-u47-dalshe__podpis{ margin:0; font-size:15px; color:var(--c-vtor); }
.ds-u47-dalshe__vse{
  flex:0 0 auto;
  font-size:15px;
  color:var(--c-ssylka);
  text-decoration:none;
  border-bottom:1px solid rgba(39,71,109,.35);
  padding-bottom:2px;
}
.ds-u47-dalshe__vse:hover{ border-bottom-color:var(--c-ssylka); }

.ds-u47-dalshe__ryad{
  display:grid;
  grid-template-columns:1fr 1fr 1fr 300px;
  gap:0 26px;
  align-items:start;
}
.ds-u47-dalshe__stupen{
  position:relative;
  /* нижние 78px отданы рисунку (он лежит absolute по bottom:0): без этого запаса
     линейная гравюра перечёркивала последний пункт списка — 16.09. */
  min-height:250px;
  padding-right:26px;
  padding-bottom:78px;
  border-right:1px solid var(--c-linija);
}
.ds-u47-dalshe__stupen::after{
  content:"→";
  position:absolute;
  top:6px;
  right:-13px;
  width:26px;
  text-align:center;
  color:var(--c-vtor);
  font-size:18px;
  background:var(--c-fon);
}
.ds-u47-dalshe__stupen--posledniy{ border-right:0; }
.ds-u47-dalshe__stupen--posledniy::after{ content:none; }
.ds-u47-dalshe__shag{
  margin:0 0 14px;
  font-size:24px;
  font-weight:720;
  letter-spacing:-.4px;
}
.ds-u47-dalshe__spisok{ margin:0; padding:0; list-style:none; }
.ds-u47-dalshe__punkt{
  position:relative;
  padding-left:26px;
  margin-bottom:9px;
  font-size:15px;
  line-height:1.35;
}
.ds-u47-dalshe__punkt::before{
  content:"";
  position:absolute;
  left:2px;
  top:5px;
  width:12px;
  height:12px;
  border:2px solid var(--c-akcent);
  border-radius:50%;
  opacity:.75;
}
.ds-u47-dalshe__risunok{
  position:absolute;
  right:26px;
  bottom:0;
  width:150px;
  height:auto;
  opacity:.55;
  pointer-events:none;
}

.ds-u47-dalshe__vrezka{
  background:var(--c-belyj);
  border-radius:18px;
  padding:22px 24px 24px;
}
.ds-u47-dalshe__kompas{ width:34px; height:34px; fill:var(--c-akcent); margin-bottom:12px; }
.ds-u47-dalshe__slova{ margin:0 0 18px; font-size:15px; line-height:1.45; }
.ds-u47-dalshe__knopka{
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:46px;
  padding:0 24px;
  border-radius:999px;
  background:transparent;
  border:1px solid var(--c-akcent);
  color:var(--c-akcent);
  font-size:15px;
  font-weight:620;
  text-decoration:none;
}
.ds-u47-dalshe__knopka:hover{ background:rgba(13,59,69,.06); }

@media (max-width:1100px){
  .ds-u47-dalshe__ryad{ grid-template-columns:1fr 1fr; gap:26px; }
  .ds-u47-dalshe__stupen{ border-right:0; }
  .ds-u47-dalshe__stupen::after{ content:none; }
  .ds-u47-dalshe__vrezka{ grid-column:1 / -1; }
}
@media (max-width:700px){
  .ds-u47-dalshe{ padding:40px 0 44px; }
  .ds-u47-dalshe__nutro{ padding:0 16px; }
  .ds-u47-dalshe__shapka{ flex-direction:column; align-items:flex-start; gap:10px; }
  .ds-u47-dalshe__zagolovok{ font-size:26px; }
  .ds-u47-dalshe__ryad{ grid-template-columns:1fr; }
  .ds-u47-dalshe__stupen{ min-height:0; padding-right:0; padding-bottom:0; }
  .ds-u47-dalshe__risunok{ display:none; }
}

/* ================= u47-polosa ================= */
/* Полоса доверия в подвале главной: сколько участков, сколько районов, на чём стоим.
   Числа подставляет тема (data-u47-schyotchik) — в разметке стоят значения макета. */

.ds-u47-polosa{
  --c-temnyj:#0b2b33;
  --c-vtor:#5c6b70;
  --c-fon:#f2f6f5;
  --c-akcent:#0d3b45;
  --c-linija:#e0e8e6;

  background:var(--c-fon);
  border-top:1px solid var(--c-linija);
  font-family:'Inter','Helvetica Neue',Arial,'DejaVu Sans',sans-serif;
  color:var(--c-temnyj);
  padding:22px 0;
}
.ds-u47-polosa__nutro{
  position:relative;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:18px 44px;
  max-width:1160px;
  margin:0 auto;
  padding:0 16px;
}
.ds-u47-polosa__punkt{
  display:grid;
  grid-template-columns:auto auto;
  grid-template-rows:auto auto;
  column-gap:12px;
  align-items:center;
}
.ds-u47-polosa__znak{
  grid-row:1 / 3;
  width:30px;
  height:30px;
  fill:var(--c-akcent);
}
.ds-u47-polosa__chislo{
  font-size:22px;
  font-weight:740;
  line-height:1.1;
  letter-spacing:-.3px;
}
.ds-u47-polosa__slova{
  font-size:13px;
  color:var(--c-vtor);
  line-height:1.3;
}
.ds-u47-polosa__hvost{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0;
  font-size:14px;
  line-height:1.35;
  color:var(--c-temnyj);
}
.ds-u47-polosa__list{ flex:0 0 auto; width:24px; height:24px; fill:var(--c-akcent); }
.ds-u47-polosa__pero{
  position:absolute;
  right:36px;
  top:-6px;
  width:180px;
  height:auto;
  opacity:.9;
  pointer-events:none;
}

@media (max-width:900px){
  .ds-u47-polosa__nutro{ padding:0 16px; gap:16px 28px; }
  .ds-u47-polosa__pero{ display:none; }
  .ds-u47-polosa__hvost{ flex-basis:100%; }
}