/* ============================== */
/* Главная страница (авторизация) */
/* ============================== */

/* Шапка главной – выше, чем на внутренних страницах */
.header__inner {
   min-height: clamp(64px, 5.5vw, 118px);
}

.header-left {
   flex-shrink: 0;

   /* приподнимаем логотип к вертикальному центру фразы справа */
   margin-bottom: 14px;
}

.header-right {
   display: flex;
   flex-direction: column;
   align-items: flex-end;

   min-width: 0;
   text-align: right;
}

.img {
   display: block;
   max-width: 100%;
   height: auto;
   border: none;
}

.img--first {
   width: clamp(170px, 15vw, 240px);
   cursor: pointer;
}

.img--second {
   width: clamp(180px, 22vw, 330px);
}

.text {
   margin-top: 6px;

   font-family: 'Raleway Medium', sans-serif;
   font-size: clamp(12px, 1.1vw, 17px);
   color: #E4E4E4;

   text-align: right;
   overflow-wrap: anywhere;
}

/* Контент распределяется по всей высоте окна:
   блок входа занимает свободное место, категории прижаты вниз */
.main {
   display: flex;
   flex-direction: column;
}

.main .section:first-child {
   flex: 1 1 auto;
   display: flex;
   align-items: center;
}

/* Секция входа: картинка + форма */
.section-login {
   width: 100%;
   display: flex;
   justify-content: space-evenly;
   align-items: center;
   gap: clamp(16px, 2vw, 40px);

   padding: clamp(16px, 3vw, 40px) 0 0;
}

/* Картинка и форма распределяются с равными отступами */
.img-main-wrap {
   flex: 0 1 auto;
   width: min(52%, 900px);
   min-width: 0;

   display: flex;
   justify-content: center;
}

.img--main {
   width: 100%;
   max-width: 900px;

   border-radius: 12px;
}

/* Слайд-шоу на главной: плавная смена картинок */
.slideshow {
   position: relative;

   width: 100%;
   max-width: 900px;
   aspect-ratio: 1030 / 600;

   border-radius: 12px;
   overflow: hidden;
}

/* Подсветка нажатия отключена глобально в base.css */

/* Видимая рамка фокуса нужна тем, кто ходит с клавиатуры, – оставляем её
   только для них, а на тап её быть не должно */
.slideshow__img:focus,
.slideshow__vbtn:focus:not(:focus-visible),
.slideshow__dot:focus:not(:focus-visible),
.slideshow__arrow:focus:not(:focus-visible) {
   outline: none;
}

.slideshow__img {
   position: absolute;
   inset: 0;

   width: 100%;
   height: 100%;
   object-fit: cover;

   opacity: 0;
   transition: opacity .8s ease;

   /* Слайды лежат стопкой, неактивные лишь прозрачны – а прозрачный элемент
      по-прежнему ловит нажатия. Без этой строки верхний в стопке (последний
      слайд) перехватывал все тапы, и пауза по кадру работала только у
      последнего видео в списке */
   pointer-events: none;
}

.slideshow__img--active {
   opacity: 1;
   pointer-events: auto;
}

/* Видеофайл и встроенный плеер занимают слайд целиком */
video.slideshow__img {
   background-color: #000;
   cursor: pointer; /* тап по кадру ставит на паузу и снимает с неё */
}

iframe.slideshow__img {
   border: 0;
   background-color: #000;
}

/* Стрелки слайд-шоу */
.slideshow__arrow {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   z-index: 5;

   width: 40px;
   height: 40px;

   background-color: rgba(0, 0, 0, .35);
   border: none;
   border-radius: 50%;
   /* светлое кольцо: на тёмных слайдах тёмный круг сливался с фоном,
      белый шеврон висел «в воздухе» */
   box-shadow: 0 0 0 1px rgba(255, 255, 255, .3);

   cursor: pointer;
   opacity: 0;
   transition: opacity .2s ease, background-color .15s linear;
}

@media (any-hover: hover) {
   .slideshow:hover .slideshow__arrow {
      opacity: 1;
   }
}

/* тач-экран: ховера нет – стрелки видны всегда (приглушённо), не «залипают» */
@media (hover: none) {
   .slideshow__arrow {
      opacity: .55;
   }
}

@media (any-hover: hover) {
   .slideshow__arrow:hover {
      background-color: rgba(0, 0, 0, .6);
   }
}

.slideshow__arrow--prev { left: 12px; }
.slideshow__arrow--next { right: 12px; }

/* Панель видео-слайда: пауза, дорожка, время, звук.
   Показывается только когда активен слайд с видеофайлом. */
.slideshow__video {
   position: absolute;
   left: 10px;
   right: 10px;
   bottom: 32px; /* над кружочками переключения слайдов */
   z-index: 6;

   display: flex;
   align-items: center;
   gap: 10px;

   padding: 5px 10px;

   /* Подложка приглушённая: панель поверх кадра, и плотный тёмный
      прямоугольник закрывал бы часть картинки. Читаемость значков держится
      не заливкой, а размытием того, что под ней */
   background-color: rgba(0, 0, 0, .28);
   backdrop-filter: blur(6px);
   -webkit-backdrop-filter: blur(6px);
   border-radius: 8px;
}

