/* Общие стили */
*{box-sizing:border-box /* include padding/border in element's total width/height */}

:root{
	--page-max-width:1100px; /* ограничение ширины контента */
	--header-vertical-padding: clamp(12px, 1.2vw, 36px); /* вертикальные отступы шапки */
	--header-horizontal-padding: clamp(12px, 2.2vw, 64px); /* горизонтальные отступы шапки */
	--panel-gap-side: clamp(8px, 1.2vw, 24px); /* отступы панелей от краёв */
	--panel-height: clamp(64px, 6.4vw, 120px); /* высота панели */
	--logo-height: clamp(40px, 4.5vw, 90px); /* высота логотипа */
	--nav-gap: clamp(12px, 3vw, 64px); /* расстояние между пунктами навигации */
}

/* Подключение локального шрифта */
@font-face{
	font-family: 'MultiroundPro'; /* локальное имя шрифта */
	src: url('/media/fonts/MultiroundPro.otf') format('opentype'); /* источник шрифта */
	font-weight: 400 700; /* диапазон поддерживаемых начертаний */
	font-style: normal; /* обычное начертание */
	font-display: swap; /* стратегия отображения шрифта */
}

body{font-family:'MultiroundPro', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; /* шрифты по приоритету */ 
	margin:0 /* убрать отступы браузера */; 
	background:#fff /* фон страницы */; 
	min-height:100vh /* обеспечить минимум высоты окна */; 
	display:flex /* использовать flex-контейнер для вертикального расположения */; 
	flex-direction:column /* столбцовое направление для основных блоков */;}

/* Шапка */
.site-header{
	background:#de582f /* фон шапки */; 
	padding:var(--header-vertical-padding) var(--header-horizontal-padding) /* вертик./гориз. отступы */; 
	border-radius:0 /* скругление границ */; 
	position:relative /* позиционирование для перекрытий */; 
	z-index:3 /* слой над контентом */}
.header-inner{max-width:var(--page-max-width) /* ограничение ширины внутреннего контейнера */; 
	margin:0 auto /* центрирование */; 
	display:flex /* флекс-контейнер для логотипа и навигации */; 
	align-items:center /* вертикальное выравнивание */; 
	justify-content:flex-start /* выравнивание слева */; 
	position:relative /* относительное позиционирование */}

.logo{
	display:flex /* контейнер логотипа как флекс */; 
	align-items:center /* центрирование по вертикали */}
.logo-img{
	height:clamp(36px,3.2vw,56px) /* гибкая высота логотипа */; 
	width:auto /* сохранить пропорции */; 
	display:block /* изображение как блочный элемент */; 
	max-width:160px /* ограничение по ширине */}
.logo{margin-right: clamp(12px,2.2vw,48px) /* отступ справа от логотипа */}

.main-nav{
	flex:1 /* навигация занимает оставшееся пространство */; 
	display:flex /* флекс-контейнер */; 
	justify-content:flex-start /* выравнивание элементов слева */}
.main-nav ul{
	list-style:none /* убрать маркеры списка */; 
	margin:0 /* убрать внешние отступы */; 
	padding:0 /* убрать внутренние отступы */; 
	display:flex /* горизонтальный список */; 
	gap:8px /* промежуток между элементами */; 
	align-items:center /* вертикальное выравнивание */}
.main-nav a{
	color:#fff /* цвет ссылок */; 
	text-decoration:none /* убрать подчеркивание */; 
	font-weight:700 /* полужирный */; 
	font-size:clamp(14px,1.2vw,20px) /* адаптивный размер шрифта */; 
	text-transform:uppercase /* верхний регистр */; 
	display:block /* чтобы padding работал */; 
	text-align:left /* выравнивание текста */}

/* Ограничение ширины навигации: при очень широких экранах не растягивать пункты слишком широко */
.main-nav ul{max-width:calc(var(--page-max-width) - 220px) /* ограничить ширину навигации */}

/* Чтобы логотип выглядел как на скриншоте — белый текст внутри оранжевого блока (контраст с фоном) */
.logo{background:transparent /* фон логотипа прозрачный */}
.header-inner{position:relative /* относительное позиционирование */; z-index:1 /* слой для внутреннего содержимого */}

