/*
Theme Name: Новый Киноколледж
Theme URI: https://filmcollege.ru
Description: Тема сайта Нового киноколледжа. Вёрстка перенесена один в один с React-версии, весь контент редактируется через админку (ACF).
Author: Новый Киноколледж
Version: 2.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL v2 or later
Text Domain: kinocollege
*/

/*
  Основные стили лежат в assets/css/theme.css — он собирается из SCSS
  React-версии командой:

      node build/build-css.mjs <путь-к-react-проекту> <путь-к-теме>

  Не правьте theme.css руками: он перезаписывается при пересборке.
  Точечные правки поверх пишите здесь — этот файл подключается после него.
*/

/* --------------------------------------------------------------------------
   Правки поверх собранного theme.css
   -------------------------------------------------------------------------- */

/* Карточка «Документы и сведения» в подвале: в React это был <div> с onClick,
   здесь — настоящая ссылка (работает без JS), поэтому снимаем стили браузера. */
.kc-Dropdown__dropdown-container,
.kc-Dropdown__dropdown-container:hover,
.kc-Dropdown__dropdown-container:visited {
	color: inherit;
	text-decoration: none;
}

/* Боковое меню: пункты-ссылки (разделы сведений, факультеты) в React были
   <button> и <div>, здесь это настоящие ссылки — снимаем подчёркивание. */
.kc-SidebarMenu__menu-item,
.kc-SidebarMenu__dropdown-item {
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   Липкая шапка на мобильных со скрытием при прокрутке вниз
   --------------------------------------------------------------------------
   В Header.module.scss на ≤1080px стоит position: static, из-за чего на
   мобильных пропадает единственный вход в навигацию (бургер) и кнопка
   «Связаться с нами». Возвращаем фиксацию, но прячем шапку при прокрутке
   вниз, чтобы не отъедать высоту у чтения, и показываем при прокрутке вверх.
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
	.kc-Header__header {
		position: fixed;
		transition: transform 0.25s ease;
		will-change: transform;
	}

	/* Скрытая шапка: +20px, чтобы вместе с ней ушла и тень. */
	.kc-Header__header.kc-header--hidden {
		transform: translateY(calc(-100% - 20px));
	}

	/* Главная начинается с Hero во всю высоту — там шапка лежит поверх,
	   как и на десктопе. На остальных страницах освобождаем место сверху. */
	body:not(.home) .kc-MainLayout__main {
		padding-top: 72px;
	}

	/* Якорные переходы («О нас», «Мастерские») не должны уезжать под шапку. */
	.kc-MainLayout__main [id] {
		scroll-margin-top: 80px;
	}
}

/* Уважаем системную настройку «уменьшить движение». */
@media (max-width: 1080px) and (prefers-reduced-motion: reduce) {
	.kc-Header__header {
		transition: none;
	}
}

/* Подстраховка на будущее: если редактор наберёт в визуальном редакторе
   обычные абзацы, глобальный сброс margin не должен их склеить. */
.kc-Admission__consultation p,
.kc-Admission__callCenter p,
.kc-Entrance__consultation p,
.kc-Entrance__callCenter p {
	margin-bottom: 1em;
}

/* --------------------------------------------------------------------------
   Карусель педагогов: прокрутка вместо бесконечной CSS-анимации
   --------------------------------------------------------------------------
   В оригинале лента ехала трансформом и не поддавалась прокрутке, а на ≤768px
   правило flex-wrap: wrap рассыпало 62 карточки в несколько рядов. Здесь лента
   живёт в горизонтальном скроллере: автопрокрутка, перетаскивание, свайп.
   -------------------------------------------------------------------------- */

.kc-teachers-scroller {
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
	cursor: grab;
	/* Первая карточка совпадает по левому краю с заголовком секции,
	   вправо лента по-прежнему уходит за край контейнера. */
	padding-inline: max(20px, calc((100% - 1200px) / 2 + 20px));
}

.kc-teachers-scroller::-webkit-scrollbar {
	display: none;
}

.kc-teachers-scroller.is-dragging {
	cursor: grabbing;
	user-select: none;
}

/* Анимацию и стартовый сдвиг берёт на себя скроллер. */
.kc-teachers-scroller .kc-Teachers__teachers-carousel {
	animation: none;
	transform: none;
	flex-wrap: nowrap;
}

/* Во время перетаскивания карточки не «прыгают» под курсором. */
.kc-teachers-scroller.is-dragging .kc-TeacherCard__teacher-card:hover {
	transform: none;
}

/* Карточка педагога стала ссылкой — снимаем браузерное оформление. */
.kc-TeacherCard__teacher-card,
.kc-TeacherCard__teacher-card:hover,
.kc-TeacherCard__teacher-card:visited {
	color: inherit;
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   Попап преподавателя на ≤900px
   --------------------------------------------------------------------------
   Там макет переключается в колонку, а у фото остаётся width: 100% с
   вертикальным aspect-ratio 303.33/400 — на широком экране это давало картинку
   больше 1000px высотой, текст уезжал далеко вниз. Ограничиваем высоту.
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
	.kc-TeacherPopup__popup-image {
		display: flex;
		justify-content: center;
	}

	.kc-TeacherPopup__popup-image img {
		width: auto;
		max-width: 100%;
		max-height: 42vh;
		object-fit: cover;
	}
}