/* Компоновка входа/регистрации и каталога: без пустых зон, помещается на экран ноутбука */
@media (min-width: 861px) {
  /* блок входа / регистрации: фото тянется по высоте формы, а не наоборот */
  .auth-layout { padding-top: 14px; gap: 18px; align-items: stretch; }
  .auth-photo { min-height: 0; }
  .auth-form { padding: 26px 36px 24px; display: flex; flex-direction: column; justify-content: center; }
  .auth-form h1 { margin-top: 18px; font-size: 38px; letter-spacing: -1.7px; }
  .auth-form .form-intro { margin-bottom: 18px; }
  .auth-form form { width: 100%; align-items: stretch; }
  .auth-form form > .button.dark[type="submit"],
  .auth-form form .button.dark.mt[type="submit"] { align-self: flex-start; }

  /* регистрация: поля на всю ширину карточки, без пустого места справа */
  .auth-form .form-grid { width: 100%; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
  .auth-form .form-grid > .field { width: 100%; min-width: 0; }
  .auth-form .form-grid > .field.full { grid-column: 1 / -1; }
  .auth-form .form-grid > .field.full:has(#university) { grid-column: auto; }
  .auth-form .form-grid > .field:last-child { grid-column: auto; }
  .auth-form .form-grid .field input,
  .auth-form .form-grid .field select { padding-top: 11px; padding-bottom: 11px; }
  .auth-form .form-note { margin: 8px 0 !important; }
  .auth-form .consent-box { width: 100%; margin-top: 4px; }
  .auth-form .consent-box .consent { margin: 0; padding-block: 4px; }
  .auth-form .consent-box { gap: 0; padding-block: 6px; }
  .auth-form .form-info-link { margin: 4px 0 6px; }
  .auth-form .remember { margin: 6px 0 8px; }
  .auth-form .error { margin: 6px 0; }
  .auth-switch { margin-top: 14px; text-align: left; }
}

/* каталог: заголовок в одну строку */
@media (min-width: 861px) {
  .catalog-intro h1 {
    white-space: nowrap;
    font-size: clamp(44px, 5.6vw, 80px);
    letter-spacing: -0.055em;
  }
  .catalog-intro h1 br { display: none; }
  .catalog-intro h1 em { margin-left: 0.22em; }
  .catalog-intro { gap: 32px; }
  .catalog-intro > p { flex: 0 0 auto; }
}

/* большой баннер: заголовок и кнопка прижаты к левому нижнему углу */
.catalog-hero .photo-banner { display: flex; }
.catalog-hero .photo-banner > .banner-copy {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.catalog-hero .photo-banner > .banner-copy > .row.between:first-child { width: 100%; }
.catalog-hero .photo-banner > .banner-copy > h2 { margin-top: auto; margin-bottom: 22px; }
.catalog-hero .photo-banner > .banner-copy > .row.between:last-child { width: 100%; }

/* закрытые выпадающие списки не должны давать горизонтальную прокрутку на телефоне */
html, body { overflow-x: clip; }

/* планшет/телефон: шапка с меню во второй строке растёт по содержимому, а не наезжает на страницу */
@media (max-width: 1150px) {
  body .public-header { height: auto; min-height: 84px; padding-bottom: 12px; flex-wrap: wrap; row-gap: 12px; }
}

/* регистрация: нижняя часть формы в две колонки, правый угол больше не пустой */
@media (min-width: 981px) {
  .auth-form #register-form {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.9fr);
    column-gap: 28px;
    align-items: center;
    grid-template-areas:
      "grid grid"
      "note note"
      "consent info"
      "consent remember"
      "error error"
      "btn switch";
  }
  .auth-form #register-form > .form-grid { grid-area: grid; }
  .auth-form #register-form > .form-note { grid-area: note; }
  .auth-form #register-form > .consent-box { grid-area: consent; align-self: start; }
  .auth-form #register-form > .form-info-link { grid-area: info; align-self: end; margin: 0 0 6px; }
  .auth-form #register-form > .remember { grid-area: remember; align-self: start; margin: 6px 0 0; padding: 12px 14px; border-radius: 16px; background: #f4f7fd; }
  .auth-form #register-form > .error { grid-area: error; }
  .auth-form #register-form > .button.dark[type="submit"] { grid-area: btn; margin-top: 8px; justify-self: start; }
  .auth-form #register-form > .auth-switch { grid-area: switch; margin: 8px 0 0; text-align: left; align-self: center; }
}

/* ============ Вход и регистрация: один экран, футер в одну строку ============ */
/* футер: одна строка — логотип, ©, нормальные кнопки (вдвое выше прежнего) */
#app:has(.auth-layout) .public-footer.op-ending { margin: 12px auto 14px; }
#app:has(.auth-layout) .op-footer {
  display: flex; align-items: center; flex-wrap: nowrap; gap: 10px;
  padding: 12px 28px; min-height: 76px; border-radius: 28px;
}
#app:has(.auth-layout) .op-footer-main { display: contents; padding: 0; }
#app:has(.auth-layout) .op-footer-main > .op-nav,
#app:has(.auth-layout) .op-footer-main > .op-to-top,
#app:has(.auth-layout) .op-brand > p,
#app:has(.auth-layout) .op-brand > .op-watermark,
#app:has(.auth-layout) .op-connect,
#app:has(.auth-layout) .op-footer-legal > p:nth-child(2) { display: none; }
#app:has(.auth-layout) .op-brand { order: 1; flex: none; }
#app:has(.auth-layout) .op-brand .op-logo { height: 48px; width: auto; display: block; }
#app:has(.auth-layout) .op-footer-legal,
#app:has(.auth-layout) .op-footer-utility { display: contents; }
#app:has(.auth-layout) .public-footer.op-ending .op-footer-legal > p:first-child { order: 2; margin: 0 auto 0 22px; font-size: 13px; color: var(--op-muted, #7c8da0); }
#app:has(.auth-layout) .op-footer-legal > a { order: 3; }
#app:has(.auth-layout) .op-utility-links { order: 4; display: flex; align-items: center; gap: 10px; }
#app:has(.auth-layout) .op-footer-legal > a,
#app:has(.auth-layout) .op-utility-links > a,
#app:has(.auth-layout) .op-utility-links > button {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; margin: 0; border: 1px solid #dfe6ef; border-radius: 999px;
  background: #fff; color: #182b34; font: inherit; font-size: 13px; white-space: nowrap; cursor: pointer;
  transition: background-color .3s, color .3s, border-color .3s, transform .3s;
}
#app:has(.auth-layout) .op-utility-links > button { padding-right: 20px; }
@media (max-width: 760px) {
  #app:has(.auth-layout) .op-footer { flex-wrap: wrap; padding: 14px 18px; }
  #app:has(.auth-layout) .public-footer.op-ending .op-footer-legal > p:first-child { margin-left: 0; }
}