/* Браузер без размытия – добавляем плотности заливке, иначе значки потеряются */
@supports not ((backdrop-filter: blur(6px)) or (-webkit-backdrop-filter: blur(6px))) {
   .slideshow__video {
      background-color: rgba(0, 0, 0, .45);
   }
}

.slideshow__video[hidden] {
   display: none;
}

.slideshow__vbtn {
   flex: none;
   display: flex;
   align-items: center;
   justify-content: center;

   width: 28px;
   height: 28px;
   padding: 0;

   background: none;
   border: none;
   border-radius: 50%;
   color: #FFFFFF;

   cursor: pointer;
   transition: background-color .15s linear;
}

@media (any-hover: hover) {
   .slideshow__vbtn:hover:not(:disabled) {
      background-color: rgba(255, 255, 255, .18);
   }
}

/* У ролика нет звуковой дорожки: включать нечего */
.slideshow__vbtn--off {
   opacity: .4;
   cursor: default;
}

/* Дорожка: полоса тонкая, но нажимать нужно уверенно – площадь добираем
   вертикальными отступами, а не высотой самой полосы */
.slideshow__vtrack {
   flex: 1 1 auto;
   height: 4px;

   background-color: rgba(255, 255, 255, .28);
   border-radius: 2px;

   cursor: pointer;
   touch-action: none; /* перетаскивание пальцем, а не прокрутка страницы */
}

.slideshow__vfill {
   width: 0;
   height: 100%;

   background-color: #E56F25;
   border-radius: 2px;
}

.slideshow__vtime {
   flex: none;

   font-family: 'Raleway Regular', sans-serif;
   font-size: 12px;
   color: rgba(255, 255, 255, .85);
   font-variant-numeric: tabular-nums; /* цифры не «прыгают» при отсчёте */
}

/* Отклик на нажатие по кадру: значок вспыхивает в центре и растворяется.
   Тёмный круг с оранжевой обводкой и оранжевым значком – те же цвета, что у
   кнопок и активных элементов сайта */
/* Кнопка «загрузить чужой плеер»: закрывает пустую рамку целиком, поэтому
   до нажатия виден не белый прямоугольник, а тёмное поле со значком.
   Размеры на clamp – слайд-шоу растягивается от ноутбука до 4K */
.slideshow__gate {
   position: absolute;
   inset: 0;
   z-index: 5;

   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 10px;

   width: 100%;
   height: 100%;
   padding: 16px;

   font-family: 'Open Sans Regular', sans-serif;
   text-align: center;
   color: #E4E4E4;

   background-color: #1A1A1A;
   border: 0;
   cursor: pointer;
}

.slideshow__gate[hidden] {
   display: none;
}

.slideshow__gate-play {
   display: flex;
   align-items: center;
   justify-content: center;

   width: clamp(56px, 5vw, 78px);
   height: clamp(56px, 5vw, 78px);
   /* значок «играть» зрительно левее центра круга – сдвигаем обратно */
   padding-left: 4px;

   color: #E56F25;
   background-color: rgba(43, 43, 43, .82);
   border: 2px solid #E56F25;
   border-radius: 50%;
}

.slideshow__gate-title {
   font-family: 'Open Sans SemiBold', sans-serif;
   font-size: clamp(15px, 1.2vw, 20px);
   color: #FFFFFF;
}

.slideshow__gate-note {
   max-width: min(420px, 82%);
   font-size: clamp(12px, 0.9vw, 15px);
   line-height: 1.4;
   color: #B3B3B3;
}

@media (any-hover: hover) {
   .slideshow__gate:hover .slideshow__gate-play {
      background-color: #E56F25;
      color: #FFFFFF;
   }
}

.slideshow__flash {
   position: absolute;
   left: 50%;
   top: 50%;
   z-index: 6;

   display: flex;
   align-items: center;
   justify-content: center;

   width: 72px;
   height: 72px;

   background-color: rgba(43, 43, 43, .82);
   border: 2px solid #E56F25;
   border-radius: 50%;
   color: #E56F25;

   opacity: 0;
   pointer-events: none;
   transform: translate(-50%, -50%) scale(.7);
}

.slideshow__flash--on {
   animation: slideshow-flash .55s ease-out;
}

@keyframes slideshow-flash {
   0%   { opacity: 0; transform: translate(-50%, -50%) scale(.7); }
   25%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
   100% { opacity: 0; transform: translate(-50%, -50%) scale(1.25); }
}

/* Кому анимация мешает – просто ничего не мигает */
@media (prefers-reduced-motion: reduce) {
   .slideshow__flash--on {
      animation: none;
   }
}

