@media (min-width: 960px) {
   .responsive-menu-toggle-icon  {
        display: none;
    }
}

/* Базовые настройки для шапки-сетки */
header[role="banner"] {
  max-width:1750px;
  margin: 0 auto;
  display: grid !important;
  height: auto !important; 
  min-height: max-content;
  
  
  /* Левая колонка занимает всё свободное место, правая — под размер Блоков 2 и 3 */
  grid-template-columns: 1fr auto; 
  /* Две строки автоматической высоты */
  grid-template-rows: auto auto;
  
  gap: 15px 20px; 
  align-items: center; 
  padding: 9px 11px; 
  box-sizing: border-box; 
}

/* ИСПРАВЛЕНИЕ: Находим тот самый безымянный div, в котором спрятан Блок 1.
   Он является первым прямым потомком (> div:first-child) внутри шапки. */
header[role="banner"] > div:first-child {
  grid-column: 1 / 2;   /* Встает в первую колонку (слева) */
  grid-row: 1 / 3;      /* ОБЪЕДИНЯЕТ строки 1 и 2 по вертикали! */
  justify-self: start;  /* Прижимает Блок 1 к левому краю сайта */
  align-self: center;   /* Центрирует Блок 1 по высоте шапки */
  
  width: 100%;          /* Растягиваем контейнер, если внутри широкие элементы */
}
footer[role="contentinfo"] .region{
max-width:1750px;
  margin: 0 auto;
  display: flex;         /* Включаем гибкую сетку */
  flex-wrap: wrap;       /* Разрешаем блокам перепрыгивать ниже */
  column-gap: 90px;   /* Отступ ТОЛЬКО между колонками (по горизонтали) */
  row-gap: 10px;
 padding-bottom:10px; }
footer[role="contentinfo"] #block-usteatr-adres, footer[role="contentinfo"] #block-usteatr-adres a{color: #FFFFFF;font-size: 14px;
}
/* Сам Блок 1 внутри этого div (сбрасываем grid-свойства, они больше не нужны здесь) */
.#block-usteatr-site-branding {
  display: block;
}

/* БЛОК 2: Справа вверху (во второй колонке, в первой строке) */
#block-usteatr-pushkinskayakarta {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  justify-self: start; 
  min-width: 263px;
}

/* БЛОК 3: Справа внизу (во второй колонке, во второй строке — строго под Блоком 2) */
#block-usteatr-knopkabvipogostu {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  justify-self: end;
}

/* Делаем саму ссылку флекс-контейнером с жестким направлением в ряд */
#block-usteatr-pushkinskayakarta .main-link {
  display: flex !important;
  flex-direction: row !important; /* ЖЕСТКО: выстраивает картинку и текст слева направо */
  align-items: center !important;  /* Центрирует текст по вертикали относительно картинки */
  gap: 15px !important;            /* Расстояние между картинкой и текстом */
  text-decoration: none;           
  color: inherit;                  
  width: max-content;              
}

/* Убеждаемся, что картинка ведет себя правильно */
#block-usteatr-pushkinskayakarta .main-link img,
#block-usteatr-pushkinskayakarta .main-link .link-img {
  /*display: inline-block !important;  Отменяем display: block, если он был задан ранее */
  vertical-align: middle;
  height: auto;             
   flex-shrink: 0;   /* Запрещает картинке сжиматься */
}

/* Настройки для текста (справа от картинки) */
#block-usteatr-pushkinskayakarta .main-link span,
#block-usteatr-pushkinskayakarta .main-link .link-text {
  display: inline-block !important; /* Разрешает применение ширины */
  max-width: 212px !important;      /* Ширина, при которой текст переносится на 2 строчку */
  line-height: 1.3;         
  text-align: left;         
  margin: 0;  
  font-family: 'Georgia', serif;
   font-size: 16px;
   text-transform: uppercase;
   color:#563D0E;
}

.afisha #block-usteatr-page-title{
    display: none;
	}
.vvjs .vvjs-items .vvjs-item-inner {
    padding-block-start: 0px!important;
	}
.vvjs .vvjs-inner > .slide-indicators {
    max-width: 1750px;
    inset-inline-start: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin: 0 auto !important;
    top: 50%;
    
    /* ХАК №1: Сжимаем высоту контейнера в 0, чтобы белому фону негде было рисоваться */
    padding: 0 !important;
    overflow: visible !important; /* Разрешаем кнопкам вылезать наружу из нулевой высоты */
    
    /* ХАК №2: Сбрасываем фон и рамки */
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    
    /* ХАК №3: Защита от окрашивания в режиме контрастности */
    forced-color-adjust: none !important;
}