/* экран ноутбука/ПК: страница ровно во весь экран, без прокрутки */
@media (min-width: 981px) and (min-height: 560px) {
  #app:has(.auth-layout) { min-height: 100dvh; display: flex; flex-direction: column; }
  #app:has(.auth-layout) .public-header { flex: none; height: min(112px, 11vh); min-height: 64px; padding: 0; }
  #app:has(.auth-layout) .public-main { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  #app:has(.auth-layout) .auth-layout { flex: 1 1 auto; min-height: 0; padding-top: 0; grid-template-rows: minmax(0, 1fr); }
  #app:has(.auth-layout) .auth-photo { min-height: 0; }
  #app:has(.auth-layout) .auth-form { min-height: 0; overflow: auto; padding: clamp(14px, 3vh, 28px) clamp(22px, 3vw, 40px); }
  #app:has(.auth-layout) .auth-form h1 { font-size: clamp(26px, 4.9vh, 38px); margin-top: clamp(8px, 2vh, 18px); }
  #app:has(.auth-layout) .auth-form .form-intro { margin-bottom: clamp(8px, 1.9vh, 18px); }
  #app:has(.auth-layout) .auth-form .form-grid { gap: clamp(6px, 1.3vh, 12px) 14px; }
  #app:has(.auth-layout) .auth-form .form-grid .field input,
  #app:has(.auth-layout) .auth-form .form-grid .field select { padding-top: clamp(6px, 1.2vh, 11px); padding-bottom: clamp(6px, 1.2vh, 11px); }
  #app:has(.auth-layout) .auth-form .consent-box .consent { padding-block: clamp(1px, .5vh, 4px); }
  #app:has(.auth-layout) .auth-form .form-note { margin: clamp(4px, 1vh, 8px) 0 !important; }
  #app:has(.auth-layout) .auth-photo h2 { font-size: clamp(34px, 6.4vh, 57px); }
}

