/* static/css/style.css - ФИНАЛЬНАЯ ВЕРСИЯ */

:root {
    --primary-color: #0E3644;
    --primary-light: #2a6f97;
    --accent-color: #00C4CC;
    --text-dark: #212529;
    --text-light: #f8f9fa;
    --body-bg: #F0F4F8;
    
    /* ЦВЕТА СТАТУСОВ */
    --col-president: #FFD700;
    --col-leader: #9400D3;
    --col-school: #00CED1;
    --col-active: #32CD32;
    --col-default: #dee2e6;
}

body {
    background-color: var(--body-bg);
    padding-top: 70px;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--text-dark);
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 { font-weight: 700; color: var(--primary-color); }

/* NAVBAR */
.navbar { background-color: var(--primary-color); box-shadow: 0 4px 15px rgba(0,0,0,0.2); }
.navbar-brand img { height: 40px; margin-right: 10px; }
.nav-link { color: rgba(255,255,255,0.85) !important; transition: 0.3s; }
.nav-link:hover, .nav-link.active { color: #fff !important; transform: translateY(-1px); }
.dropdown-menu { border: none; box-shadow: 0 10px 30px rgba(0,0,0,0.15); }

/* BUTTONS */
.btn-primary { background-color: var(--primary-light); border-color: var(--primary-light); }
.btn-primary:hover { background-color: var(--primary-color); border-color: var(--primary-color); }
.btn-cta { background-color: var(--accent-color); color: #fff; font-weight: 700; border-radius: 50px; padding: 12px 30px; border: none; transition: 0.3s; }
.btn-cta:hover { background-color: #00979d; color: #fff; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 196, 204, 0.4); }

/* =========================================
   РАМКИ И ФОТО (PULSE)
   ========================================= */
@property --angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes rotate-gradient { to { --angle: 360deg; } }
@keyframes pulse-shadow {
    0% { box-shadow: 0 0 0 0 rgba(var(--glow-rgb), 0.6); transform: scale(1); }
    50% { box-shadow: 0 0 0 8px rgba(var(--glow-rgb), 0); transform: scale(1.02); }
    100% { box-shadow: 0 0 0 0 rgba(var(--glow-rgb), 0); transform: scale(1); }
}

.pulse-container {
    position: relative;
    border-radius: 50%;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    background-color: var(--col-default); 
    --glow-rgb: 200, 200, 200;
    animation: rotate-gradient 3s linear infinite, pulse-shadow 2s infinite ease-in-out;
}

/* --- ФИНАЛЬНЫЙ ПРЕДОХРАНИТЕЛЬ (ИСПРАВЛЕНИЕ ОВАЛОВ) --- */

/* 1. Глобальное правило для всех аватарок */
img.profile-photo, 
img.profile-photo-round,
.profile-header img {
    width: 260px !important;       /* Жесткая ширина */
    height: 260px !important;      /* Жесткая высота (РОВНО КАК ШИРИНА) */
    min-width: 260px !important;
    min-height: 260px !important;
    
    aspect-ratio: 1 / 1 !important; /* Заставляет быть квадратом */
    object-fit: cover !important;   /* Обрезает лишнее, чтобы не плющило */
    border-radius: 50% !important;  /* Делает круг из квадрата */
    
    display: block;
    margin: 0 auto;
}

/* 2. Исключение: Внутри маленьких карточек (волонтеры) */
/* Там размеры задает контейнер (140px), а картинка подстраивается */
.pulse-container img.profile-photo-round,
.pulse-container img {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;       /* Сбрасываем ограничение */
    min-height: 0 !important;
    border: 3px solid #fff;
    background: #fff;
}

/* 2. Исключение: Внутри маленьких рамок (карточек) мы разрешаем фото занимать весь контейнер */
.pulse-container img.profile-photo-round,
.pulse-container img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important; /* Снимаем ограничение внутри рамки */
    max-height: none !important;
    aspect-ratio: 1 / 1;
    border: 3px solid #fff;
    background: #fff;
}

/* ЦВЕТНОЙ ТЕКСТ */
.status-text { font-weight: bold; }
.status-president { color: var(--col-president); }
.status-leader { color: var(--col-leader); }
.status-school { color: var(--col-school); }
.status-active { color: var(--col-active); }

/* КАРТОЧКИ */
.card { border: none; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.05); transition: 0.3s; }
.card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0,0,0,0.1); }
.board-of-honor-card { background: #fff; transition: 0.3s; position: relative; z-index: 1; }
.board-of-honor-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.1); z-index: 10; }