/* Перекрытие навигации на фоне */
.main-nav{display:flex /* флекс для выравнивания ссылок */; align-items:center /* центрировать по вертикали */}
.main-nav a{color:#fff /* явный цвет ссылок */}

/* Адаптив */
@media (max-width: 320px) {
	:root{ 
	--header-horizontal-padding: 12px /* уменьшить горизонтальные отступы */;
	--header-vertical-padding: 10px /* уменьшить вертикальные отступы */ }
	.header-inner{ 
		padding:6px 8px /* внутренние отступы */; 
		display:flex /* флекс для вертикального стека */; 
		flex-direction:column /* столбец */; 
		gap:12px /* расстояние между элементами */; 
		align-items:center /* центрирование */ }
	.logo-img{ height:40px /* фиксированная высота логотипа */ }
	.main-nav ul{ 
		display:flex /* вертикальный список */; 
		flex-direction:column /* столбец */; 
		gap:10px /* промежуток */; 
		align-items:center /* центрирование */; 
		justify-content:center /* по центру */; 
		width:100% /* растянуть */ }
	.main-nav a{ font-size:20px /* крупный шрифт */; 
		font-weight:800 /* очень жирный */; 
		text-align:center /* центрирование */; 
		display:block /* блочный элемент */; 
		padding:6px 0 /* вертикальные отступы */ }
	.events-hero{ padding:18px 12px /* геро-раздел сжат */ }
	.events-title{ font-size:22px /* размер заголовка */ }
	.events-content{ 
		padding:0 12px /* горизонтальные отступы */; 
		gap:12px /* расстояние между карточками */; 
		padding-bottom:60px !important /* дополнительный отступ снизу */ }
	.event-card{ padding:14px /* внутренние отступы карточки */; border-radius:20px /* скругление */ }
	.event-name{ font-size:16px /* размер названия события */ }
	.event-datetime{ font-size:12px /* размер даты/времени */ }
}
.site-footer {
        	background: #000 /* фон футера */;
        	color: #fff /* цвет текста футера */;
        	padding: 40px var(--header-horizontal-padding) /* вертик./гориз. отступы футера */;
        	margin-top: auto /* отодвинуть футер вниз при flex layout */;
    }

    .footer-inner {
        	max-width: var(--page-max-width) /* ограничение ширины футера */;
        	margin: 0 auto /* центрирование */;
        	display: flex /* флекс-контейнер */;
        	flex-direction: column /* столбец */;
        	align-items: center /* центрирование */;
        	gap: 24px /* расстояние между элементами */;
        	text-align: center /* центрирование текста */;
    }

    .footer-logo-img {
        	height: 32px /* высота логотипа в футере */;
        	width: auto /* авто ширина для сохранения пропорций */;
    }

    .footer-copyright {
        	font-size: 18px /* размер текста */;
        	font-weight: 700 /* полужирный */;
    }

    .footer-contacts {
        	display: flex /* флекс-контейнер */;
        	flex-direction: column /* столбец */;
        	gap: 16px /* промежуток между контактами */;
        	align-items: center /* центрирование */;
    }

    .contact-item {
        	display: flex /* горизонтальный флекс */;
        	align-items: center /* выравнивание по центру */;
        	gap: 12px /* расстояние между иконкой и текстом */;
    }

    .contact-icon {
        	width: 24px /* ширина иконки */;
        	height: 24px /* высота иконки */;
        	object-fit: contain /* сохранить пропорции */;
    }

    .contact-item a {
        	color: #fff /* цвет ссылок контактов */;
        	text-decoration: none /* убрать подчеркивание */;
        	font-weight: 700 /* полужирный */;
        	font-size: 16px /* размер шрифта */;
    }

    .footer-note {
        	font-size: 14px /* размер служебной заметки */;
        	opacity: 0.8 /* немного прозрачный */;
    }

    @media (max-width: 600px) {
        	.site-footer {
        		padding: 32px 16px /* уменьшить паддинги на мобильных */;
        	}

        	.footer-copyright {
        		font-size: 16px /* уменьшить размер */;
        	}

        	.contact-item a {
        		font-size: 14px /* уменьшить размер контакта */;
        	}

        	.footer-note {
        		font-size: 12px /* уменьшить размер заметки */;
        	}
    }

/* Основной контент страницы */
.events-main {
	flex: 1 /* растянуть основной контент */;
	display: flex /* контейнер для вертикального порядка секций */;
	;
	flex-direction: column /* расположение секций сверху вниз */;
}

/* Героический раздел с заголовком */
.events-hero {
	max-width: var(--page-max-width) /* ограничение ширины геро */;
	margin: 0 auto /* центрирование */;
	width: 100% /* занять всю доступную ширину */;
	padding: clamp(40px, 6vw, 80px) var(--header-horizontal-padding) /* адаптивные паддинги */;
	text-align: left /* выравнивание текста слева */;
}

.events-title {
	font-size: clamp(32px, 5vw, 56px) /* адаптивный размер заголовка */;
	font-weight: 700 /* полужирный */;
	color: #000 /* цвет текста */;
	margin: 0 /* убрать отступы */;
	text-transform: uppercase /* верхний регистр */;
	letter-spacing: 1px /* промежуток между буквами */;
	line-height: 1.2 /* высота строки */;
}

.events-title-highlight {
	color: #de582f /* выделенный цвет */;
	display: block /* блочный элемент для переноса */;
}

/* Контейнер с карточками событий */
.events-content {
	max-width: var(--page-max-width) /* ограничение ширины */;
	margin: 0 auto /* центрирование */;
	width: 100% /* занять 100% ширины */;
	padding: 0 var(--header-horizontal-padding) /* горизонтальные отступы */;
	display: grid /* grid для карточек */;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) /* адаптивные колонки */;
	gap: clamp(20px, 3vw, 40px) /* адаптивный gap */;
	padding-bottom: clamp(40px, 6vw, 80px) /* нижний отступ */;
}