/* невысокие экраны: ужимаем регистрацию, чтобы она осталась в одном экране */
@media (min-width: 981px) and (min-height: 560px) {
  #app:has(.auth-layout) .public-header .logo,
  #app:has(.auth-layout) .public-header .logo img,
  #app:has(.auth-layout) .public-header > a img { height: min(70px, calc(11vh - 14px)); min-height: 44px; width: auto; }
  #app:has(.auth-layout) .auth-form .consent-box { padding-block: 0; }
  #app:has(.auth-layout) .auth-form .consent { min-height: 0; line-height: 1.3; }
}
@media (min-width: 981px) and (max-height: 920px) {
  #app:has(.auth-layout) .auth-form .consent { padding-block: 2px; }
  #app:has(.auth-layout) .auth-form #register-form > .remember { padding: 8px 12px; }
  #app:has(.auth-layout) .auth-form .form-grid .field { gap: 0; }
  #app:has(.auth-layout) .auth-form label.field { line-height: 1.25; }
  #app:has(.auth-layout) .auth-form .button.dark { padding-block: 10px; min-height: 42px; }
  #app:has(.auth-layout) .auth-form .form-note { font-size: 11px; }
}
@media (min-width: 981px) and (max-height: 780px) {
  #app:has(.auth-layout) .auth-form > .eyebrow { display: none; }
  #app:has(.auth-layout) .auth-form .form-intro { margin-top: 2px; }
  #app:has(.auth-layout) .auth-form #register-form > .form-note { display: none; }
  #app:has(.auth-layout) .auth-form h1 { margin-top: 0; }
}
@media (min-width: 981px) and (max-height: 700px) {
  #app:has(.auth-layout) .auth-form .form-intro { display: none; }
  #app:has(.auth-layout) .auth-form .form-grid { gap: 4px 14px; }
  #app:has(.auth-layout) .auth-form .form-grid .field input,
  #app:has(.auth-layout) .auth-form .form-grid .field select { padding-top: 5px; padding-bottom: 5px; }
  #app:has(.auth-layout) .auth-form { padding-block: 12px; }
}
@media (min-width: 981px) and (max-height: 780px) {
  #app:has(.auth-layout) .auth-form { padding-block: 14px; }
  #app:has(.auth-layout) .auth-form .form-grid { gap: 6px 14px; }
}
@media (min-width: 981px) and (max-height: 920px) {
  #app:has(.auth-layout) .auth-form { padding-block: 16px; }
  #app:has(.auth-layout) .auth-form .form-grid { gap: 7px 14px; }
  #app:has(.auth-layout) .auth-form #register-form > .form-note { display: none; }
}

