/* Start:/local/components/vmeste/header.block/templates/.default/style.css?17882922968722*/
/* ========== DESKTOP / ОБЩЕЕ ========== */

.vhh-header{
  position:relative;
  isolation:isolate;
  min-height:clamp(720px,70vh,860px);
}

.vhh-bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  z-index:-2;
}

.vhh-header::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(90deg,
    rgba(0,0,0,.66) 0%,
    rgba(0,0,0,.45) 48%,
    rgba(0,0,0,.2) 68%,
    rgba(0,0,0,0) 80%);
  z-index:-1;
}

.vhh-content.container{
  position:relative;
  min-height:clamp(720px,70vh,860px);
  padding-top:300px;
  padding-bottom:clamp(24px,6vh,64px);
  display:grid;
  grid-template-rows:1fr auto; /* текст/кнопки + крошки */
}

/* убиваем clearfix из темы, который лезет в ::before контейнера */
.vhh-content.container::before{
  content:none !important;
  display:none !important;
}

.vhh-text{
  align-self:start;
  max-width:65%;
  color:#fff;
}

.vhh-title{
  margin:0 0 12px 0;
  line-height:1.15;
  font-weight:500;
  font-size:clamp(28px,3.4vw,48px);
  letter-spacing:.2px;
}

.vhh-subtitle{
  margin:0 0 24px 0;
  line-height:1.45;
  font-weight:400;
  font-size:clamp(16px,1.4vw,20px);
  opacity:.95;
}

.vhh-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.vhh-actions .button-def{
  /* убрал дубли: оставил итоговые значения */
  padding:20px 30px;
  font-size:16px; line-height:1.2;
  border-radius:999px;
  text-decoration:none;
  display:inline-flex;
  align-items:center; justify-content:center;
  min-height:44px; white-space:nowrap;
  transition:background-color .3s ease,color .3s ease;
}

.vhh-actions .button-def.primary{
  background:#66b132; color:#fff;
}
.vhh-actions .button-def.primary:hover{
  background:#489314; color:#fff;
}
.vhh-actions .button-def.secondary{
  background:rgba(241,241,241,.7); color:#555;
}
.vhh-actions .button-def.secondary:hover{
  background:#66b132; color:#fff;
}

.vhh-breadcrumbs-slot{
  align-self:end;
  padding-top:16px;
}
.vhh-breadcrumbs-slot .bx-breadcrumb{
  margin:0; padding:10px 0 0 0; color:#fff;
}
.vhh-breadcrumbs-slot .bx-breadcrumb a{ color:#fff; }
.vhh-breadcrumbs-slot .bx-breadcrumb .bx-breadcrumb-item{ opacity:.95; }

.inner-breadcrumb-wrap {padding:0 15px 0 ;}


/* видео-фон на десктопах */
.vhh-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  z-index:-2;              /* под градиентом .vhh-header::before, над картинкой */
  display:block;
  pointer-events:none;     /* клики проходят сквозь видео */
}

/* картинку опустим чуть ниже, чтобы видео было над ней */
.vhh-bg{ z-index:-3; }

/* на мобилках видео скрываем полностью */
@media (max-width:767px){
  .vhh-video{ display:none !important; }
  .vhh-bg{ z-index:-2; }   /* картинка снова "главная" */
}





.widget-breadcrumbs-modification .inner-breadcrumb li{
  white-space:normal;        /* внутри чипа можно переносить */
  max-width:100%;
}

.widget-breadcrumbs-modification .inner-breadcrumb a,
.widget-breadcrumbs-modification .inner-breadcrumb span{
  white-space:normal;
  overflow-wrap:anywhere;    /* ломаем очень длинные слова/ссылки */
  word-break:break-word;     /* fallback */
}