/* Принудительно возвращаем высоту и видимость самим кнопкам */
.vvjs .vvjs-inner > .slide-indicators button,
.vvjs .vvjs-inner > .slide-indicators .vvjs-prev-btn,
.vvjs .vvjs-inner > .slide-indicators .vvjs-next-btn {
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
}


.vvjs-items {
    /* ИСПРАВЛЕНО: Убираем 2200px, делаем блок адаптивным на весь экран */
   width: 100vw !important;
    max-width: 2200px !important; /* Ограничиваем ширину под рамки вашего сайта */
    margin: 0 auto !important;    /* Центрируем весь слайдер на мониторе */
    height: 479px!important;     /* Единая зафиксированная высота */
    position: relative !important;
    overflow: hidden !important;  /* Прячет всё, что вылезает за пределы 1200px */
}

/* ВНУТРЕННИЙ БЛОК СЛАЙДА */
.vvjs-item-inner {
    width: 100% !important;
    height: 100% !important;     /* Занимает все 500px высоты от родителя */
    display: flex !important;
    justify-content: center !important; /* Центрирует картинку по горизонтали */
    align-items: center !important;     /* Центрирует картинку по вертикали */
    position: relative !important;
    overflow: hidden !important;
	 height: 479px!important;   
}

/* КАРТИНКА ВНУТРИ СЛАЙДА */
.vvjs-item-inner img {
    min-width: 100% !important;
    min-height: 100% !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important; /* Обрезает излишки без искажения пропорций */
    object-position: center center !important; /* Намертво держит фокус на центре */
    flex-shrink: 0 !important;    /* Запрещает картинке деформироваться при сжатии */
	opacity: 1 !important;
    visibility: visible !important;
}
.bvi-active .vvjs .vvjs-inner > .slide-indicators {
    height: 0!important;
	}
.bvi-active #block-usteatr-views-block-slayder-na-glavnoy-block-1{
    display:none;
	}

.vvjs-item-inner .views-field-field-tekst { 
    position: absolute !important;
    bottom: 0 !important;
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    
    width: 100% !important;
    max-width: 1750px !important; 
    height: 100% !important;
    pointer-events: none !important;
    z-index: 2 !important; 

    /* ГЛАВНЫЙ ХАК: Заставляем белый цвет фона стать 100% прозрачным */
    /*mix-blend-mode: multiply !important; */
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    outline: none !important;
}

/* Настройка самого текста, чтобы он оставался видимым и ярким */
.vvjs-item-inner .views-field-field-tekst .field-content { 
    position: absolute !important;
   top: 40px !important;
    right:80px !important; 
   font-family: Georgia, serif !important;
    font-size: 32px !important;
    line-height: 47px !important;
    letter-spacing: 0.07em !important;
    font-weight: 100 !important;
        /* Хак для дополнительного визуального утончения букв */
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    color: #EDE9E6 !important; 
     display: block !important;
}
.vvjs-item-inner .views-field-field-tekst .field-content::after {
    content: "" !important;
    display: block !important;
        /* 1. НАСТРОЙКА РАЗМЕРОВ ЛИНИИ */
    width: 150px !important;       /* Задайте здесь нужную длину линии в пикселях */
    height: 2px !important;        /* Толщина линии */
    background-color: #EDE9E6 !important; /* Цвет линии */
        /* 2. ПОЗИЦИОНИРОВАНИЕ ЛИНИИ */
    margin-top: 15px !important;    /* Расстояние от текста вниз до линии */
    margin-right: auto !important;  /* ХАК: Прижимает короткую линию к правому краю, подстраиваясь под текст */
}
.views-field-field-izobrazhenie-dlya-mobilnog {
       display:none; 
    }
.imagefield_slideshow-wrapper {
    width: 100%;
}

/* 2. Контейнер слайдера — задаем фиксированную высоту */
.imagefield_slideshow-wrapper .cycle-slideshow {
    position: relative;
    width: 100% !important;
    overflow: hidden;
    background-color: #f0f0f0; /* Цвет фона для пустых полей по бокам вертикальных фото */
    height: 800px !important; 
}

