/* ==========================================================================
   ОБЩИЕ СТИЛИ САЙТА И ФОРМ
   ========================================================================== */

/* Цвета текста и заголовков */
h1, h2 { 
    color: #577eac !important; 
   font-size: calc(0.9rem + 0.5vw) !important;
}

/* Кастомный навигационный бар */
.navbar-text { 
    color: white !important; 
}
.navbar-custom { 
    background-color: #577eac; 
    border-bottom: 1px solid rgba(0,0,0,0.1); 
}
.navbar-brand, .nav-link { 
    color: white !important; 
}

/* Стили для форм */
.form-group label {
    font-weight: 500;
}
.form-control-file {
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* Стили для модального окна (переопределение Bootstrap) */
.modal-body img {
    max-width: 100%;
    
    /* ИСПРАВЛЕНИЕ: Картинка займет максимум 75% от высоты вашего монитора */
    max-height: 75vh !important; 
    
    /* Защита пропорций: изображение не сожмется и не перекосится */
    object-fit: contain !important; 
    
    display: block;
    margin: 0 auto;
}

/* Футер без фона с отступом */
.footer { 
    background: transparent !important; 
    border: none !important; 
    margin-top: 60px !important; 
    padding: 20px 0 !important;
    color: #888;
    font-size: 0.85rem;
}


/* ==========================================================================
   КАРТОЧКИ ГАЛЕРЕИ (СТИЛЬ EVENT GALLERY ПОВЕРХ ФОТО)
   ========================================================================== */

/* 1. Контейнер карточки — обнуление фонов, чтобы убрать наслоения */
.card { 
    position: relative !important; 
    border: none !important; 
    background: transparent !important; 
    background-color: transparent !important; 
    
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25) !important; 
    margin-bottom: 20px !important; 
    overflow: hidden !important; /* Намертво срезает углы вашего фона по радиусу карточки */
    border-radius: 8px !important;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out !important;
}

/* Поведение карточки при наведении мыши */
.card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35) !important;
    background: transparent !important;
    background-color: transparent !important;
}

/* 2. Контейнеры картинок (фиксированная высота 200px) */
.album-thumb-container, 
.video-thumb-container, 
.photo-thumb-container { 
    width: 100% !important; 
    height: 200px !important;
    overflow: hidden !important;
    background: transparent !important; 
    background-color: transparent !important;
}

.album-thumb, .photo-thumb, .card-img-top { 
    width: 100% !important; 
    height: 100% !important; 
    object-fit: cover !important; 
    cursor: pointer;
}

/* 3. ПЛАШКА: ПОЛНОСТЬЮ ОБНУЛЕН PADDING, чтобы фон прилип к нижнему краю фото */
.card-body { 
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 9999 !important; 

    background: transparent !important; 
    background-color: transparent !important;
    
    padding: 0 !important; 
    margin: 0 !important;
    
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: flex-start !important; 
    box-sizing: border-box !important;
}

/* 4. ТЕКСТ С ВАШИМ ОРИГИНАЛЬНЫМ ПОЛУПРОЗРАЧНЫМ ФОНОМ ВО ВСЮ ШИРИНУ */
.card-body h5, 
.card-body p { 
    margin: 0 !important; 
    
    /* УВЕЛИЧЕН НИЖНИЙ ОТСТУП: Сверху 4px, по бокам 12px, снизу 28px — это держит название высоко и ровно на фото */
    padding: 4px 12px 28px 12px !important; 
    
    width: 100% !important; /* Растягивает ваш фон строго на 100% ширины карточки */
    text-align: left !important;
    color: #ffffffe3 !important; /* Ваш цвет текста */
    
    background: transparent !important;
    background-color: #577eac2b !important; /* Ваш полупрозрачный фон */
    box-sizing: border-box !important;
}
 
/* ИСПРАВЛЕНИЕ ДЛЯ ДИВА С БЕЙДЖАМИ: Отрываем его от текста, чтобы он не толкал названия вниз */
.card-body div {
    position: absolute !important;
    bottom: 5px !important; /* Намертво прижали к самому нижнему краю */
    left: 12px !important;  /* Выровняли по левому краю */
    width: auto !important;
    background: transparent !important;
    background-color: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 10000 !important;
}

/* Настройки вашего заголовка h5 (.card-title) */
.card-title {
      font-size: 1.1rem !important;  
      font-weight: 600 !important;    
      text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6) !important; 
  }


/* Дополнительный текст карточки */
.card-text {
    font-size: 0.8rem !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6) !important;
  }

}
/* Стили для вписывания изображений */
    .album-thumb-container, .video-thumb-container, .photo-thumb-container { 
        width: 100%; 
        height: 200px;
        overflow: hidden;
        background: #eee;
    }
    .album-thumb, .photo-thumb { 
        width: 100%; 
        height: 100%; 
        object-fit: cover; 
    }

    /* Принудительное вписывание фото в окно fslightbox */
    .fslightbox-container img {
        max-width: 95vw !important;
        max-height: 90vh !important;
        object-fit: contain !important;
        width: auto !important;
        height: auto !important;
    }

/* Футер карточки (если используется для кнопок управления) */
.card-footer {
    background-color: #f8f9fa;
    border-top: 1px solid #e0e0e0;
    padding: 10px 15px;
}
.card-footer .btn {
    padding: 0.15rem 0.3rem; 
    font-size: 0.75rem;     
}

/* ==========================================================================
   ЖЕЛЕЗОБЕТОННАЯ АДАПТАЦИЯ FSLIGHTBOX ПОД ВЫСОТУ ЛЮБОГО ЭКРАНА
   ========================================================================== */

/* Перехватываем управление у JavaScript и зажимаем саму картинку по высоте экрана */
img.fslightbox-source,
.fslightbox-source {
    /* Намертво запрещаем картинке быть выше 82% от высоты вашего монитора */
    max-height: 82vh !important; 
    
    /* СБРОС ИНЛАЙН-РАЗМЕРОВ: Стираем те пиксели, которые скрипт прописывает принудительно */
    height: auto !important; 
    width: auto !important; 
    
    /* Заставляем браузер идеально сохранить пропорции большого оригинала */
    object-fit: contain !important; 
    
    /* Центрируем картинку внутри родного контейнера слайдера */
    margin: auto !important; 
    display: block !important;
}


/* ==========================================================================
   УСТРАНЕНИЕ СДВИГА СЕТКИ ВПРАВО ПРИ ОТКРЫТИИ ОКНА
   ========================================================================== */

html {
    /* Резервирует место под полосу прокрутки. Сайт больше никогда не будет прыгать */
    scrollbar-gutter: stable !important;
}

/* Жесткое обнуление для Bootstrap и плагина, если они пытаются добавить лишний отступ */
body, 
.modal-open, 
html[style*="overflow: hidden"] body {
    padding-right: 0 !important;
    margin-right: 0 !important;
}