/* Полноэкранный режим: слайд занимает весь экран, кадр вписывается целиком
   (обрезать видео по краям здесь незачем – смотрят именно его) */
.slideshow:fullscreen {
   max-width: none;
   width: 100vw;
   height: 100vh;
   aspect-ratio: auto;
   border-radius: 0;
   background-color: #000;
}

.slideshow:fullscreen .slideshow__img {
   object-fit: contain;
}

/* На весь экран разворачивается конкретный ролик – переключать слайды тут
   незачем, кружочки и стрелки убираем */
.slideshow:fullscreen .slideshow__dots,
.slideshow:fullscreen .slideshow__arrow,
.slideshow:-webkit-full-screen .slideshow__dots,
.slideshow:-webkit-full-screen .slideshow__arrow {
   display: none;
}

/* Панель опускаем к нижнему краю: кружочков под ней больше нет */
.slideshow:fullscreen .slideshow__video,
.slideshow:-webkit-full-screen .slideshow__video {
   left: 24px;
   right: 24px;
   bottom: 24px;
}

.slideshow:-webkit-full-screen {
   max-width: none;
   width: 100vw;
   height: 100vh;
   border-radius: 0;
   background-color: #000;
}

.slideshow:-webkit-full-screen .slideshow__img {
   object-fit: contain;
}

/* Кружочки-индикаторы слайдов */
.slideshow__dots {
   position: absolute;
   left: 50%;
   bottom: 9px;   /* 12px минус добавленное поле – точки остались там же */
   transform: translateX(-50%);
   z-index: 5;

   display: flex;
   gap: 8px;

   /* Показываем не больше семи точек: 7 по 10px, шесть промежутков по 8px,
      плюс поля по 8px, в которых лишние растворяются. Слайдов бывает много,
      и полтора десятка кружков под кадром выглядели бы частоколом */
   max-width: 134px;
   /* По вертикали 3px – не для красоты: прокрутка по горизонтали включает
      обрезку и по вертикали, а активная точка увеличена на 15% и вылезала
      за высоту ленты. Без этих полей у неё срезало верх и низ */
   padding: 3px 8px;

   overflow-x: auto;
   scroll-behavior: smooth;
   overscroll-behavior-x: contain;
   /* Полосу прокрутки прячем: лента ездит сама, тянуть её руками не нужно */
   scrollbar-width: none;
   -ms-overflow-style: none;
}

.slideshow__dots::-webkit-scrollbar {
   width: 0;
   height: 0;
}

/* На телефоне кадр узкий, и семь точек занимают заметную часть его ширины.
   Оставляем пять – лента всё равно едет, просто окно короче */
@media (max-width: 600px) {
   .slideshow__dots {
      max-width: 98px;
   }
}

/* Растворение по краям вместо обрезки – но только с той стороны, где
   ещё остались точки. В начале списка левый край чистый, в конце – правый:
   растворять там нечего, а тусклая крайняя точка выглядела бы ошибкой.
   Классы вешает autoupdate.js по положению ленты */
.slideshow__dots--fade-left:not(.slideshow__dots--fade-right) {
   -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 100%);
   mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 100%);
}

.slideshow__dots--fade-right:not(.slideshow__dots--fade-left) {
   -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 14px), transparent 100%);
   mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 14px), transparent 100%);
}