/* Карточка события */
.event-card {
	background: #d0d0d0 /* фон карточки */;
	border: 3px solid #de582f /* рамка карточки */;
	border-radius: 32px /* скругление */;
	padding: clamp(24px, 3.5vw, 40px) /* адаптивные внутренние отступы */;
	display: flex /* флекс внутри карточки */;
	;
	flex-direction: column /* столбец */;
	transition: all 0.3s ease /* плавный ховер-эффект */;
}

.event-card:hover {
	box-shadow: 0 6px 24px rgba(222, 88, 47, 0.15) /* тень при наведении */;
	transform: translateY(-4px) /* немного поднять карточку */;
}

/* Название события */
.event-name {
	font-size: clamp(16px, 2vw, 22px) /* адаптивный размер названия */;
	font-weight: 700 /* полужирный */;
	color: #000 /* цвет текста */;
	margin: 0 0 16px 0 /* отступ снизу */;
	line-height: 1.3 /* высота строки */;
	text-transform: uppercase /* верхний регистр */;
	letter-spacing: 0.5px /* интервал между буквами */;
}

/* Детали события */
.event-details {
	display: flex /* контейнер для деталей */;
	;
	flex-direction: column /* столбец */;
	gap: 8px /* расстояние между элементами */;
	margin-bottom: 20px /* отступ снизу */;
}

/* Дата и время */
.event-datetime {
	font-size: clamp(14px, 1.5vw, 18px) /* адаптивный размер даты */;
	color: #000 /* цвет текста */;
	font-weight: 700 /* полужирный */;
	margin: 0 /* убрать внешние отступы */;
	line-height: 1.4 /* высота строки */;
	text-transform: uppercase /* верхний регистр */;
}

/* Место проведения */
.event-location {
	font-size: clamp(13px, 1.3vw, 16px) /* адаптивный размер места */;
	color: #666 /* цвет для менее важного текста */;
	font-weight: 500 /* средний вес шрифта */;
	margin: 0 /* убрать внешние отступы */;
	line-height: 1.4 /* высота строки */;
	text-transform: uppercase /* верхний регистр */;
}

/* Кнопка "Информация" */
.event-button {
	background: transparent /* фон прозрачный */;
	color: #000 /* цвет текста */;
	text-decoration: none /* убрать подчеркивание */;
	font-weight: 700 /* полужирный */;
	font-size: clamp(13px, 1.2vw, 15px) /* адаптивный размер */;
	padding: clamp(10px, 1.3vw, 14px) 0 /* вертик. padding */;
	border-radius: 0 /* без скругления */;
	display: inline-block /* блочно-строчный элемент */;
	text-align: left /* выравнивание */;
	cursor: pointer /* курсор */;
	transition: all 0.3s ease /* плавный переход */;
	align-self: flex-start /* выравнивание в начале */;
	text-transform: uppercase /* верхний регистр */;
	border: none /* без рамки */;
	border-bottom: 2px solid #000 /* акцентная нижняя граница */;
	letter-spacing: 0.5px /* интервал между буквами */;
}

.event-button:hover {
	color: #de582f /* цвет при ховере */;
	border-bottom-color: #de582f /* цвет нижней границы при ховере */;
}

/* Адаптив для планшетов */
@media (max-width: 768px) {
	.events-content {
		grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
		gap: clamp(16px, 2.5vw, 28px);
	}

	.events-hero {
		padding: clamp(32px, 4vw, 60px) var(--header-horizontal-padding);
	}
}

