/* затемнение/просветление верхнего баннера */
.container-banner .banner-overlay .overlay {
   background: none; /*background: none; убирает затемнение */
   /*background-size: contain;*/
 }

:root {
  --cassiopeia-color-primary:#0a6522; /* основной цвет 0a6522 левая часть градиента footer и верхнего меню*/
  --cassiopeia-color-link:#ffff00;
  --link-color:#004731; /* цвет ссылки */
  --link-color-rgb:34,79,170;
  --cassiopeia-color-hover:#008000; /*цвет элемента при наведении и влияет на градиент справа 004731*/
  --link-hover-color:#004731; /*цвет позиции меню при наведении*/
  --link-hover-color-rgb:66,64,119 }

body {
  background-color: #9eb26d; /* основной цвет фона 81d6a6 */
}

.container-header {
  background-color: #000;
  /*background-image: none; /* если нужно убрать изображение фона */
}

/*.container-bottom-a {
    background-color: #000;
}*/

/*цвет подменю*/
.metismenu.mod-menu .mm-collapse .metismenu-item {
  background-color: #2e8b57;
}

/*цвет названия подменю*/
.metismenu.mod-menu .mm-collapse .metismenu-item a {
  color: #fff;
}

/*цвета заголовков*/
h2, h3, h4, h5, h6 {
  color: #fff;
}

/*цвета заголовков*/
h1 {
  color: #000;
}

.table-container {
  background-color: #81d6a6;
}

.btn-secondary {
    background-color: #9eb26d; /* Например: #007bff 81d6a6; */
    border: 2px solid #2e8b57; /* Например: #343a40; */
    color: #000;
}

.btn-secondary:hover {
    background-color: #59c98a; /* Например: #0056b3; */
}

/* Если нужно задать конкретный размер (например, 640x360): */
/*.article-content iframe,
.article-content video {
    width: 1080px;
    height: 1920px;
}*/

/* БЛОКИ ДЛЯ ВИДЕО СЕТКИ */

/* Контейнер для нашей сетки */
.video-grid {
    display: grid;
    /* Используем auto-fit для автоматического создания колонок */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    max-width: var(--cassiopeia-layout-max-width);
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
}

/* Базовый контейнер для видео. Соотношение 9:16 (стандартное вертикальное) */
.video-item {
    position: relative;
    width: 100%;
    padding-bottom: 177.78%; /* (16 / 9) * 100% */
    border: 5px solid #004731; /* Толщина, стиль и цвет рамки */
}

/* Класс для горизонтального видео. Соотношение 16:9 (стандартное горизонтальное) */
.video-item--gorizont16x9 {
    padding-bottom: 56.25%; /* (9 / 16) * 100% */
    border: 5px solid #004731; /* Толщина, стиль и цвет рамки */
}

/* Класс для горизонтального видео. Соотношение 21:9 (кинематографическое) */
.video-item--wide {
    padding-bottom: 42.86%; /* (9 / 21) * 100% */
    border: 5px solid #004731; /* Толщина, стиль и цвет рамки */
}

/* Класс для другого формата. Соотношение 4:3 (старый ТВ-стандарт) */
.video-item--standard {
    padding-bottom: 75%; /* (3 / 4) * 100% */
    border: 5px solid #004731; /* Толщина, стиль и цвет рамки */
}

/* Само видео занимает весь контейнер */
.video-item video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
    .video-grid {
        gap: 20px;

/* КОНЕЦ БЛОКА ДЛЯ ВИДЕО СЕТКИ */

/* --- ИСПРАВЛЕНИЕ ДЛЯ IPHONE / IOS SAFARI --- */

/* 1. Обнуляем стандартные попытки Bootstrap управлять шириной img.img-fluid 
   конкретно внутри вашей позиции banner */
.banner .img-fluid {
    max-width: unset !important;
}

/* 2. Медиа-запрос специально для мобильных устройств (включая iOS) */
@media only screen and (max-width: 767px), 
       only screen and (hover: none) and (pointer: coarse) {
    
    /* Принудительно заставляем картинку занимать ровно ширину viewport (видимой части экрана) */
    html.safari .banner img,
    .banner img { /* Fallback для других браузеров, если класс safari не подтянется */
        width: 100vw !important; 
        height: auto !important;
        left: 0 !important;
        position: relative !important;
        
        /* Ключевое свойство: картинка обрезается по краям, сохраняя пропорции, вместо растяжения */
        object-fit: cover !important; 
        
        /* Отключаем системную оптимизацию сжатия JPEG, которая портит четкость фона */
        -webkit-interpolation-mode: nearest-neighbor !important;
        image-rendering: crisp-edges !important;
    }

    /* Если изображение задано не тегом <img>, а через background-image в стилях модуля */
    .banner {
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        background-attachment: scroll !important;
    }
}