.slideshow__dots--fade-left.slideshow__dots--fade-right {
   -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px,
      #000 calc(100% - 14px), transparent 100%);
   mask-image: linear-gradient(90deg, transparent 0, #000 14px,
      #000 calc(100% - 14px), transparent 100%);
}

/* Светлая заливка + тонкое тёмное кольцо: двойной контраст – кружочки видны
   и на тёмных слайдах (раньше rgba(0,0,0,.35) тонула в чёрном фоне),
   и на светлых (за счёт кольца) */
.slideshow__dot {
   /* flex: 0 0 auto – иначе в ленте точки сплющивались бы вместо прокрутки */
   flex: 0 0 auto;

   width: 10px;
   height: 10px;
   padding: 0;

   background-color: rgba(255, 255, 255, .5);
   border: none;
   border-radius: 50%;
   box-shadow: 0 0 0 1px rgba(0, 0, 0, .35);

   cursor: pointer;
   transition: background-color .15s linear, transform .15s ease;
}

/* яркий ховер – только у неактивных: активная точка остаётся оранжевой
   и под курсором (сразу после клика по ней) */
@media (any-hover: hover) {
   .slideshow__dot:not(.slideshow__dot--active):hover {
      background-color: rgba(255, 255, 255, .85);
   }
}

.slideshow__dot--active {
   background-color: #E56F25;
   transform: scale(1.15);
}

/* Шеврон внутри стрелки */
.slideshow__arrow::before {
   content: "";
   position: absolute;
   top: 50%;
   left: 50%;

   width: 10px;
   height: 10px;

   border-right: 2px solid #FFFFFF;
   border-bottom: 2px solid #FFFFFF;
}

.slideshow__arrow--prev::before {
   transform: translate(-30%, -50%) rotate(135deg);
}

.slideshow__arrow--next::before {
   transform: translate(-70%, -50%) rotate(-45deg);
}

/* Форма */
.form {
   flex: 0 1 auto;

   width: clamp(360px, 28vw, 480px);
   /* заголовок в одну строку – панель не должна быть уже него */
   min-width: fit-content;

   /* Сетка: заголовок, поля с кнопкой и нижняя строка – в средней колонке,
      ширина которой = ширине текста заголовка (но не уже 92%);
      разделительная линия – на всю ширину */
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(92%, max-content) minmax(0, 1fr);

   /* блок авторизации немного правее центра своей зоны */
   margin-left: clamp(24px, 4vw, 90px);

   /* панель авторизации: холодный графитовый градиент */
   background: linear-gradient(155deg, #464a4f 0%, #37393c 100%);
   border: 1px solid rgba(255, 255, 255, .09);
   border-radius: 16px;
   /* сверху меньше, чем снизу: у заголовка ~10px «воздуха» над буквами
      (полустрока + выносное поле шрифта), снизу – чёткий край кнопки/ссылки */
   /* нижний отступ вмещает две строки сообщения об ошибке (оно абсолютное,
      живёт в этом отступе) – высота панели не меняется при его появлении */
   padding: clamp(15px, 2.1vw, 33px) clamp(18px, 2vw, 30px) clamp(38px, 2.7vw, 48px);
   box-shadow: 0 8px 28px rgba(0, 0, 0, .35);
}

/* Заголовок, поля с кнопкой и нижняя строка – вровень друг с другом */
.title,
.form-auth,
.error-container {
   grid-column: 2;
   width: auto;
}

.title h2 {
   /* заголовок всегда в две строки */
   white-space: nowrap;
}

.title {
   font-family: 'Open Sans Medium', sans-serif;
   font-size: clamp(10px, 1vw, 16px);
   color: #E56F25;

   text-align: left;
   line-height: 1.4;
}

.separator {
   grid-column: 1 / -1;
   width: 100%;
   height: 1px;
   /* сверху 20px, снизу до полей 32px (14 + 18 у формы) */
   margin: 20px 0 14px;

   border: none;
   border-radius: 5px;
   background-color: #E3E3E3;
}

.form-auth {
   display: grid;
   grid-template-columns: 1fr auto;
   gap: 12px;

   /* вровень с заголовком (средняя колонка сетки панели) */
   margin: 18px 0 0;
}

.cont-input-login,
.cont-input-password {
   grid-column: 1;
   position: relative;
}

.input-login,
.input-password,
.btn-submit {
   width: 100%;

   border: none;
   outline: none;
   border-radius: 10px;
}

.input-login,
.input-password {
   height: clamp(38px, 2.9vw, 46px);
   /* симметричные отступы – текст по вертикальному центру, ничего не режется */
   padding: 0 12px 0 42px;

   font-family: 'Raleway Regular', sans-serif;
   font-size: clamp(13px, 1vw, 16px);
   line-height: normal;
}

.input-password {
   padding-right: 42px;
}

.input-login::placeholder,
.input-password::placeholder {
   color: #949494;
}

.input-active {
   background-color: #E3E3E3;
}

/* Автозаполнение: браузер рисует полю свой фон и цвет текста поверх наших.
   Для заблокированных полей это делало их светлыми среди серых – перебиваем
   тенью внутрь (она у автозаполнения не перекрывается) */
.input-blocked:-webkit-autofill,
.input-blocked:-webkit-autofill:hover,
.input-blocked:-webkit-autofill:focus {
   -webkit-box-shadow: inset 0 0 0 1000px #7D7D7D;
   box-shadow: inset 0 0 0 1000px #7D7D7D;
   -webkit-text-fill-color: #E3E3E3;
}

.input-blocked {
   background-color: #7D7D7D;
   pointer-events: none;

   background-image: repeating-linear-gradient(
      -40deg,
      transparent -5px,
      transparent 10px,
      #717171 10px,
      #717171 20px
   );
}

/* Иконки внутри полей */
.cont-input-login::before,
.cont-input-password::before {
   content: "";
   position: absolute;
   top: 50%;
   left: 14px;
   transform: translateY(-50%);

   background-repeat: no-repeat;
   background-size: cover;
}

.cont-input-login::before {
   width: 14px;
   height: 18px;
   background-image: url(../icons/man-icon.svg);
}

.cont-input-password::before {
   width: 18px;
   height: 18px;
   background-image: url(../icons/key-icon.svg);
}

.password-toggle {
   position: absolute;
   top: 50%;
   right: 14px;
   transform: translateY(-50%);

   line-height: 0;
   cursor: pointer;
}

#eye-icon {
   width: 17px;
   height: 17px;
}

.eye-icon-blocked {
   cursor: default;
}

/* Кнопка GO */
.btn-submit {
   grid-column: 2;
   grid-row: 1 / span 2;

   width: clamp(58px, 4.5vw, 74px);
   height: 100%;
}

.btn-red {
   background-image: url(../icons/closed-lock-icon.svg);
   background-repeat: no-repeat;
   background-position: center;
   background-size: 22px;
   background-color: #F25E55;

   text-indent: -9999px;
   pointer-events: none;
}

.btn-yellow {
   /* готово к входу: стрелка «войти» вместо текста */
   background-image: url(../icons/enter-icon.svg);
   background-repeat: no-repeat;
   background-position: center;
   background-size: 26px;
   background-color: #DBDF24;

   text-indent: -9999px;
   cursor: pointer;
   transition: background-color .15s linear;
}

@media (any-hover: hover) {
   .btn-yellow:hover {
      background-color: #cfd31c;
   }
}

.btn-green {
   background-image: url(../icons/opened-lock-icon.svg);
   background-repeat: no-repeat;
   background-position: center;
   background-size: 22px;
   background-color: #70CB29;

   text-indent: -9999px;
   pointer-events: none;
}

/* Нижняя строка формы: «Забыли пароль?» у левого края полей, сообщение
   об ошибке – в той же строке; при авторизации строка скрывается */
.error-container {
   position: relative;
   display: flex;
   flex-wrap: wrap;
   align-items: baseline;
   gap: 6px 14px;

   margin: 14px 0 0;

   min-height: 18px;
}

.error-container[hidden] {
   display: none;
}

/* Место под сообщение: позиционировано абсолютно под строкой «Забыли пароль?»,
   в нижнем отступе панели – текст любой длины не меняет высоту панели и не
   двигает форму (панель отцентрована по вертикали, рост дёргал её вверх) */
.error-slot {
   position: absolute;
   top: 100%;
   left: 0;
   right: 0;
   margin-top: 4px;
}

/* Сообщение – под строкой «Забыли пароль?», на всю ширину формы, в нижнем
   отступе панели: высота панели не меняется, длинный текст переносится */
.error-message {
   margin: 0;

   font-family: 'Open Sans Regular', sans-serif;
   font-size: 12px;
   line-height: 1.3;
   color: red;
   white-space: normal;
   overflow-wrap: anywhere;
}

.error-message:empty {
   display: none; /* пустое – не занимает места, панель не растёт зря */
}

/* Та же строка, но для удачи: «Заявка отправлена» красным читалось бы
   как отказ. Появляется после успешной отправки «Забыли пароль?».
   Зелёный тот же, что у сообщений об успехе в админке (.admin-message.ok) */
.error-message--ok {
   color: #70CB29;
}

/* «Забыли пароль?» – в левом нижнем углу панели: у внутреннего левого края
   (где начинается разделительная линия), сразу под формой */
.forgot-link {
   flex: none;

   font-family: 'Open Sans Regular', sans-serif;
   font-size: clamp(12px, .9vw, 14px);
   line-height: 1.2;
   color: #B3B3B3;
   text-decoration: none;
   border-bottom: 1px solid transparent;

   transition: color .15s linear, border-color .15s linear;
}

@media (any-hover: hover) {
   .forgot-link:hover {
      color: #E56F25;
      border-bottom-color: #E56F25;
   }
}

/* После входа ссылка неактивна: приглушена, как заблокированные поля,
   без подчёркивания и реакции на наведение */
.forgot-link--disabled {
   color: #7D7D7D;
   border-bottom-color: transparent;
   opacity: .7;
   cursor: default;
   pointer-events: none;
}

@media (any-hover: hover) {
   .forgot-link--disabled:hover {
      color: #7D7D7D;
      border-bottom-color: transparent;
      opacity: .7;
      cursor: default;
      pointer-events: none;
   }
}

/* Выпадающее меню пользователя */
.user-menu {
   position: relative;
}

.user-menu--active .text {
   cursor: pointer;
   user-select: none;
}

.user-menu--active .text::after {
   content: "";
   display: inline-block;

   width: 7px;
   height: 7px;
   margin-left: 8px;
   margin-bottom: 2px;

   border-right: 2px solid #E56F25;
   border-bottom: 2px solid #E56F25;

   transform: rotate(45deg);
   transition: transform .15s ease;
}

.user-menu--open .text::after {
   transform: rotate(-135deg);
   margin-bottom: -2px;
}

.user-menu__list {
   position: absolute;
   top: calc(100% + 8px);
   right: 0;
   z-index: 20;

   display: flex;
   flex-direction: column;

   min-width: 170px;
   padding: 6px;

   background-color: #4A4A4A;
   border: 1px solid #5c5c5c;
   border-radius: 12px;
   box-shadow: 0 8px 20px rgba(0, 0, 0, .4);
}

.user-menu__list[hidden] {
   display: none;
}

.user-menu__item {
   padding: 9px 14px;

   font-family: 'Raleway Medium', sans-serif;
   font-size: 14px;
   color: #E4E4E4;
   text-align: left;
   text-decoration: none;

   background: none;
   border: none;
   border-radius: 8px;

   cursor: pointer;
}

@media (any-hover: hover) {
   .user-menu__item:hover {
      background-color: #E56F25;
      color: #FFFFFF;
   }
}

/* Секция ссылок-разделов: не более 5 в ряд, приподнята от подвала */
.section-links {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   gap: clamp(10px, 1.8vw, 24px);

   /* одинаковые отступы сверху (от картинки) и снизу (до подвала) */
   padding: clamp(30px, 3.5vw, 60px) 0;
}

.link {
   position: relative;

   display: flex;
   align-items: center;
   justify-content: center;

   min-height: clamp(100px, 11vw, 175px);
   padding: 10px;

   border-radius: 20px;

   font-family: 'Raleway Medium', sans-serif;
   font-size: clamp(12px, 1.3vw, 22px);
   color: #464646;

   text-decoration: none;
   text-align: center;
   /* длинное название без пробелов переносится, а не растягивает плитку */
   overflow-wrap: anywhere;
   min-width: 0;

   transition: transform .15s ease, box-shadow .15s ease, background-color .15s linear;
}

/* Наведение – мышью или пером: плашка чуть приподнимается, как карточки блога.
   any-hover, а не hover: на планшете со стилусом или мышью отклик тоже нужен,
   а обычному тач-экрану это правило не достанется и подсветка не «залипнет».
   Закрытые плашки не реагируют – у них pointer-events отключены */
@media (any-hover: hover) {
   .link:hover {
      background-color: #D2D2D2;
      transform: translateY(-3px);
      box-shadow: 0 8px 20px rgba(0, 0, 0, .35);
   }
}

.active {
   background-color: #C6C6C6;
}

.blocked {
   pointer-events: none;
   background-color: #7D7D7D;
}

.blocked::before {
   content: "";
   position: absolute;
   top: 14px;
   right: 16px;

   width: clamp(20px, 1.6vw, 26px);
   height: clamp(20px, 1.6vw, 26px);

   background-image: url(../icons/icon-lock-colorized.svg);
   background-repeat: no-repeat;
   background-size: contain;
   background-position: center;
}

/* ======== 4K и большие мониторы ======== */
@media (min-width: 2560px) {
   .img--first {
      width: 275px;
   }

   .img--second {
      width: 370px;
   }

   .text {
      font-size: 22px;
   }

   .title {
      font-size: 23px;
   }

   /* обёртка тоже шире – иначе базовый min(52%, 900px) резал бамп */
   .img-main-wrap {
      width: min(52%, 1300px);
   }

   .img--main,
   .slideshow {
      max-width: 1300px;
   }

   .form {
      width: clamp(460px, 20vw, 520px);
   }

   .slideshow__arrow {
      width: 52px;
      height: 52px;
   }

   .slideshow__arrow::before {
      width: 13px;
      height: 13px;
   }

   .slideshow__dots {
      gap: 10px;
      bottom: 16px;
   }

   .slideshow__dot {
      width: 13px;
      height: 13px;
   }

   .input-login,
   .input-password {
      height: 54px;
      font-size: 19px;
   }

   .btn-submit {
      width: 88px;
   }

   .btn-red,
   .btn-green {
      background-size: 28px;
   }

   .link {
      min-height: 230px;
      font-size: 28px;
   }

   .blocked::before {
      width: 32px;
      height: 32px;
      top: 18px;
      right: 20px;
   }
}

/* Выпадающее меню пользователя в шапке главной */
@media (min-width: 2560px) {
   .user-menu__item {
      font-size: 17px;
      padding: 11px 18px;
   }

   .error-message {
      font-size: 14px;
   }

   .forgot-link {
      font-size: 16px;
   }
}

/* ======== 4K (32″ на 100% масштаба, контейнер 2900px) ======== */
@media (min-width: 3400px) {
   .user-menu__item {
      font-size: 19px;
      padding: 12px 20px;
   }

   .error-message {
      font-size: 16px;
   }

   .forgot-link {
      font-size: 18px;
   }

   .img--first {
      width: 305px;
   }

   .img--second {
      width: 420px;
   }

   .text {
      font-size: 25px;
   }

   .img-main-wrap {
      width: min(58%, 1700px);
   }

   .img--main,
   .slideshow {
      max-width: 1700px;
   }

   .form {
      width: 570px;
   }

   .slideshow__arrow {
      width: 60px;
      height: 60px;
   }

   .slideshow__arrow::before {
      width: 15px;
      height: 15px;
      border-width: 3px;
   }

   .slideshow__dots {
      gap: 12px;
      bottom: 18px;
   }

   .slideshow__dot {
      width: 15px;
      height: 15px;
   }

   .title {
      font-size: 26px;
   }

   .input-login,
   .input-password {
      height: 56px;
      font-size: 19px;
   }

   .btn-submit {
      width: 94px;
   }

   .btn-red,
   .btn-green {
      background-size: 32px;
   }

   .link {
      min-height: 280px;
      font-size: 32px;
      border-radius: 26px;
   }

   .blocked::before {
      width: 38px;
      height: 38px;
      top: 22px;
      right: 24px;
   }
}

/* Телефоны и планшеты (включая ландшафт до 1100): логотип – чуть выше
   геометрического центра шапки; подпись FORGE of DRAWINGS снизу перевешивает,
   и десктопный подъём 14px здесь слишком велик */
@media (max-width: 1100px) {
   .header-left {
      margin-bottom: 7px;
   }
}

/* ======== Мобильная вёрстка ======== */
@media (max-width: 900px) {
   /* Названия плашек-разделов читаемее (базовый clamp даёт ~12px) */
   .link {
      font-size: clamp(15px, 2vw, 19px);
   }

   .section-login {
      flex-direction: column;
   }

   .img--main,
   .slideshow {
      width: 100%;
      max-width: 560px;
   }

   .form {
      width: 100%;
      margin-left: 0;
   }

   .section-links {
      grid-template-columns: repeat(2, 1fr);
   }
}

@media (max-width: 560px) {
   .header__inner {
      flex-direction: column;
      align-items: center;
      gap: 16px; /* отступ между логотипом и фразой «Revolution…», чтобы не сливались */

      padding-top: 12px;
      padding-bottom: 12px;
   }

   .header-left {
      margin-bottom: 0;
   }

   .header-right {
      align-items: center;
   }

   .text {
      text-align: center;
   }
}

/* Планшеты и телефоны: небольшой оптический подъём логотипа. Ровно по центру
   он смотрится опущенным – подпись FORGE of DRAWINGS снизу перевешивает, –
   а десктопные 14px на планшете уже читаются как «съехал вверх» */
@media (pointer: coarse) {
   .header-left {
      margin-bottom: 7px;
   }
}

/* Планшеты: отступы вокруг слайд-шоу и формы считаем и от высоты экрана.
   Раньше они зависели только от ширины, и на широком, но невысоком экране
   (планшет в ландшафте) съедали место, отжимая блоки вниз */
@media (pointer: coarse) and (min-width: 601px) {
   .section-login {
      padding-top: clamp(10px, min(2.6vw, 3vh), 32px);
   }

   .section-links {
      padding: clamp(16px, min(2.8vw, 3.2vh), 44px) 0;
   }

   /* Слайд-шоу с формой – сразу под шапкой, а не по центру свободного места:
      на десктопе секция растягивается и центрирует содержимое, из-за чего на
      планшете блок уезжал вниз. Свободное место собираем над плашками, а сами
      плашки прижимаем к подвалу – между ними остаётся только их отступ */
   .main {
      justify-content: flex-start;
   }

   .main .section:first-child {
      flex: 0 0 auto;
   }

   .main > .section:last-child {
      margin-top: auto;
   }
}

/* ======== Слайд-шоу (hero) на главной: показ по устройству ======== */
/* Убираем hero-слайд-шоу только на смартфонах (портрет по ширине, ландшафт
   по высоте); на планшетах в портрете оно показывается стопкой над формой */
@media (orientation: portrait) and (max-width: 600px),
       (orientation: landscape) and (max-width: 1024px) and (max-height: 500px) {
   .img-main-wrap {
      display: none;
   }

   /* Без картинки форма авторизации – по центру, а не смещена вправо */
   .section-login {
      flex-direction: column;
      align-items: center;
   }

   .form {
      width: 100%;
      max-width: 560px;
      margin-left: 0;
   }
}

/* iPad Pro в портрете (ширина ≥1000): всё в столбик – слайд-шоу сверху,
   под ним авторизация, ниже плашки как на планшетах поменьше */
/* только тач (pointer: coarse): вертикальный десктопный монитор 1080×1920 –
   это не iPad Pro, ему остаётся обычная десктопная раскладка */
@media (orientation: portrait) and (min-width: 1000px) and (pointer: coarse) {
   /* Логотип чуть выше центра шапки – как на телефонах/планшетах поменьше */
   .header-left {
      margin-bottom: 7px;
   }

   .main {
      justify-content: center;
      gap: clamp(28px, 4vh, 60px);
   }

   .main .section:first-child {
      flex: 0 0 auto;
   }

   .section-login {
      flex-direction: column;
      align-items: center;
      gap: clamp(24px, 3vh, 40px);
   }

   .img-main-wrap {
      width: min(100%, 760px);
   }

   .form {
      width: 100%;
      max-width: 560px;
      margin-left: 0;
   }

   .section-links {
      grid-template-columns: repeat(2, 1fr);
      gap: clamp(18px, 2.2vw, 30px);
   }

   .link {
      min-height: clamp(100px, 10vw, 130px);
      font-size: clamp(16px, 1.8vw, 21px);
      border-radius: 18px;
   }
}

/* Планшет в портрете: слайд-шоу стопкой над формой, группа по центру высоты */
@media (orientation: portrait) and (min-width: 601px) and (max-width: 999px) {
   .main {
      justify-content: center;
      gap: clamp(24px, 5vh, 70px);
   }

   .section-login {
      flex-direction: column;
      align-items: center;
      gap: clamp(20px, 3vh, 36px);
   }

   /* Ширина одна на двоих: слайд-шоу и форма входа стоят друг под другом,
      и форма шире картинки смотрится как ошибка вёрстки. Значение задаётся
      переменной, чтобы ступени сжатия меняли его в одном месте */
   .section-login {
      --hero-width: min(100%, 640px);
   }

   .img-main-wrap {
      width: var(--hero-width);
   }

   .form {
      width: 100%;
      max-width: var(--hero-width);
      margin-left: 0;
   }

   .main .section:first-child {
      flex: 0 0 auto;
      align-items: stretch;
   }

   /* Логотип компактнее – он и так крупный на широком планшете */
   .img--first {
      width: clamp(130px, 17vw, 170px);
   }

   .img--second {
      width: clamp(150px, 20vw, 230px);
   }

   /* Плашки разделов крупнее и с более читаемым текстом */
   .section-links {
      gap: clamp(18px, 2.6vw, 30px);
   }

   .link {
      min-height: clamp(90px, 12vw, 120px);
      font-size: clamp(16px, 2vw, 21px);
      border-radius: 18px;
   }
}

/* ======== Ландшафт с невысоким экраном (планшеты 16:10 и 3:2, окно ноутбука) ========
   Главная задумана «в один экран», но на таких пропорциях ей не хватало
   20–60px: подвал обрезался и появлялась прокрутка. Ужимаем вертикальные
   отступы – воздуха вокруг плашек и над секцией входа с избытком */
/* Насколько ужимать главную, решает скрипт (public/js/script.js): он смотрит,
   помещается ли страница целиком, и вешает на <html> класс fit-1, а если мало –
   fit-2. Раньше порог задавался высотой экрана, но у веб-приложения панелей
   браузера нет и места больше – а страница всё равно жалась как в браузере.
   Ужимаются только отступы: высоту самих плашек разделов не трогаем – мелкие
   плашки читаются хуже, чем прокрутка. Если плашки не встали в один ряд,
   скрипт вовсе отключает сжатие и страница прокручивается. */
@media (orientation: landscape) and (min-width: 901px) {
   .fit-1 .section-login {
      padding-top: clamp(12px, 1.6vw, 22px);
   }

   .fit-1 .section-links {
      padding: clamp(16px, 2vw, 28px) 0;
   }


   /* Совсем тесно (например, Chrome на планшете держит строку вкладок и
      адресную строку постоянно – вместе с системной панелью это ~130px) */
   .fit-2 .section-login {
      padding-top: clamp(8px, 1.2vw, 16px);
   }

   .fit-2 .section-links {
      padding: clamp(10px, 1.4vw, 20px) 0;
   }

   /* Третья ступень: не хватает считанных точек (например, два ряда плашек на
      большом экране). Отступы к минимуму, картинка чуть уже – плашки целы */
   .fit-3 .section-login {
      padding-top: 6px;
   }

   .fit-3 .section-links {
      padding: 6px 0;
   }

   .fit-3 .main {
      gap: clamp(6px, 1vw, 14px);
   }

   .fit-3 .img-main-wrap {
      width: min(100%, 62vh);
   }

}

/* Планшет в портрете с ограниченной высотой: та же задача, что и в ландшафте –
   вместить главную целиком, с учётом панелей браузера (в портрете их тоже
   ~130px). Ужимаем зазор между секциями, поля вокруг плашек и их высоту */
@media (orientation: portrait) and (min-width: 601px) and (max-width: 999px) {
   /* Зазор нулевой: расстояние до плашек задают их авто-поля (см. ниже),
      иначе сверху получалось на величину gap больше, чем снизу */
   .fit-1 .main {
      gap: 0;
      justify-content: flex-start; /* форма сверху, без пустого зазора под шапкой */
   }

   .fit-1 .section-login {
      padding-top: clamp(10px, 1.4vh, 18px);
      gap: clamp(14px, 2vh, 26px);
   }

   .fit-1 .section-links {
      padding: clamp(10px, 1.3vh, 16px) 0;
   }


   /* Картинка/слайд-шоу подстраивается и под высоту экрана, а не только под
      ширину; форма следует за ней – переменная общая */
   .fit-1 .section-login {
      --hero-width: min(100%, 560px, 45vh);
   }

   /* Свободное место – над плашками: сами плашки стоят у подвала */
   .fit-1 .main > .section:last-child {
      margin-top: auto;
   }

   /* Совсем мало места: картинка (и форма вместе с ней) ужимается сильнее */
   .fit-2 .section-login {
      --hero-width: min(100%, 560px, 40vh);
   }

}