/* Адаптив для мобильных устройств */
@media (max-width: 600px) {
	.events-content {
		grid-template-columns: 1fr;
		gap: 16px;
		padding-bottom: 32px;
	}

	.events-hero {
		padding: 24px 16px;
	}

	.events-title {
		font-size: 28px;
	}

	.event-card {
		padding: 20px;
	}

	.event-name {
		font-size: 18px;
	}

	.event-datetime {
		font-size: 14px;
	}

	.event-location {
		font-size: 13px;
	}

	.event-button {
		padding: 12px 0;
		font-size: 13px;
		width: auto;
	}

	.site-footer {
		padding: 32px 16px;
	}

	.footer-copyright {
		font-size: 16px;
	}

	.contact-item a {
		font-size: 14px;
	}

	.footer-note {
		font-size: 12px;
	}
}

/* Покрытие промежуточных ширин (например, 440px) — сделать шапку адаптивной */
@media (max-width: 600px) and (min-width: 426px) {
	.header-inner{display:flex; flex-direction:column; gap:12px; align-items:center}
	.main-nav{width:100%;}
	.main-nav ul{display:flex; flex-direction:column; gap:10px; align-items:center; justify-content:center; width:100%; max-width:none}
	.main-nav a{font-size:18px; text-align:center}
	.logo-img{height:34px}
}


/* Дополнительные точечные брейкпоинты: 320, 425, 768, 1024, 1440 */

/* Очень маленькие экраны (до 320px) — вертикальное меню в шапке */
@media (max-width: 320px) {
    :root{ --header-horizontal-padding: 12px; --header-vertical-padding: 10px }
    .header-inner{ padding:6px 8px; display:flex; flex-direction:column; gap:18px; align-items:center }
    .logo-img{ height:40px }
    .main-nav ul{ display:flex; flex-direction:column; gap:18px; align-items:center; justify-content:center; width:100% }
    .main-nav a{ font-size:20px; font-weight:800; text-align:center; display:block; padding:6px 0 }
    .events-hero{ padding:18px 12px }
    .events-title{ font-size:22px }
    .events-content{ padding:0 12px; gap:12px; padding-bottom:60px !important }
    .event-card{ padding:14px; border-radius:20px }
    .event-name{ font-size:16px }
    .event-datetime{ font-size:12px }
}

/* Малые телефоны (до 425px) */
@media (max-width: 425px) {
	:root{
		--header-horizontal-padding: 14px;
		--header-vertical-padding: 12px;
	}
	.header-inner{padding:10px 12px}
	/* Стекать шапку и меню на узких телефонах */
	.header-inner{display:flex; flex-direction:column; gap:12px; align-items:center}
	.main-nav{width:100%;}
	.main-nav ul{display:flex; flex-direction:column; gap:10px; align-items:center; justify-content:center; width:100%; max-width:none}
	.logo-img{height:30px}
	.events-hero{padding:22px 14px}
	.events-title{font-size:26px}
	.events-content{padding:0 14px; gap:14px}
	.event-card{padding:16px}
	.event-name{font-size:17px}
	.event-datetime{font-size:13px}
}

/* Планшеты/малые ноутбуки — целевая точка 768px */
@media (min-width: 600px) and (max-width: 768px) {
	.events-content{grid-template-columns: repeat(2, 1fr); gap:20px}
	.events-hero{padding:36px var(--header-horizontal-padding)}
	.event-card{padding:20px}
}

/* Средние экраны / десктопы — 1024px (до 1024) */
@media (min-width: 769px) and (max-width: 1024px) {
	.events-content{grid-template-columns: repeat(2, 1fr); gap:28px}
	.events-hero{padding:44px var(--header-horizontal-padding)}
	.event-name{font-size:20px}
	.event-card{padding:26px}
	.main-nav ul{max-width:calc(var(--page-max-width) - 200px)}
}

/* Большие экраны: 1025px и выше — оптимизация для 1024/1440 */
@media (min-width: 1025px) and (max-width: 1439px) {
	.events-content{grid-template-columns: repeat(3, 1fr); gap:32px}
	.events-hero{padding:56px var(--header-horizontal-padding)}
	.event-card{padding:32px}
	.events-title{font-size: clamp(34px, 4.5vw, 48px)}
}

/* Широкие экраны >=1440px */
@media (min-width: 1440px) {
	:root{ --page-max-width:1200px; --header-horizontal-padding:64px }
	.header-inner{max-width:var(--page-max-width); padding-left:0}
	.events-content{grid-template-columns: repeat(3, 1fr); gap:40px}
	.events-hero{padding:clamp(60px,6vw,100px) var(--header-horizontal-padding)}
	.events-title{font-size:56px}
	.event-card{padding:40px}
}