/* 3. Стили для картинок внутри слайдера */
.imagefield_slideshow-wrapper .cycle-slideshow img {
    /* Принудительно заставляем картинку подстраиваться по высоте слайдера */
    height: 100% !important;
       /* Сбрасываем фиксированную ширину, чтобы она считалась автоматически по пропорциям */
    width: auto !important;
      /* Ограничиваем максимальную ширину, чтобы очень широкое фото не вылезало за экран */
    max-width: 100% !important;
      /* Сохраняем пропорции без искажений */
    object-fit: contain !important;
     /* Идеальное центрирование по горизонтали и вертикали */
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
	
}
.slick--view--novosti{max-width:1379px;
   
}
#block-usteatr-novostiiknopka{max-width: 1750px;
    margin: 0 auto;
	display: flex !important; 
  flex-wrap: wrap !important;	
  flex-direction: row;
  align-items: stretch !important;/* МАГИЯ: Автоматически делает Блок 2 равным по высоте Блоку 1 */
  gap: 20px;                      /* Отступ между Блоком 1 и Блоком 2 */
 
   
}
#block-usteatr-views-block-novosti-block-1-2 h2{padding: 0 2px;
    margin-top: 0px;
	margin-bottom: 10px;
   
}
#block-usteatr-knopkavsenovosti {
  flex: 1; /* Опционально: распределяет место */
  position: relative !important; /* ОБЯЗАТЕЛЬНО: удерживает ссылку внутри границ этого блока */
  padding-bottom: 60px !important; /* Резервируем место снизу, чтобы текст не наезжал на ссылку */
}
#block-usteatr-knopkavsenovosti a{
  position: absolute !important;  /* Вырываем ссылку из общего потока */
  bottom: 15px;                   /* Отступ от самого низа Блока 2 */
  right: 15px;                    /* Отступ от правого края Блока 2 */
  background-color: #640909 !important;
   border-radius: 20px !important;
   border: none !important;
    color: #FFFFFF !important;
    padding: 13px 18px 10px !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    font-size: 14px;
    text-transform: uppercase; 
}
/* Контейнер слайдера должен быть относительным */
.slick__slide .views-field-field-tekst-novosti{max-width:437px;
  
}
/* Контейнер слайдера */
.slick {
  position: relative;
}
.slick .views-field-field-data-novosti a{color: black;
  font-weight: bold;
  text-decoration: none;
}
/* Общие стили для кнопок-кружков */
.slick-prev, 
.slick-next {
  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: -9999px !important; /* На всякий случай полностью убираем текст темы */
  position: absolute;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer;
  border: none !important;
  border-radius: 50% !important;
  background: rgba(0, 0, 0, 0.6) !important;
  z-index: 99;
}

.slick-prev:hover, 
.slick-next:hover {
  background: rgba(0, 0, 0, 0.85) !important;
}

/* Расположение по бокам внутри слайдера */
.slick-prev { left: 12px !important; right: auto !important; bottom: auto !important; }
.slick-next { right: 12px !important; left: auto !important; bottom: auto !important; }

/* ХВОСТИК СТРЕЛКИ (прямая линия) */
.slick-prev::before,
.slick-next::before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  margin-top: -1.81px !important; /* Ровно половина от высоты 2px для центрирования */
  width: 10px !important;      /* Длина хвостика */
  height: 1.5px !important;       /* Толщина хвостика */
  background: #ffffff !important;
}

/* Настраиваем положение хвостика внутри круга */
.slick-prev::before { left: 12px !important; }
.slick-next::before { right: 12px !important; }

/* УГОЛОК СТРЕЛКИ (наконечник) */
.slick-prev::after,
.slick-next::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  margin-top: -4px !important; /* Центрирование уголка высотой 6px по оси */
  width: 6px !important;       /* Размер уголка */
  height: 6px !important;      /* Размер уголка */
  border-top: 2px solid #ffffff !important;
  border-left: 2px solid #ffffff !important;
}

/* Идеальная стыковка уголка с хвостиком и поворот */
.slick-prev::after {
  left: 11px !important; /* Ставим вплотную к левому краю хвостика */
  transform: rotate(-45deg) !important;
}

.slick-next::after {
  right: 11px !important; /* Ставим вплотную к правому краю хвостика */
  transform: rotate(135deg) !important;
}
.slick-prev { 
  left: -40px !important; 
  right: auto !important; 
  bottom: auto !important; 
}

