.defenders-ribbon {float:left;}
.vechernie .views-row, .detskie .views-row, .dostupni-po-pk .views-row{
    display: flow-root;
    padding-top: 2px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 17px;
}

.vechernie .views-field img, .detskie .views-field img, .dostupni-po-pk .views-field img {
    float: left;
    padding-right: 10px;
}
.vechernie .views-field-title a, .detskie .views-field-title a, .dostupni-po-pk .views-field-title a {
   font-weight: bold;           /* Делает текст жирным */
    font-size: 16px;
	color:#640909;
	text-transform: uppercase;
	text-decoration: none;   
	
}
.vozr{clear: both;}
.osp {clear: both;}
.avtor-title{float:left;
text-transform: capitalize;}
.avtor-title::after {
    content: ":\A0"; /* \A0 — это спецкод для неразрывного пробела */
    display: inline;
}
 .fieldset-wrapper .form-item:has(input[value="All"])
  {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
}



/* Контейнер таблицы */
#block-usteatr-views-block-afisha-block-1 .views-row, #block-usteatr-views-block-afisha-block-2 .views-row {
  display: grid !important;
  grid-template-columns: 55px repeat(1, 1fr) 45px 55px 140px !important; 
    width: 100% !important;
	 border: 1px solid #640909 !important;
	}

/* Сброс стилей Drupal для всех прямых потомков */
#block-usteatr-views-block-afisha-block-1 .views-row > div, #block-usteatr-views-block-afisha-block-1 .views-row > section, #block-usteatr-views-block-afisha-block-1 .views-row > article {
  float: none !important;
 
}
#block-usteatr-views-block-afisha-block-2 .views-row > div, #block-usteatr-views-block-afisha-block-2 .views-row > section, #block-usteatr-views-block-afisha-block-2 .views-row > article {
  float: none !important;
 
}

#block-usteatr-views-block-afisha-block-1 .views-field-field-premera, #block-usteatr-views-block-afisha-block-2 .views-field-field-premera {
  grid-column: 1 / 6 !important;
  grid-row: 1 !important;
  gap: 15px !important;
   margin: 0 50px!important;
}
#block-usteatr-views-block-afisha-block-1 .views-row .views-field-field-premera .field-content, #block-usteatr-views-block-afisha-block-2 .views-row .views-field-field-premera .field-content{
   padding: 0px!important;
  
}
#block-usteatr-views-block-afisha-block-1 .views-row .views-field-field-premera .field-content .premera-badge, #block-usteatr-views-block-afisha-block-2 .views-row .views-field-field-premera .field-content .premera-badge{
    display: block;
    background-color: #DF1919;
    height: 29px !important;
    padding: 4px 8px !important;
    width: 94px;
    color: #FFFFFF;
    border-radius: 0 0 10px 10px !important;
}

/* СТРОКА 2, СТОЛБЕЦ 1 */
/* Блок 2 сверху */
#block-usteatr-views-block-afisha-block-1 .views-row .views-field-field-data-i-vremya-seansa-1, #block-usteatr-views-block-afisha-block-2 .views-row .views-field-field-data-i-vremya-seansa-1 {
  grid-column: 1 !important;
  grid-row: 2 / 4 !important;
  text-align: center !important;
  width: 55px; !important;
  justify-self: stretch !important;
align-items: center !important;
font-size: 32px !important;    /* Размер шрифта 32 пикселя */
  font-weight: bold !important;
  background-color:#6C0C0D;
  color:#FFFFFF;
   border-top: 1px solid #ffffff;
  
}
/* Блок 3 снизу */
#block-usteatr-views-block-afisha-block-1 .views-row .views-field-field-data-i-vremya-seansa-2, #block-usteatr-views-block-afisha-block-2 .views-row .views-field-field-data-i-vremya-seansa-2 {
  grid-column: 1 !important;
  grid-row: 4 !important; 
  background-color:#6C0C0D;
  color:#FFFFFF;
  text-align: center !important;
  width: 55px; !important;
 justify-self: stretch !important; 
 align-items: center !important;
 height: 26px !important;
}

/* СТРОКА 2, СТОЛБЕЦ 2 */
/* Блок 4 сверху */
#block-usteatr-views-block-afisha-block-1 .views-row .views-field-field-avtor, #block-usteatr-views-block-afisha-block-2 .views-row .views-field-field-avtor {
  grid-column: 2 !important;
  grid-row: 2 !important;
  padding: 2px 8px 0px!important;
}
/* Блок 5 посередине */
#block-usteatr-views-block-afisha-block-1 .views-row .views-field-title, #block-usteatr-views-block-afisha-block-2 .views-row .views-field-title {
  grid-column: 2 !important;
  grid-row: 3 !important;
   padding: 0px 8px !important;
   font-weight: bold !important;
   text-transform: uppercase;
}
/* Блок 6 снизу */
#block-usteatr-views-block-afisha-block-1 .views-row .views-field-field-ochen-korotkoe-opisanie-2, #block-usteatr-views-block-afisha-block-2 .views-row .views-field-field-ochen-korotkoe-opisanie-2 {
  grid-column: 2 !important;
  grid-row: 4 !important;
  padding: 0px 8px !important;
}

