@charset "windows-1251";
/* CSS Document */
/* Подключение шрифтов */
@font-face {
    font-family: 'Sansation';
    src: url('../fonts/SansationBold.woff2') format('woff2'),
         url('../fonts/SansationBold.woff') format('woff'),
         url('../fonts/SansationBold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Sansation';
    src: url('../fonts/SansationBoldItalic.woff2') format('woff2'),
         url('../fonts/SansationBoldItalic.woff') format('woff'),
         url('../fonts/SansationBoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'Sansation';
    src: url('../fonts/SansationItalic.woff2') format('woff2'),
         url('../fonts/SansationItalic.woff') format('woff'),
         url('../fonts/SansationItalic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Sansation';
    src: url('../fonts/SansationLight.woff2') format('woff2'),
         url('../fonts/SansationLight.woff') format('woff'),
         url('../fonts/SansationLight.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Sansation';
    src: url('../fonts/SansationLightItalic.woff2') format('woff2'),
         url('../fonts/SansationLightItalic.woff') format('woff'),
         url('../fonts/SansationLightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Sansation';
    src: url('../fonts/SansationRegular.woff2') format('woff2'),
         url('../fonts/SansationRegular.woff') format('woff'),
         url('../fonts/SansationRegular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body {
	margin: 0;
}

* {
	box-sizing: border-box;
	font-family: 'Sansation', sans-serif; /* Добавил запасной шрифт */
}

/* --- Стили для слабовидящих --- */

#toggle-vision-mode {
    position: fixed;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    background: url('/img/vision-mode-icon.webp') no-repeat center center;
    background-size: contain;
    width: 50px; /* Размер кнопки под изображение */
    height: 286px;
    border: none;
	border-radius: 7px;
    cursor: pointer;
    z-index: 1000; /* Чтобы кнопка была поверх других элементов */
}

#toggle-vision-mode:hover {
    opacity: 0.8;
}

.vision-impaired {
    background-color: #000 !important;
    color: #FFFFFF  !important; /* Белый текст на черном фоне */
    font-size: 24px !important;
    line-height: 1.8 !important;
    letter-spacing: 1px !important;
}

/* Общие текстовые элементы */
.vision-impaired p,
.vision-impaired span,
.vision-impaired h1,
.vision-impaired h2,
.vision-impaired h3,
.vision-impaired h4,
.vision-impaired h5,
.vision-impaired h6,
.vision-impaired strong,
.vision-impaired b,
.vision-impaired dt, /* Добавлено для списков определений */
.vision-impaired dd, /* Добавлено для списков определений */
.vision-impaired .info-label,
.vision-impaired .info-value,
.vision-impaired .legal-text p
{
    color: #FFFFFF !important;
}

/* Ссылки */
.vision-impaired a {
    color: #00BFFF !important; /* Голубой */
    text-decoration: underline !important;
}
/* Убираем специфический цвет ссылок .text_link */
.vision-impaired .text_link {
    color: #00BFFF !important;
}


/* Формы и кнопки */
.vision-impaired button,
.vision-impaired input,
.vision-impaired textarea,
.vision-impaired select {
    background-color: #FFFFFF !important;
    color: #000 !important;
    font-size: 20px !important;
    border: 2px solid #FFFFFF !important;
}

/* Изображения и лого */
.vision-impaired img,
.vision-impaired .logo {
    filter: grayscale(100%) contrast(3) brightness(1.5); /* Ч/Б и высококонтрастно */
    /* Можно настроить filter или убрать его для конкретных изображений, если нужно */
}
/* Убираем фильтр для фото преподавателя */
.vision-impaired .teacher-photo img {
    filter: none !important; /* Оставляем фото цветным */
    border: 2px solid #FFFFFF !important; /* Делаем рамку видимой */
}


/* Отключаем анимации */
.vision-impaired * {
    animation: none !important;
    transition: none !important;
}

/* Таблицы */
.vision-impaired table,
.vision-impaired th,
.vision-impaired td {
    color: #FFFFFF !important; /* Белый текст */
    border: 2px solid #FFFFFF !important; /* Белые границы */
    padding: 8px !important;
}
.vision-impaired th {
    background-color: #222 !important; /* Темный фон */
    font-weight: bold !important;
}

/* Списки */
.vision-impaired ul,
.vision-impaired ol,
.vision-impaired li {
    color: #FFFFFF !important;
}
/* Для UL списков используем квадратные маркеры */
.vision-impaired ul {
    list-style-type: square !important;
    padding-left: 25px !important; /* Немного увеличим отступ */
}
/* Для OL списков оставляем стандартную нумерацию */
.vision-impaired ol {
    list-style-type: decimal !important;
    padding-left: 30px !important;
}
.vision-impaired li {
    margin-bottom: 10px !important; /* Увеличим отступ между пунктами */
}
/* Списки определений */
.vision-impaired dl {
    /* Стили для dl, если нужны */
}
.vision-impaired dt {
    font-weight: bold !important; /* Уже есть в общем селекторе, но для уверенности */
}
.vision-impaired dd {
    margin-left: 0 !important; /* Убираем стандартный отступ */
}

/* Контейнеры и границы */
.vision-impaired .page_container {
    box-shadow: none !important;
    border: 2px solid #FFFFFF !important; /* Белая рамка вместо тени */
    background-color: #000 !important;
}
.vision-impaired .card {
    border: 2px solid #FFFFFF !important;
    background-color: #111 !important; /* Чуть светлее фона для выделения */
}
.vision-impaired h1,
.vision-impaired .section-title { /* Стили для заголовков с подчеркиванием */
    border-bottom: 2px solid #FFFFFF !important;
}

/* Кнопка переключения режима */
.vision-impaired #toggle-vision-mode {
    background-color: transparent !important;
    border: none !important;
    /* Можно добавить яркую рамку при фокусе/наведении, если нужно */
    /* filter: invert(1) hue-rotate(180deg); Можно инвертировать иконку */
}

/* --- Конец стилей для слабовидящих --- */


.container { /* Этот класс не используется в вашем HTML, но оставлен */
	padding: 0px;
	margin: 0 auto;
}

.page_container {
	min-height: 100vh; /* Растягиваем по высоте */
	/* justify-content: center; Убрано, т.к. контент может быть не по центру */
	margin: 20px auto; /* Отступы сверху/снизу и авто по бокам */
    padding: 20px; /* Внутренние отступы */
	border: none; /* Убрали рамку по умолчанию */
	z-index: 0;
	border-radius: 15px;
	box-shadow: 0 5px 15px 0 rgba(0,0,0,.2);
    /* flex и text-align: center убраны отсюда, т.к. мешают выравниванию контента внутри */
    /* flex-wrap: wrap; Убрано, т.к. не нужно для самого контейнера */
    /* gap: 20px; Убрано */
    /* Добавляем max-width для ограничения ширины на больших экранах */
    max-width: 1200px;
}

/* Содержимое внутри page_container по умолчанию выравниваем по левому краю */
.page_container > div {
    width: 100%; /* Занимает всю ширину контейнера */
    text-align: left; /* Выравнивание текста по умолчанию */
}

/* Списки по умолчанию без маркеров */
ul {
	list-style-type: none;
    padding-left: 0; /* Убираем отступ по умолчанию */
    margin-top: 0;
    margin-bottom: 1em; /* Добавляем стандартный отступ снизу */
}
/* Стили для нумерованных списков */
ol {
    padding-left: 20px; /* Стандартный отступ для нумерации */
    margin-top: 0;
    margin-bottom: 1em;
}

li {
    margin-bottom: 0.5em; /* Небольшой отступ между пунктами */
}

img {
	max-width: 100%;
	height: auto; /* Позволяет сохранять пропорции */
	object-fit: cover; /* Масштабирует, обрезая лишнее */
    display: block; /* Убирает лишние отступы под изображением */
}

a {
	color: inherit;
	text-decoration: none;
}

.text_link {
	color: #FF4C35;
	font-weight: 600;
}

.text_link:hover {
	color: #C80038;
	transition: all 0.3s;
}

.table_main, .table_chislennost {
    width: 100%; /* Таблицы на всю ширину */
    border: 1px solid #ccc; /* Светлая граница */
    border-collapse: collapse;
    margin-bottom: 20px; /* Отступ снизу */
}

.table_main td, .table_main th, .table_chislennost td, .table_chislennost th {
    border: 1px solid #ccc; /* Светлые границы ячеек */
    padding: 8px 10px; /* Увеличенные отступы */
    text-align: left; /* Выравнивание по левому краю для читаемости */
    vertical-align: top; /* Выравнивание по верху */
}
.table_main th, .table_chislennost th {
    background-color: #f2f2f2; /* Легкий фон для заголовков */
    font-weight: bold;
    text-align: center; /* Заголовки можно центрировать */
}

.section { /* Используется ли этот класс? */
	padding: 50px 0; /* Уменьшил отступы */
	border-bottom: 1px solid #eee; /* Более светлая линия */
}
.section:last-child {
    border-bottom: none; /* Убираем границу у последней секции */
}

.photo_galery {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
    gap: 15px; /* Пространство между фото */
    margin-bottom: 20px;
}

.photo_galery-photo {
	/* border: 1px solid #eee; Убрал рамку */
	padding: 0; /* Убрал паддинг */
	border-radius: 8px; /* Скругление */
	max-width: calc(25% - 12px); /* Расчет ширины с учетом gap */
	min-width: 180px;
	/* object-fit: contain; Заменено на cover в общем img */
    overflow: hidden; /* Скрывает части изображения, выходящие за рамки */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Небольшая тень */
}
.photo_galery-photo img {
    border-radius: 8px; /* Скругление для самого изображения */
}

/* Flex и Grid утилиты */
.flex {
	display: flex;
}

.grid {
    display: flex; /* Используем flex для грида */
	margin: 0 -15px;
	flex-wrap: wrap;
}

.col-4, .col-6, .col-12 {
    padding: 0 15px;
	margin-bottom: 30px;
}

.col-4 { flex: 0 1 calc(100% / 3); }
.col-6 { flex: 0 1 calc(100% / 2); }
.col-12 { flex: 0 1 100%; }

.card {
	border: 1px solid #eee; /* Светлая рамка */
	padding: 20px; /* Уменьшил паддинг */
	text-align: center;
    border-radius: 8px; /* Скругление */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Легкая тень */
    height: 100%; /* Карточки в ряду одной высоты */
}

.card img {
	height: 200px;
    width: auto; /* Авто ширина для сохранения пропорций */
    max-width: 100%;
    margin: 0 auto 15px auto; /* Центрирование и отступ снизу */
    object-fit: contain; /* Показывает изображение целиком */
}

.text-danger {
	color: red;
}

/* Заголовки */
h1, h2, h3, h4, h5, h6 {
    margin-top: 1.5em;
    margin-bottom: 0.8em;
    font-weight: bold;
    color: #333; /* Темно-серый цвет заголовков */
}
h1 { font-size: 2.2em; border-bottom: 1px solid #eee; padding-bottom: 0.3em; }
h2 { font-size: 1.8em; }
h3 { font-size: 1.4em; }
h4 { font-size: 1.2em; }


/* --- Стили для страницы преподавателя --- */

.teacher-name { /* Для главного заголовка h2 */
    text-align: center;
    margin-top: 0; /* Убираем верхний отступ у первого заголовка */
    margin-bottom: 30px;
    border-bottom: none; /* Убираем стандартную границу h1/h2, если она есть */
}

.teacher-profile {
    display: flex;
    flex-wrap: wrap; /* Разрешаем перенос на маленьких экранах */
    gap: 30px; /* Пространство между фото и текстом */
    align-items: flex-start; /* Выравнивание по верху */
    margin-bottom: 30px; /* Отступ снизу */
}

.teacher-photo {
    flex: 0 0 250px; /* Фиксированная ширина для фото блока */
    max-width: 250px;
}

.teacher-photo img {
    width: 100%; /* Изображение занимает всю ширину блока .teacher-photo */
    height: auto;
    border-radius: 8px;
    border: 1px solid #ddd; /* Слегка измененная граница */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.teacher-details {
    flex: 1; /* Занимает оставшееся пространство */
    min-width: 300px; /* Минимальная ширина для текста до переноса */
}


/* Список определений (Должность, Стаж и т.д.) */
.teacher-details dl {
    margin: 0; /* Убираем стандартные отступы dl */
}
.teacher-details dt {
    font-weight: bold;
    margin-top: 12px; /* Отступ сверху для каждого термина */
    color: #333;
    font-size: 1.1em; /* Немного крупнее */
}
.teacher-details dt:first-child {
    margin-top: 0; /* Убираем отступ у первого элемента */
}

.teacher-details dd {
    margin-left: 0; /* Убираем стандартный отступ */
    margin-bottom: 8px; /* Отступ снизу для каждого определения */
    color: #555;
    line-height: 1.5; /* Межстрочный интервал */
}

/* Заголовки секций (Достижения, Грамоты) */
.section-title { /* Для h3 */
    margin-top: 40px;
    margin-bottom: 20px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eee;
    font-size: 1.6em; /* Размер как у h2 */
    color: #444;
}

/* Списки достижений и наград */
.achievements-list,
.awards-list {
    list-style-type: disc; /* Возвращаем стандартные маркеры */
    padding-left: 25px; /* Отступ слева для маркеров */
    color: #555;
    line-height: 1.6; /* Межстрочный интервал */
}

.achievements-list li,
.awards-list li {
    margin-bottom: 10px; /* Отступ между пунктами списка */
}

/* --- Конец стилей для страницы преподавателя --- */



/* --- Стили для таблицы-графика олимпиад (Финальная TABLE-версия) --- */

/* Обертка для адаптивности */
.schedule-wrapper {
    overflow-x: auto;
    padding-bottom: 10px;
}

.schedule-table {
    min-width: 950px;
    width: 100%;
    border-collapse: separate; /* Используем separate для создания отступов */
    border-spacing: 2px; /* Расстояние между ячейками */
    background-color: #fff; /* Цвет отступов */
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* Шапка таблицы */
.schedule-table thead th {
    background-color: #8A7EB1;
    color: white;
    padding: 15px 10px;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
}

/* Ячейки таблицы */
.schedule-table td {
    padding: 15px;
    vertical-align: top;
    position: relative;
    min-height: 90px;
}

/* Ячейка с месяцем */
.month-cell {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    text-align: center;
    vertical-align: middle;
    font-weight: bold;
    text-transform: uppercase;
    width: 50px;
    color: #333;
}
.month-cell.september { background-color: #C6BEE1; }
.month-cell.october { background-color: #F3C99F; }

/* Ячейка дня */
.day-cell.september { background-color: #E9E4F5; }
.day-cell.october { background-color: #FBE6D0; }

.day-cell.empty-cell {
    min-height: 60px;
}

/* Кружок с датой */
.date-circle {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 500;
    color: #555;
}
.september .date-circle { background-color: #DCD5EE; }
.october .date-circle { background-color: #F8DBC0; }

/* Блок с предметом */
.subject-item {
    margin-bottom: 12px;
    line-height: 1.4;
    font-size: 14px;
}
.subject-item a {
    color: #FF4C35;
    font-weight: bold;
}
.subject-item a:hover {
    color: #C80038;
}

.time-note {
    display: block;
    font-size: 13px;
    color: #666;
}

/* Сноски под таблицей */
.schedule-notes {
    margin-top: 20px;
    padding: 0 10px;
    font-size: 14px;
    color: #666;
    line-height: 1.6;
}
.schedule-notes p {
    margin: 5px 0;
}

/* --- Медиа-запросы для адаптивности --- */
@media (max-width: 1200px) {
	body {
		/* font-size: 90%; Убрал, лучше использовать относительные единицы (em, rem) */
	}

	.col-4,
	.col-6 {
        /* На планшетах можно сделать по 2 колонки */
        flex: 0 1 calc(100% / 2);
	}
	.page_container {
		width: 95%; /* Чуть шире на средних экранах */
        margin: 15px auto;
        padding: 15px;
	}

	.table_main td, .table_main th, .table_chislennost td, .table_chislennost th {
	   padding: 5px; /* Уменьшаем отступы в таблицах */
       font-size: 0.9em; /* Уменьшаем шрифт в таблицах */
	}
	/* Можно добавить стили для горизонтальной прокрутки таблиц, если они не помещаются */
    .table_wrapper { /* Обертка для таблиц */
       overflow-x: auto;
       margin-bottom: 15px;
    }
    /* .table_main, .table_chislennost { min-width: 600px; } /* Пример мин. ширины */

    .photo_galery-photo {
        max-width: calc(33.333% - 10px); /* 3 фото в ряд */
    }
}

@media (max-width: 767px) {
  #widgetEsirGovSpbRu {
    width: 100% !important;
    max-width: 100% !important;
    /* ... другие необходимые переопределения ... */
  }
}

@media (max-width: 768px) {
    /* На мобильных */
    .col-4,
	.col-6,
	.col-12 {
		flex: 0 1 100%; /* Все колонки в один столбец */
        margin-bottom: 20px; /* Уменьшаем отступ */
	}

    .page_container {
		width: 98%; /* Почти на всю ширину */
        margin: 10px auto;
        padding: 10px;
        border-radius: 10px; /* Меньше скругление */
	}

    h1 { font-size: 1.8em; }
    h2, .section-title { font-size: 1.5em; }
    h3 { font-size: 1.2em; }

    .teacher-profile {
        gap: 20px; /* Меньше отступ между фото и текстом */
    }
    .teacher-photo {
        flex: 0 0 180px; /* Меньше фото на мобильных */
        max-width: 180px;
        margin: 0 auto; /* Центрируем фото, если текст перенесется */
    }
    .teacher-details {
        min-width: unset; /* Сбрасываем мин. ширину */
        text-align: center; /* Можно центрировать текст под фото */
    }
    .teacher-details dt, .teacher-details dd {
        text-align: left; /* Но сам текст внутри влево */
    }

    .achievements-list, .awards-list {
        padding-left: 20px; /* Меньше отступ для списков */
    }

    .photo_galery-photo {
        max-width: calc(50% - 8px); /* 2 фото в ряд */
    }

    #toggle-vision-mode {
       /* Можно уменьшить/переместить кнопку для мобильных */
       width: 40px;
       height: 229px; /* Пропорционально */
       right: 5px;
    }
}

@media (max-width: 480px) {
    body {
        font-size: 15px; /* Базовый размер шрифта для очень маленьких экранов */
    }
    .photo_galery-photo {
        max-width: 100%; /* 1 фото в ряд */
    }
    .teacher-photo {
        flex-basis: 150px; /* Еще меньше фото */
        max-width: 150px;
    }
}