/* Правая кнопка — выносим вправо за край слайдера */
.slick-next { 
  right: -20px !important; 
  left: auto !important; 
  bottom: auto !important; 
}
@media (max-width: 1900px) {
	.slick{margin: 0 20px;}
}
@media (max-width: 1800px) {
	 #block-usteatr-novostiiknopka {
    flex-direction: column !important;
  }
  
  /* Возвращаем ссылку в обычный поток текста и двигаем влево */
  #block-usteatr-knopkavsenovosti {
    padding-bottom: 0 !important; /* Больше не нужен большой отступ снизу */
  }
  
  #block-usteatr-knopkavsenovosti a {
    position: static !important; /* Отменяем absolute, ссылка возвращается в текст */
    display: inline-block !important;  /* Делаем во всю ширину для удобства нажатия пальцем */
    text-align: left !important;  /* Выравниваем текст ссылки по левому краю */
    margin-top: 0x !important;  /* Делаем аккуратный отступ от текста блока сверху */
    margin-left: 5px !important;
  }
	.slick{margin: 0 auto;}
}

@media (max-width: 1460px) {
.slick--view--novosti{max-width:900px;
   
}
.slick-next {
    right: -25px !important;
    left: auto !important;
    bottom: auto !important;
}


	.slick{}
}
@media (max-width: 1100px) {
	.slick--view--novosti{
    max-width: 550px!important;
	margin: 0 auto;
	 
}
.slick-prev {
    left: -10px !important;
    right: auto !important;
    bottom: auto !important;
}
   .slick-next {
        right: 0px !important;
        left: auto !important;
        bottom: auto !important;
    }
.slick__slide .views-field-field-tekst-novosti {
 }
 .slick-slide .views-field-field-glavnoe-izobrazhenie .field-content{
 position: relative;
  height: auto;
  width: 270px!important;
  height: 122px!important;
}
.slick__slide .views-field-field-glavnoe-izobrazhenie img
{width: 270px; height: auto;}
.slick__slide .views-field-field-tekst-novosti .field-content
{width: 270px; height: auto;}

}	
@media (max-width: 600px) {
	.slick--view--novosti{
	    max-width: 337px!important;
	margin: 0 auto;
	 
}
.slick-prev {
    left: -10px !important;
    right: auto !important;
    bottom: auto !important;
}
   .slick-next {
        right: 0px !important;
        left: auto !important;
        bottom: auto !important;
    }
.slick__slide .views-field-field-tekst-novosti {
 }
  .slick-slide .views-field-field-glavnoe-izobrazhenie .field-content{
 position: relative;
  height: auto;
  width:163px!important;
  height: 73px!important;
}
.slick__slide .views-field-field-glavnoe-izobrazhenie img
{width: 163px; height: auto;}
.slick__slide .views-field-field-tekst-novosti .field-content
{width: 163px; height: auto;font-size: 13px;}

	.vvjs-items {
    /* ИСПРАВЛЕНО: Убираем 2200px, делаем блок адаптивным на весь экран */
   width: 100vw !important;
    max-width: 600px !important; /* Ограничиваем ширину под рамки вашего сайта */
    margin: 0 auto !important;    /* Центрируем весь слайдер на мониторе */
    height: 130px!important;     /* Единая зафиксированная высота */
    position: relative !important;
    overflow: hidden !important;  /* Прячет всё, что вылезает за пределы 1200px */
}

	.vvjs-item-inner {
    width: 100% !important;
    height: 100% !important;     /* Занимает все 130 высоты от родителя */
    display: flex !important;
    justify-content: center !important; /* Центрирует картинку по горизонтали */
    align-items: center !important;     /* Центрирует картинку по вертикали */
    position: relative !important;
    overflow: hidden !important;
	 height: 130px!important;   
}
	.vvjs-item-inner > img {
        display: none !important;
    }
    
    /* Вытаскиваем мобильное поле на передний план */
    .vvjs-item-inner .views-field-field-izobrazhenie-dlya-mobilnog,
    .vvjs-item-inner .views-field-field-izobrazhenie-dlya-mobilnog {
        z-index: 3 !important; /* Теперь оно сверху! */
        display: block !important;
		 max-width: 600px !important; /* Ограничиваем ширину под рамки вашего сайта */
       margin: 0 auto !important;    /* Центрируем весь слайдер на мониторе */
        height: 130px!important;     
    }
    
    /* Заставляем мобильную картинку из поля fm центроваться идеально по середине */
    .vvjs-item-inner .views-field-field-izobrazhenie-dlya-mobilnog img
    {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        
        width: 100% !important;
        height: 100% !important;
        min-width: 100% !important;
        min-height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
        display: block !important;
    }
	/* КОРРЕКЦИЯ СТРЕЛОЧЕК ПО ВЫСОТЕ НА МОБИЛЬНОМ */
    .vvjs .vvjs-inner > .slide-indicators {
        top: 50% !important; /* Удерживаем привязку к центру */
        
        /* 
           ИСПРАВЛЕНО: Принудительно выравниваем стрелки ровно по середине 
           высоты 130px, компенсируя обнуление родительского контейнера.
        */
        transform: translate(-50%, -50%) !important; 
        
        height: 0 !important; /* Удерживаем хак от белого прямоугольника */
        position: absolute !important;
        z-index: 9999 !important; /* Поднимаем стрелочки НАД мобильной картинкой */
    }

    /* На всякий случай фиксируем мобильный размер самих кнопок-стрелок */
    .vvjs .vvjs-inner > .slide-indicators button,
    .vvjs .vvjs-inner > .slide-indicators .vvjs-prev-btn,
    .vvjs .vvjs-inner > .slide-indicators .vvjs-next-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
	.vvjs-item-inner .views-field-field-tekst .field-content::after {
        display:none !important;
     
}
.vvjs-item-inner .views-field-field-tekst .field-content { 
    position: absolute !important;
	bottom:10px!important;
   top: auto!important;
    right:5px !important; 
	background-color: #00000063;
   font-family: Georgia, serif !important;
    font-size: 14px !important;
    line-height: 20px !important;
    letter-spacing: 0.07em !important;
    font-weight: 100 !important;
        /* Хак для дополнительного визуального утончения букв */
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    color: #EDE9E6 !important; 
     display: block !important;
	 text-align: right;
}
 .vvjs-item-inner .views-field-field-tekst .field-content br {
    display: none !important; /* Отменяем перенос строки */
}
.vvjs-item-inner .views-field-field-tekst .field-content br::after {
    content: " " !important; /* Символ пробела */
    display: inline !important;
}
.vvjs-item-inner .views-field-field-tekst { 
    position: absolute !important; 
    z-index: 4 !important; 
}


 }