/* высокие экраны: содержимое карточки растёт вместе с высотой и прижато к верху — без пустоты сверху и снизу */
@media (min-width: 981px) and (min-height: 921px) {
  #app:has(.auth-layout) .auth-form { justify-content: flex-start; padding: clamp(28px, 6.5vh, 76px) clamp(28px, 3.4vw, 56px) clamp(24px, 4vh, 44px); }
  #app:has(.auth-layout) .auth-form h1 { font-size: clamp(38px, 5.2vh, 58px); letter-spacing: -0.045em; margin-top: clamp(14px, 2.6vh, 30px); }
  #app:has(.auth-layout) .auth-form .form-intro { font-size: clamp(13px, 1.5vh, 17px); margin-bottom: clamp(18px, 3.4vh, 38px); }
  #app:has(.auth-layout) .auth-form > .eyebrow { font-size: clamp(10px, 1.2vh, 13px); }
  #app:has(.auth-layout) .auth-form label.field,
  #app:has(.auth-layout) .auth-form .field { font-size: clamp(12px, 1.5vh, 15px); }
  #app:has(.auth-layout) .auth-form .field input,
  #app:has(.auth-layout) .auth-form .field select { font-size: clamp(13px, 1.65vh, 17px); padding-top: clamp(12px, 1.9vh, 18px); padding-bottom: clamp(12px, 1.9vh, 18px); }
  #app:has(.auth-layout) .auth-form .form-grid { gap: clamp(12px, 2vh, 22px) 18px; }
  #app:has(.auth-layout) .auth-form .consent, #app:has(.auth-layout) .auth-form .remember { font-size: clamp(12px, 1.4vh, 15px); }
  #app:has(.auth-layout) .auth-form .consent { padding-block: clamp(4px, .8vh, 9px); }
  #app:has(.auth-layout) .auth-form .button.dark { min-height: clamp(48px, 5.2vh, 60px); font-size: clamp(13px, 1.55vh, 16px); }
  #app:has(.auth-layout) .auth-photo h2 { font-size: clamp(44px, 5.8vh, 72px); }
  #app:has(.auth-layout) .auth-photo > div { bottom: clamp(40px, 6vh, 72px); left: clamp(40px, 3.4vw, 60px); }
}
/* вход: «Ещё нет профиля?» уходит к нижнему краю карточки */
@media (min-width: 981px) and (min-height: 560px) {
  #app:has(.auth-layout) .auth-form #login-form { flex: 1 1 auto; display: flex; flex-direction: column; align-items: stretch; }
  #app:has(.auth-layout) .auth-form #login-form > .auth-switch { margin-top: auto; padding-top: 16px; text-align: left; }
  #app:has(.auth-layout) .auth-form #login-form > .button.dark { align-self: flex-start; }
}

/* регистрация на высоких экранах: полей больше, поэтому масштаб мягче, чтобы всё влезало вместе с футером */
@media (min-width: 981px) and (min-height: 921px) {
  #app:has(.auth-layout) .auth-form:has(#register-form) { padding-top: clamp(16px, 2.6vh, 34px); padding-bottom: clamp(14px, 2.2vh, 28px); }
  #app:has(.auth-layout) .auth-form:has(#register-form) h1 { font-size: clamp(34px, 4.3vh, 50px); margin-top: clamp(8px, 1.6vh, 18px); }
  #app:has(.auth-layout) .auth-form:has(#register-form) .form-intro { margin-bottom: clamp(10px, 1.9vh, 22px); }
  #app:has(.auth-layout) .auth-form:has(#register-form) .form-grid { gap: clamp(8px, 1.4vh, 16px) 18px; }
  #app:has(.auth-layout) .auth-form:has(#register-form) .field input,
  #app:has(.auth-layout) .auth-form:has(#register-form) .field select { padding-top: clamp(9px, 1.35vh, 14px); padding-bottom: clamp(9px, 1.35vh, 14px); }
  #app:has(.auth-layout) .auth-form:has(#register-form) .consent { padding-block: 3px; }
  #app:has(.auth-layout) .auth-form:has(#register-form) .form-note { display: none; }
}

/* ноутбучные высоты: футер чуть компактнее, но всё равно с логотипом и кнопками */
@media (min-width: 981px) and (max-height: 860px) {
  #app:has(.auth-layout) .public-footer.op-ending { margin: 8px auto 8px; }
  #app:has(.auth-layout) .op-footer { min-height: 60px; padding: 8px 24px; border-radius: 24px; }
  #app:has(.auth-layout) .op-brand .op-logo { height: 38px; }
  #app:has(.auth-layout) .op-footer-legal > a,
  #app:has(.auth-layout) .op-utility-links > a,
  #app:has(.auth-layout) .op-utility-links > button { padding: 7px 16px; font-size: 12px; }
}
@media (min-width: 981px) and (max-height: 700px) {
  #app:has(.auth-layout) .op-footer { min-height: 52px; padding: 6px 22px; }
  #app:has(.auth-layout) .op-brand .op-logo { height: 32px; }
}