/* МЕРОПРИЯТИЯ */
.event-card-img-wrapper { height: 200px; overflow: hidden; position: relative; }
.event-card-img-wrapper img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; }
.card:hover .event-card-img-wrapper img { transform: scale(1.05); }
.event-card-img-fixed { width: 100%; height: 220px; object-fit: cover; display: block; }
.event-meta { font-size: 0.9rem; color: #6c757d; background-color: #f8f9fa; padding: 8px 15px; border-bottom: 1px solid #eee; display: flex; align-items: center; gap: 15px; }
.event-meta i { color: var(--accent-color); }

/* HERO SECTION */
.hero-section { background-color: var(--primary-color); color: white; padding: 100px 0; margin-top: -20px; position: relative; overflow: hidden; }
.hero-bg-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('../img/bg_university.jpg') no-repeat center center; background-size: cover; opacity: 0.2; }
.hero-content { position: relative; z-index: 2; }
.feature-icon { width: 60px; height: 60px; background-color: rgba(0, 196, 204, 0.1); color: var(--accent-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: 1rem; }

/* =========================================
   HOLIDAY UPDATE & SPLIT HERO
   ========================================= */

/* 1. HERO SPLIT (СЛЕВА ТЕКСТ, СПРАВА ФОТО) */
.hero-split {
    padding-top: 80px; /* Отступ от верхнего меню */
    min-height: 85vh;
    display: flex;
    align-items: center;
}
.hero-slider-wrapper {
    position: relative;
    padding: 10px;
}
/* Декоративная рамка за слайдером */
.slider-frame {
    position: absolute;
    top: -15px; right: -15px; bottom: 15px; left: 15px;
    border: 2px solid #00C4CC;
    border-radius: 20px;
    z-index: 0;
    opacity: 0.3;
}
.carousel-item img {
    transition: transform 5s ease;
}
.carousel-item.active img {
    transform: scale(1.05); /* Легкий зум фото при показе */
}


bg-brand-red { background-color: #d32f2f; color: white; }

/* Общие стили (если вдруг пропали) */
.text-brand { color: #0E3644; }
.text-gradient {
    background: linear-gradient(90deg, #0E3644, #00C4CC);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.btn-brand {
    background-color: #0E3644;
    color: white;
    border: none;
}
.btn-brand:hover { background-color: #00C4CC; transform: translateY(-3px); color: white; }
.direction-card {
    background: white;
    border-radius: 20px;
    padding: 30px 20px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: 0.3s;
    border: 1px solid rgba(0,0,0,0.03);
}
.direction-card:hover { transform: translateY(-5px); border-color: #00C4CC; }
.icon-box { font-size: 2.5rem; margin-bottom: 15px; }
.quotes-parallax {
    background: url('../img/bg_university.jpg') no-repeat center center fixed;
    background-size: cover;
    position: relative;
}
.parallax-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(14, 54, 68, 0.9);
}
.avatar-glow img {
    width: 150px; height: 150px;
    object-fit: cover;
    border: 4px solid #FFD700;
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.4);
}


/* =========================================
   ДОБАВИТЬ В КОНЕЦ style.css
   ========================================= */

/* =========================================
   ДОБАВИТЬ В КОНЕЦ style.css
   (Замените предыдущий блок с шапками на этот)
   ========================================= */

/* =========================================
   ФИНАЛЬНЫЕ НАСТРОЙКИ ПОЗИЦИИ (КОНЕЦ ФАЙЛА)
   ========================================= */

/* --- НОВОГОДНИЕ ШАПКИ (ЛОКАЛЬНЫЕ) --- */

/* 1. Шапка для больших фото (Профиль, Админка) */
/* 2. Шапка для маленькой иконки в меню (справа сверху) */
/* 3. Шапка для карточек в списке волонтеров (если нужно) */
/* ОСТАЛЬНОЕ БЕЗ ИЗМЕНЕНИЙ (на всякий случай дублирую) */
.main-navbar { background-color: #0E3644 !important; padding: 12px 0; box-shadow: 0 4px 20px rgba(0,0,0,0.1); }
10% { opacity: 1; }
    100% { transform: translateY(110vh); opacity: 0.2; }
}
    background-size: contain;
    transform: rotate(10deg); /* Легкий наклон в другую сторону */
    z-index: 10;

/* 3. ОСТАЛЬНОЕ (Без изменений, просто чтобы не потерялось) */
.main-navbar { background-color: #0E3644 !important; padding: 12px 0; box-shadow: 0 4px 20px rgba(0,0,0,0.1); }
10% { opacity: 1; }
    100% { transform: translateY(110vh); opacity: 0.2; }
}

/* 3. МЕНЮ (ТЕМНОЕ) */
.main-navbar {
    background-color: #0E3644 !important;
    padding: 12px 0;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

/* 4. СНЕГ */
10% { opacity: 1; }
    100% { transform: translateY(110vh); opacity: 0.2; }
}