/* ========== MOBILE ========== */
@media (max-width:767px){

  .vhh-header{
    min-height:auto; position:relative;
  }

  /* верхнее затемнение у картинки */
  .vhh-header::after{
    content:"";
    position:absolute; top:0; left:0; right:0;
    height:60vh; pointer-events:none; z-index:1;
    background:linear-gradient(to bottom, rgba(0,0,0,.60) 0%, rgba(0,0,0,0) 55%);
  }

  .vhh-bg{
    position:static;
    width:100%; height:60vh;
    display:block; object-fit:cover;
  }

  /* контейнер только как геометрия и якорь для абсолютных крошек */
  .vhh-content.container{
    display:flex; flex-direction:column;
    position:relative;
    min-height:auto;
    overflow:visible;
    padding:0; width:100%;
    /* НЕТ фона! фон переехал в .vhh-pane */
  }

  /* НОВАЯ ОБЁРТКА для текста и кнопок: здесь весь мобильный фон */
  .vhh-pane{
    position:relative;
    background:var(--vhh-mobile-bg,#858585);
  }

  /* слой 1: лёгкий «плёночный» шум — независимо от градиента */
  .vhh-pane::before{
    content:"";
    position:absolute; inset:0;
    pointer-events:none;
    z-index:0;                      /* ниже градиента и контента */
    background:
      url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'>\
  <filter id='n'>\
    <feTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='2' stitchTiles='stitch'/>\
    <feColorMatrix type='saturate' values='0'/>\
    <feComponentTransfer>\
      <feFuncR type='gamma' amplitude='0.9' exponent='1.2' offset='0'/>\
      <feFuncG type='gamma' amplitude='0.9' exponent='1.2' offset='0'/>\
      <feFuncB type='gamma' amplitude='0.9' exponent='1.2' offset='0'/>\
      <feFuncA type='table' tableValues='0 0.11'/>\
    </feComponentTransfer>\
  </filter>\
  <rect width='100%' height='100%' filter='url(%23n)'/>\
</svg>") repeat;
    background-size:100px 100px;
   /* opacity:.11; */                  /* стало заметно мягче */
    /* при желании можно добавить: mix-blend-mode:overlay; */
  }

  /* слой 2: градиент снизу вверх — независимо от шума */
  .vhh-pane::after{
    content:"";
    position:absolute; inset:0;
    pointer-events:none;
    z-index:1;                     /* над шумом, под контентом */
    background:linear-gradient(to top, rgba(0,0,0,.30) 0%, rgba(0,0,0,0) 60%);
  }

  /* контент внутри обёртки — поверх слоёв */
  .vhh-pane > *{
    position:relative; z-index:2;
  }

  /* крошки «вытаскиваем» к нижней кромке картинки */
  .vhh-breadcrumbs-slot{
    position:absolute; left:0; right:0; top:0;
    transform:translateY(calc(-100% - 8px));
    padding:0 15px 12px;
    z-index:3; /* выше .vhh-header::after и .vhh-pane::after */
  }
  .vhh-breadcrumbs-slot .bx-breadcrumb a{ color:#fff; }

.inner-breadcrumb-wrap {padding:10px 15px 0 ;}

	ol.inner-breadcrumb li {
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    background: rgba(44, 44, 44, 0.25);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.18);
}
	/* положи это в конец твоего style.css */
.vhh-header .widget-breadcrumbs-modification .inner-breadcrumb li.active{
  background: rgba(44, 44, 44, 0.25) !important;          /* обнуляет любые background-* */
 /* background-color: transparent !important;  если задано отдельно */
}

/* неактивные пункты (те, где есть <a>) — белые и с подчёркиванием */
  .vhh-header .widget-breadcrumbs-modification .inner-breadcrumb li:not(.active) a,
  .vhh-header .widget-breadcrumbs-modification .inner-breadcrumb li:not(.active) a:link,
  .vhh-header .widget-breadcrumbs-modification .inner-breadcrumb li:not(.active) a:visited {
    color:#fff !important;
    text-decoration: underline !important;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
opacity:1;
  }

  /* если вдруг неактивный элемент без ссылки (редко, но на всякий) */
  .vhh-header .widget-breadcrumbs-modification .inner-breadcrumb li:not(.active) span {
    color:#fff !important;
    text-decoration: underline !important;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
  }

  /* активный — белый, без подчёркивания */
  .vhh-header .widget-breadcrumbs-modification .inner-breadcrumb li.active span{
    text-decoration: none !important;
  }

  .vhh-header::before{ display:none; }

  .vhh-text{
    align-self:start;
    max-width:min(820px,80ch);
    margin:0 auto;
    padding:20px 15px 18px;
    color:#fff;
  }

  .vhh-title{ font-size:clamp(28px,6vw,33px); margin-bottom:10px; }
  .vhh-subtitle{ font-size:clamp(18px,4vw,19px); margin-bottom:16px; }

  .vhh-actions{
    padding:0 ;
  }

  .vhh-actions .button-def{
    flex:1 1 auto; justify-content:center;
  }
}
/* End */
/* /local/components/vmeste/header.block/templates/.default/style.css?17882922968722 */