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

/* --- ПАЛИТРА "МЕДИТЕРРАНЕАН ЛАЗУРЬ" ---
   Глубокий ультрамарин + Кристальная бирюза + Мрамор
------------------------------------------------- */
:root {
  /* Основной цвет: глубокий полудрагоценный камень (Lapis Lazuli) для хедера и футера и левой части градиента*/
  /*#0A2F51*/
  --cassiopeia-color-primary:#3A6B8C;
  
  /* Цвет ссылок и активных элементов: яркий, но благородный оттенок кристальной воды */
  --cassiopeia-color-link:#00A8E8;
  --link-color:#00A8E8;

  /* Цвет при наведении: светлая бирюза с уходом в мяту (эффект пены на волнах) 4DD0E1*/
  --cassiopeia-color-hover:#4DD0E1; /*правая часть градиента*/
  --link-hover-color:#4DD0E1;
}

/* --- ФОН СТРАНИЦЫ --- */
/* Чистый белый мрамор или мелкая галька. Максимальный контраст с синим подчеркивает чистоту */
body {
    background-color: #FFFFFF !important;
}

/* --- ЗАГОЛОВКИ И ТЕКСТ --- */
/* Графитовый синий вместо черного — он мягче гармонирует с лазурью заголовков */
h2, h3,
.com-content article h2,
.com-content article h3 {
    color: #1C2A3D !important;
    font-weight: 700;
    letter-spacing: -0.5px;
}

/* Основной текст делаем темно-стальным для идеальной читаемости на белом фоне */
article p,
.com-content article {
    color: #2C3E50 !important;
    line-height: 1.75;
}

/* --- ПОДМЕНЮ ВЕРХНЕЙ НАВИГАЦИИ --- */
.metismenu.mod-menu .mm-collapse .metismenu-item {
  /* Полупрозрачная глубокая вода */
  background-color: rgba(10, 47, 81, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(0, 168, 232, 0.3);
}

.metismenu.mod-menu .mm-collapse .metismenu-item a {
  color: #E0F5FF; /* Почти небесный белый для пунктов меню */
  padding: 14px 12px;
}

.metismenu.mod-menu .mm-collapse .metismenu-item a:hover {
  color: var(--cassiopeia-color-hover) !important;
}


/* КНОПКА ДЕЙСТВИЯ */
.btn-secondary {
    background: linear-gradient(145deg, #00A8E8 0%, #007EA7 100%) !important; 
    border: 2px solid #FFFFFF !important;
    color: #FFFFFF !important;
    font-weight: 600;
    /*text-transform: uppercase;*/
    transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
    box-shadow: 0 6px 15px rgba(0, 168, 232, 0.25);
    position: relative;
    overflow: hidden;
}

.btn-secondary:hover {
    background: linear-gradient(145deg, #00A8E8 0%, #4DD0E1 100%) !important;
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 10px 25px rgba(0, 168, 232, 0.4);
    border-color: #4DD0E1;
}

/* Эффект свечения кнопки (для большей "лазурности") */
.btn-secondary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    transition: left 0.6s;
}

.btn-secondary:hover::before {
    left: 100%;
}

/* СТИЛИЗАЦИЯ ССЫЛОК ВНУТРИ ТЕКСТА */
a:not(.btn) {
    color: var(--cassiopeia-color-link);
    text-decoration: none;
    border-bottom: 1px dotted transparent;
    transition: all 0.2s ease;
}

a:not(.btn):hover {
    color: var(--cassiopeia-color-hover);
    border-bottom-color: var(--cassiopeia-color-hover);
}

/* УКРАШЕНИЯ И КАРТОЧКИ */
.card, .well {
    background-color: #F8FDFF !important; /* Легкий ледяной подтон у карточек услуг */
    border: 1px solid rgba(0, 168, 232, 0.1) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02), 0 15px 30px rgba(0, 168, 232, 0.08) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05), 0 25px 50px rgba(0, 168, 232, 0.15) !important;

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

/* Контейнер для нашей сетки */
.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 --- */

/* Блокируем глобальные попытки фиксации фона */
html {
    background-attachment: scroll !important;
}

/* 1. Находим правильный контейнер. 
   В Joomla 5/Cassiopea модуль Custom в верхней позиции получает класс .container-modules,
   а сама карточка модуля — .mod-card. Псевдоэлемент с фоном живет внутри него. */
.container-modules.mod-custom.banner-style,
.container-modules.mod-custom[style*="background-image"] {
    position: relative;
    overflow: hidden !important;
    height: auto !important;
    min-height: unset !important;
}

/* 2. Целевой элемент — псевдокласс ::before, который создает сам шаблон для фона.
   ВАЖНО: Инлайновые стили Joomla имеют приоритет. Чтобы их перебить, нужен :root body.
   Если предыдущий селектор не сработал, используйте более мощный хак: */
:root body .container-modules.mod-custom::before {
    transform: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
    width: 100% !important;
    
    /* Отказываемся от высоты экрана. Задаем пропорцию через Aspect Ratio */
    aspect-ratio: 2 / 1 !important; /* Широкая полоса 2:1 */
    height: auto !important;
    min-height: unset !important;
}

/* 3. АДАПТАЦИЯ ДЛЯ IPHONE (вертикальный экран) */
@media only screen and (max-width: 767px) and (orientation: portrait) {
    :root body .container-modules.mod-custom::before {
        /* Делаем баннер менее высоким (квадратным или 3:2), чтобы видеть контент под ним */
        aspect-ratio: 3 / 2 !important; /* Можно заменить на 1 / 1 для квадрата */
        
        /* Страховка на случай, если скрипт шаблона принудительно ставит filter: blur() */
        filter: none !important;
        -webkit-filter: none !important;
    }
}

/* 4. Если используется сторонний JS-параллакс (например, от плагина Quix, SP Page Builder или другого конструктора),
   принудительно отключаем его фиксацию */
.bg-parallax-element,
.parallax-banner,
[data-parallax] {
    background-attachment: initial !important;
    transform: none !important;
}

/* 5. Страховка текста приветствия поверх картинки */
.header-intro-wrapper h1,
.page-header h1 {
    text-shadow: 2px 2px 4px rgba(0,0,0,0.6) !important;
}