/* СТРОКА 2, СТОЛБЕЦ 3 */
/* Блок 7 растягивается на всю высоту столбца (строки 2, 3 и 4) */
#block-usteatr-views-block-afisha-block-1 .views-row .views-field-field-vozrast-zritelya, #block-usteatr-views-block-afisha-block-2 .views-row .views-field-field-vozrast-zritelya {
  grid-column: 3 !important;
  grid-row: 2 / 5 !important; 
  align-self: center !important; /* Центрирование по вертикали */
  align-items: center !important;
  width: 35px;                 /* Одинаковая ширина */
    height: 35px;                /* Одинаковая высота */
  border: 1px solid #640909;   /* Толщина, стиль и цвет бордера */
   border-radius: 50%;          /* Магия, которая превращает квадрат в идеальный круг */
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box; 
	background-color: #FFFCF2;
  color: #6D3F25;
    
    /* Дополнительно, чтобы контент внутри круга встал ровно по центру: */
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box; 
}

/* СТРОКА 2, СТОЛБЕЦ 4 */
/* Блок 8 на всю высоту столбца */
#block-usteatr-views-block-afisha-block-1 .views-row .views-field-field-data-i-vremya-seansa, #block-usteatr-views-block-afisha-block-2 .views-row .views-field-field-data-i-vremya-seansa {
  grid-column: 4 !important;
  grid-row: 2 / 5 !important;
  align-self: center !important; /* Центрирование по вертикали */
  font-weight: bold; 
}

/* СТРОКА 2, СТОЛБЕЦ 5 */
/* Блок 9 на всю высоту столбца */
#block-usteatr-views-block-afisha-block-1 .views-row .views-field-field-kupit-bilet, #block-usteatr-views-block-afisha-block-2 .views-row .views-field-field-kupit-bilet {
  grid-column: 5 !important;
  grid-row: 2 / 5 !important;
  align-self: center !important; /* Центрирование по вертикали */
  padding: 8px 10px;
  background-color: #6C0C0D;
  color: #ffffff;
    border: 1px solid #dcdcdc;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
	margin-right: 10px;
}
#block-usteatr-views-block-afisha-block-1 .views-row .views-field-field-kupit-bilet a, #block-usteatr-views-block-afisha-block-2 .views-row .views-field-field-kupit-bilet a {
  color: #ffffff;
 }
.views-exposed-form {text-align: right;
 width:auto;
 margin-top: -47px;
}
.fieldgroup{
     display: inline-block;
	 border-width: 0px;
  
}
.fieldset-wrapper{
     display: inline-block;
    
}
div[id^="edit-field-data-i-vremya-seansa-value"] {display: flex;
flex-direction: row; /* Выстраивает элементы в одну линию (по умолчанию) */
align-items: center; /* Выравнивает элементы ровно по вертикали по центру */
gap: 10px;           /* Задает удобный отступ между элементами в линии */

width: max-content;  /* Сохраняет блок сжатым по ширине элементов */
min-inline-size: min-content;}
/* 2. Скрываем стандартный кружочек радиокнопки */
.form-radio {
  appearance: none;       /* Отключает стандартный вид браузера */
  -webkit-appearance: none;
  position: absolute;     /* Убираем из общего потока */
  width: 0;
  height: 0;
  margin: 0;
  opacity: 0;             /* Делаем полностью невидимым */
}

/* 3. Превращаем label (текст "август") в красивую плашку */
 .form-radio + .option {
  display: inline-block;
  padding: 8px 16px;
  background-color: #f0f0f0; /* Цвет неактивной плашки */
  color: #333333;            /* Цвет текста неактивной плашки */
  border: 1px solid #dcdcdc;
  border-radius: 20px;        /* Скругление углов */
  cursor: pointer;
  transition: all 0.2s ease; /* Плавный переход цвета */
  user-select: none;
}

/* Эффект при наведении на плашку */
.form-radio + .option:hover {
  background-color: #e5e5e5;
}

