/* затемнение/просветление верхнего баннера */
.container-banner .banner-overlay .overlay {
   background: rgba(0, 0, 0, 0.3); /*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;

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

/* --- СПАСЕНИЕ ФОНОВОЙ КАРТИНКИ МОДУЛЯ BANNER НА IPHONE --- */

/* 1. Находим правильный контейнер. 
   В Joomla 5/Cassiopea модуль с фоном обычно получает класс .wrapper-header-image 
   ИЛИ оборачивается в div.item-image + стиль самого модуля mod_custom */
.wrapper-banner,
.mod-custom.banner-style { /* Используем оба варианта для страховки */
    position: relative;
    overflow: hidden !important; /* Обрезаем лишнее, если картинка поплыла */
}

/* 2. Целевой элемент — это DIV внутри модуля, которому назначили фон */
.wrapper-banner .banner-inner,
.mod-custom.banner-style .mod-preview-info,
.mod-custom.banner-style > div {
    
    /* САМОЕ ВАЖНОЕ: УБИРАЕМ ЗАВИСИМОСТЬ ОТ ВЫСОТЫ ЭКРАНА */
    height: auto !important; /* Вместо 100vh */
    min-height: unset !important;
    
    /* Для десктопов оставляем красивую большую высоту через паддинг (сохранит пропорции) */
    padding-top: 50% !important; /* Соотношение 2:1 (широкая полоса) */
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    
    width: 100% !important;
}

/* 3. АДАПТАЦИЯ ДЛЯ IPHONE (вертикальный экран) */
@media only screen and (max-width: 767px) and (orientation: portrait) {
    .wrapper-banner .banner-inner,
    .mod-custom.banner-style > div {
        /* Меняем пропорцию. Экран телефона узкий, сделаем баннер менее высоким, 
           чтобы видеть текст под ним сразу */
        padding-top: 66.6% !important; /* Соотношение 3:2 (как старая пленка). Можно поставить 75% для квадрата */
        
        /* Принудительно отключаем любые попытки Safari растянуть фон фильтрами */
        transform: none !important;
        -webkit-mask-image: none !important;
        mask-image: none !important;
        
        /* Фон теперь НЕ будет пытаться покрыть огромную вертикаль, он просто займет полосу высотой ~66% от ширины экрана */
        background-size: cover !important;
        background-attachment: scroll !important; /* Важно: отключить фиксацию (parallax) на мобильных */
    }
}

/* 4. Если используется эффект Parallax (залипание картинки) — ОТКЛЮЧИТЬ ЕГО ДЛЯ MOBILE */
.bg-parallax-element,
.parallax-banner {
    background-attachment: initial !important;
}

/* 5. Страховка текста приветствия (Title) над картинкой */
.header-intro-wrapper h1,
.page-header h1 {
    text-shadow: 2px 2px 4px rgba(0,0,0,0.6) !important; /* Добавим тексту читаемость поверх любого фона */
}