/* ============================================================
   /towners/ — ДВА ЭКРАНА.
   Экран 1 (.towners-screen1): картинка cover на ВЕСЬ первый экран
     (100vh − хедер, высота через --hero-h из JS), прямо под хедером.
     Крошки + «ИНОГОРОДНИМ» + 2 абзаца — ПОВЕРХ картинки.
   Экран 2 (.out-of-towners-sect): контакты + карточки, чистое отделение.
   Активируется классом body.page-towners.
   ============================================================ */
.page-towners .content{position:relative}

.page-towners .towners-screen1{
  position:relative;
  min-height:var(--hero-h, calc(100vh - 98px));      /* весь первый экран под хедером */
  background:url(/upload/towners/inogorod.jpg) center top / cover no-repeat;
  display:flex; flex-direction:column;
}
.page-towners .out-of-towners-sect{position:relative; background:#fff}

/* крошки-контейнер поверх картинки, на всю ширину (иначе схлопывается по центру) */
.page-towners .towners-screen1 > .container{ flex:0 0 auto; width:100%; }

/* ---------- десктоп / планшет ---------- */
@media(min-width:768px){
  .page-towners .grid-page{ flex:1 1 auto; display:flex; background:transparent; margin:0; padding:0; }
  .page-towners .grid-page > .container{ width:100%; display:flex; }
  .page-towners .grid-page__row-title{
    flex:1; display:grid;
    grid-template-columns:minmax(0,22vw) minmax(0,22vw) 1fr;
    grid-template-rows:auto 1fr auto 1fr;   /* заголовок сверху, абзацы — к середине */
    column-gap:3vw;
    padding-bottom:2vw;
  }
  .page-towners .grid-page__title{ grid-column:1 / -1; grid-row:1; margin:0; }
  .page-towners .grid-page .title-text{ margin:0; grid-row:3; align-self:start; }
  .page-towners .grid-page .title-text:nth-of-type(1){ grid-column:1; }
  .page-towners .grid-page .title-text:nth-of-type(2){ grid-column:2; }
  .page-towners .out-of-towners-sect{ padding-top:clamp(48px,5vw,90px); }
}

/* ---------- мобилка: заголовок сверху, абзацы в светлой зоне ---------- */
@media(max-width:767px){
  .page-towners .towners-screen1{ background-position: 34% top; }
  .page-towners .grid-page{ flex:1 1 auto; display:flex; background:transparent; margin:0; }
  .page-towners .grid-page > .container{ width:100%; display:flex; }
  .page-towners .grid-page__row-title{
    flex:1; display:flex; flex-direction:column;
    padding-top:calc(20 / var(--device-size) * 100vw);
    padding-bottom:calc(96 / var(--device-size) * 100vw);
  }
  .page-towners .grid-page__title{ margin:0 0 auto; }
  .page-towners .grid-page .title-text{ margin:0 0 calc(12 / var(--device-size) * 100vw); max-width:78%; }
  .page-towners .out-of-towners-sect{ padding-top:calc(40 / var(--device-size) * 100vw); }
}