/* совсем невысокие окна (до 780 px): шапка и форма чуть плотнее */
@media (min-width: 981px) and (max-height: 780px) {
  #app:has(.auth-layout) .public-header { height: max(58px, 9vh); min-height: 58px; }
  #app:has(.auth-layout) .public-header .logo,
  #app:has(.auth-layout) .public-header .logo img,
  #app:has(.auth-layout) .public-header > a img { height: 44px; min-height: 0; }
  #app:has(.auth-layout) .auth-form { padding-block: 10px; }
  #app:has(.auth-layout) .auth-form h1 { font-size: 26px; }
  #app:has(.auth-layout) .auth-form .consent { padding-block: 1px; }
  #app:has(.auth-layout) .auth-form .form-grid { gap: 5px 14px; }
}

/* кнопки футера: та же анимация, что у «Войти» в шапке — синий круг вливается слева, текст светлеет */
#app:has(.auth-layout) .op-footer-legal > a,
#app:has(.auth-layout) .op-utility-links > a,
#app:has(.auth-layout) .op-utility-links > button {
  position: relative; overflow: hidden; isolation: isolate; z-index: 1;
  box-shadow: 0 10px 24px -14px #2a4a6a55;
  transition: color .5s ease .1s, border-color .5s ease, box-shadow .4s cubic-bezier(.22, .72, .2, 1);
}
#app:has(.auth-layout) .op-footer-legal > a::before,
#app:has(.auth-layout) .op-utility-links > a::before,
#app:has(.auth-layout) .op-utility-links > button::before {
  content: ''; position: absolute; z-index: -1; width: 100%; aspect-ratio: 1; left: -100%; top: 50%; translate: 0 -50%;
  border-radius: 50%; background: #4261ee; transition: all .7s ease;
}
#app:has(.auth-layout) .op-footer-legal > a svg { transition: rotate .3s linear; }
@media (hover: hover) {
  #app:has(.auth-layout) .op-footer-legal > a:hover,
  #app:has(.auth-layout) .op-utility-links > a:hover,
  #app:has(.auth-layout) .op-utility-links > button:hover { background: #fff; color: #fff; border-color: #4261ee; box-shadow: 0 14px 26px -8px #4261ee40; transform: none; }
  #app:has(.auth-layout) .op-footer-legal > a:hover::before,
  #app:has(.auth-layout) .op-utility-links > a:hover::before,
  #app:has(.auth-layout) .op-utility-links > button:hover::before { left: 0; scale: 1.5; }
  #app:has(.auth-layout) .op-footer-legal > a:hover svg { rotate: 45deg; }
}
#app:has(.auth-layout) .op-footer-legal > a,
#app:has(.auth-layout) .op-utility-links > a,
#app:has(.auth-layout) .op-utility-links > button { text-decoration: none; }

/* страница мероприятия: видео и галерея из админки */
.event-video { margin: 28px 0; }
.event-video video, .event-video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 22px; background: #0d1b24; }
.media-pair.event-gallery { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.media-pair.event-gallery.g1 { grid-template-columns: 1fr; }
.media-pair.event-gallery.g3 > img:first-child { grid-column: 1 / -1; }
.media-pair.event-gallery img { width: 100%; height: 230px; object-fit: cover; border-radius: 20px; }
.media-pair.event-gallery.g1 img { height: 360px; }
.review-card > small.muted { display: block; margin-top: 10px; }

/* помощь: мои обращения и ответ команды */
.help-item { display: block; }
.help-item small { color: var(--muted, #607581); }
.help-reply { margin-top: 10px; padding: 10px 12px; border-radius: 14px; background: #eaf6f2; color: #1f5a47; }

/* помощь: мои обращения и ответ команды */
.help-item { display: block; }
.help-item small { color: var(--muted, #607581); }
.help-reply { margin-top: 10px; padding: 10px 12px; border-radius: 14px; background: #eaf6f2; color: #1f5a47; }