/* 4. МАГИЯ: Стили для АКТИВНОЙ плашки (когда выбран checked) */
 .form-radio:checked + .option {
  background-color: #6C0C0D; /* Цвет активной плашки (например, синий) */
  color: #ffffff;            /* Белый текст на активной плашке */
  border-color: #6C0C0D;
}
#block-usteatr-afishi {
  display: flex;
  justify-content: space-between; /* Оставшиеся 10% места станут отступом между блоками */
  width: 100%;
  padding:0 5px;
  max-width: 1750px;              /* Ваше ограничение */
  margin: 0 auto;                 /* ВАЖНО: центрует сам большой родительский блок на экране */
}
#block-usteatr-views-block-afisha-block-1, #block-usteatr-views-block-afisha-block-2{
  width: 49%;                     /* Будет отлично адаптироваться под любые экраны */
  box-sizing: border-box;         /* Защита от выпадания строк из-за padding/border */
}
#block-usteatr-afishi a{
  text-decoration: none;         
}
.novost img {
	max-width:100%;
	height:auto;
	 padding: 8px 8px;
  }
 .o-teatre #block-usteatr-content img {
	max-width:100%;
	height:auto;
	 padding: 8px 8px;
  }
   .o-teatre  #block-usteatr-content {text-wrap: pretty;[^3, ^4] }
.novosti .views-row {
    display: flow-root;
    padding-top: 2px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 17px;
} 

 .novosti .views-field-field-glavnoe-izobrazhenie img  {
    float: left;
    padding-right: 10px;
	position: relative; 
	
}
.slick-slide .views-field-field-glavnoe-izobrazhenie .field-content{
 position: relative;
  height: 197px;
  width: 437px;        /* Укажите точную ширину вашей картинки */
  display: block;      /* Гарантирует правильное поведение блочной модели */
  overflow: hidden;  
}
.slick-slide img{
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
-webkit-transition: all 1s ease-out;

}
.slick-slide img:hover  {
    transform: scale(1.1);
}

@media screen and (max-width: 1100px) {
  
  /* Перестраиваем главный контейнер в одну колонку */
  #block-usteatr-afishi {
    flex-direction: column;
    gap: 20px; /* Задаем красивый отступ по вертикали между блоками */
  }

  /* Заставляем внутренние блоки занять 100% ширины экрана */
  #block-usteatr-views-block-afisha-block-1, 
  #block-usteatr-views-block-afisha-block-2 {
    width: 100% !important; /* !important защитит от перебивания дефолтными 49% */
  }
 
}
@media screen and (max-width: 800px) {
	   /* 1. Перестраиваем сетку грида: делаем 4 столбца сверху, а под ними будут автоматически создаваться новые строки */
  #block-usteatr-views-block-afisha-block-1 .views-row, 
  #block-usteatr-views-block-afisha-block-2 .views-row {
    grid-template-columns: 55px repeat(1, 1fr) 40px 50px !important; /* Убрали 140px из колонок */
    
  }

  /* 2. Магия для 5-го столбца (кнопки купить билет) */
  #block-usteatr-views-block-afisha-block-1 .views-row .views-field-field-kupit-bilet, 
  #block-usteatr-views-block-afisha-block-2 .views-row .views-field-field-kupit-bilet {
    grid-column: 1 / -1 !important; /* Растягиваем блок от самого первого до самого последнего столбца (на всю ширину) */
    grid-row: auto !important;      /* Сбрасываем жесткую привязку к строкам 2 / 5, чтобы блок упал в самый низ */
    
    display: flex !important;
    justify-content: flex-end !important; /* Прижимаем саму кнопку внутри этого блока к правому краю */
    align-self: end !important;
     border: none !important;             /* Полностью убирает рамку */
    background: transparent !important;
    width: 100% !important;
    padding-top: 5px !important; /* Небольшой отступ сверху от текста афиши */
  }
  #block-usteatr-views-block-afisha-block-1 .views-row .views-field-field-kupit-bilet .field-content, 
  #block-usteatr-views-block-afisha-block-2 .views-row .views-field-field-kupit-bilet .field-content {
    
    
    display: flex !important;
    justify-content: flex-end !important; /* Прижимаем саму кнопку внутри этого блока к правому краю */
    align-self: end !important;
    
    width: 140px !important;
    padding-top: 5px !important; /* Небольшой отступ сверху от текста афиши */
	 padding: 8px 14px;
  background-color: #6C0C0D;
  color: #ffffff;
    border: 1px solid #dcdcdc;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
	margin-right: 10px;
  }
	.views-exposed-form {
 
    margin-top: -5px;}

 #block-usteatr-views-block-afisha-block-1 h2, #block-usteatr-views-block-afisha-block-2 h2{
   margin: 4px 2px 5px;font-size: 20px;}

}
@media (max-width: 600px) {
#block-usteatr-views-block-afisha-block-1 .views-row .views-field-field-ochen-korotkoe-opisanie-2, #block-usteatr-views-block-afisha-block-2 .views-row .views-field-field-ochen-korotkoe-opisanie-2 {
  font-size:13px;
}	
#block-usteatr-views-block-afisha-block-1 .views-row .views-field-field-avtor, #block-usteatr-views-block-afisha-block-2 .views-row .views-field-field-avtor {
 font-size:13px;
}
}