@media (max-width: 960px) {
	
    /* 1. Делаем контейнер шапки родителем для абсолютных координат */
    header[role="banner"] {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        position: relative !important;
        
        /* ХАК: Освобождаем фиксированное место снизу шапки (например, 60px) под наш ряд кнопок */
        padding-bottom: 60px !important; 
    }

    /* 2. Брендинг/Логотип — остается на самом верху */
    header[role="banner"] > div:first-child {
        grid-column: auto !important;
        grid-row: auto !important;
        justify-self: start !important;
        align-self: start !important;
        width: 100% !important;
    }
    #block-usteatr-site-branding {
        display: block !important;
        text-align: left !important;
    }

    /* 3. ЖЕСТКО ВЫСТРАИВАЕМ КНОПКИ В ОДНУ ЛИНИЮ НАМЕРТВО */
    #block-usteatr-pushkinskayakarta,
    #block-usteatr-knopkabvipogostu {
        grid-column: auto !important;
        grid-row: auto !important;
        position: absolute !important;
        
        /* Выравниваем обе кнопки по одной линии от нижнего края шапки */
        bottom: 10px !important; 
        width: auto !important;
        min-width: 0 !important;
    }

    /* Пушкинскую карту привязываем строго к левому краю */
    #block-usteatr-pushkinskayakarta {
        left: 0 !important;
        right: auto !important;
    }

    /* Кнопку VIP привязываем строго к правому краю */
    #block-usteatr-knopkabvipogostu {
        right: 10px !important;
        left: auto !important;
    }
 #block-usteatr-site-branding img  {width: 262px;}
   /* Находим тег переноса строки внутри вашего текстового поля */

#block-usteatr-pushkinskayakarta img  {width: 53px; margin-left:10px;}
/* Вместо скрытого тега br принудительно вставляем обычный пробел */


#block-usteatr-pushkinskayakarta .main-link span, #block-usteatr-pushkinskayakarta .main-link .link-text {
      width: 138px;
    font-family: 'Georgia', serif;
    font-size: 12px;
 }
 .imagefield_slideshow-wrapper .cycle-slideshow {
        height: 300px !important; 
}



}