/* ==========================================================================
   МагИИ — /event (вебинар «Знакомьтесь, Ваш новый коллега — МагИИ»)
   Подключается поверх style.css. Правила проекта те же:
   никаких свечений и серых рамок — только flat-заливки и чистые переходы;
   фоны секций — только --bg и --bg-blue.
   ========================================================================== */

/* ---------- hero: текст сверху, снизу — руки ---------- */

.hero--event {
  flex-direction: column;
  justify-content: flex-start;
  padding: 120px 0 0;
  /* глубокий синий сверху уходит в чёрный — шов с программой не виден */
  background: linear-gradient(180deg, var(--bg-blue) 0%, var(--bg-blue) 35%, var(--bg) 100%);
}

.event-hero__text {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
/* заголовок всегда в одну строку: кегль считается от ширины экрана
   (строка с логотипом ≈ 21.7em, берём с запасом) и ограничен сверху.
   .hero-префикс — чтобы перебить .hero h1 из style.css */
.hero .event-hero__title {
  white-space: nowrap;
  font-size: min(3.3rem, calc((100vw - 48px) / 22.3));
  line-height: 1.15;
}
/* логотип вместо слова «МагИИ» — крупнее текста. У PNG прозрачные поля
   ~9% сверху и снизу, поэтому картинка опущена на величину нижнего поля —
   буквы логотипа стоят на базовой линии текста */
.event-hero__logo {
  display: inline-block;
  height: 1.15em;
  width: auto;
  vertical-align: -0.105em;
}

/* дата и время — плашка-чип */
.event-hero__date {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--surface);
  font-size: 15px;
  font-weight: 500;
}
.event-hero__date svg { width: 17px; height: 17px; flex: none; color: var(--accent); }

.event-hero__cta { justify-content: center; margin-top: 30px; }

.event-hero__title { animation: heroIn 0.7s var(--ease-out) 0.1s both; }
.event-hero__date  { animation: heroIn 0.7s var(--ease-out) 0.32s both; }

/* картинка во всю ширину; края растворяются в фоне маской —
   без резкой границы фотографии */
.event-hero__visual {
  position: relative;
  z-index: 1;
  width: 100%;
  margin-top: -10px;
  animation: heroIn 0.9s var(--ease-out) 0.5s both;
}
.event-hero__visual picture img {
  display: block;
  width: 100%;
  height: clamp(300px, 44vw, 640px);
  object-fit: cover;
  object-position: 50% 52%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 24%, #000 72%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 24%, #000 72%, transparent 100%);
}

/* ---------- программа ---------- */

.agenda {
  max-width: 980px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: none;
}
/* номер пункта — белый, вплотную к тексту */
.agenda__item {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  column-gap: 12px;
  background: var(--surface);
  border-radius: 16px;
  padding: 22px 28px;
}
.agenda__num {
  color: var(--text);
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 600;
}
.agenda__item h3 { font-size: 1.15rem; font-weight: 600; }

/* демонстрация: сценарии один под другим, каждый сворачивается
   (details, как ЧаВо на главной) */
/* карточки выдвинуты наружу на свой внутренний отступ — текст сценария
   начинается ровно по левому краю номера пункта */
.scenarios {
  --scn-pad: 16px;
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px calc(-1 * var(--scn-pad)) 0;
}
.scenario {
  background: var(--bg-2);
  border-radius: 14px;
  overflow: hidden;
}
.scenario summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px var(--scn-pad);
}
.scenario summary::-webkit-details-marker { display: none; }
.scenario summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 14px; }
.scenario summary:hover .scenario__title { color: var(--accent); }
.scenario__chevron {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--text-2);
  transition: transform 0.25s ease, color 0.2s ease;
}
.scenario summary:hover .scenario__chevron { color: var(--text); }
.scenario[open] .scenario__chevron { transform: rotate(180deg); }
.scenario__head { display: flex; flex-direction: column; gap: 4px; }
.scenario__label {
  color: var(--accent);
  font-family: var(--font-heading);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.scenario__title {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  transition: color 0.2s ease;
}

.scn-steps { display: flex; flex-direction: column; gap: 6px; list-style: none; padding: 0 var(--scn-pad) 16px; }
.scn-steps > li {
  display: grid;
  grid-template-columns: 6px 1fr;
  gap: 14px;
  align-items: start;
  font-size: 14px;
  line-height: 1.45;
}
/* шаг — белая точка */
.scn-steps__n {
  width: 6px;
  height: 6px;
  margin-top: 0.54em;
  border-radius: 50%;
  background: var(--text);
}
.scn-steps__sub {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 3px;
  list-style: none;
  color: var(--text-2);
}
/* подпункты под «МагИИ:» — точки цвета текста подпункта */
.scn-steps__sub li { position: relative; padding-left: 16px; }
.scn-steps__sub li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 0.56em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

/* ---------- регистрация ---------- */

.register__date { margin-top: 0; animation: none; }

.event-form .field { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.field__error { color: #F26D6D; font-size: 12.5px; margin: 6px 0 0 2px; }
.event-form [aria-invalid="true"] { border-color: #F26D6D !important; }

/* телефон: код страны + номер */
.phone-input { display: flex; gap: 8px; }
.phone-input select {
  flex: none;
  width: 118px;
  appearance: none;
  -webkit-appearance: none;
  background: var(--bg-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238E939C' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  padding: 13px 30px 13px 14px;
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.phone-input select:focus { outline: none; border-color: var(--accent); }
.phone-input select option { background: var(--bg-2); color: var(--text); }
.phone-input input { flex: 1; min-width: 0; }

/* согласие — всегда одной строкой: текст ≈ 23.9em, на узких экранах
   кегль уменьшается под ширину формы (127px — поля контейнера и формы + чекбокс) */
.event-form .lead-form__consent { align-items: center; cursor: pointer; white-space: nowrap; font-size: min(13px, calc((100vw - 127px) / 24.5)); }
.event-form .lead-form__consent a { color: var(--accent); }
.event-form .lead-form__consent a:hover { text-decoration: underline; }
.event-form .lead-form__consent input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* отправка: кнопка неактивна, слева крутится индикатор */
.lead-form__submit:disabled { cursor: progress; opacity: 0.85; transform: none; }
.lead-form__submit.is-loading::before {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* успех: вместо полей — одно сообщение */
.event-form__done {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 36px 12px;
  color: var(--text);
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.45;
  outline: none;
}
.event-form__done::before {
  content: "";
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--success) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat center;
}

/* ---------- адаптив ---------- */

@media (max-width: 880px) {
  .hero--event { min-height: 0; padding-top: 104px; }
  .event-hero__visual picture img { height: auto; aspect-ratio: 4 / 3; }
}

@media (max-width: 640px) {
  /* кнопки hero — столбиком на всю ширину */
  .event-hero__cta { flex-direction: column; align-items: stretch; width: 100%; max-width: 380px; }
  .event-hero__cta .btn { width: 100%; }

  .agenda__item { padding: 18px 18px; }
  .agenda__item h3, .agenda__num { font-size: 1.02rem; }
  .agenda__item { column-gap: 10px; }
  .scenarios { --scn-pad: 12px; }
  .scenario summary { padding: 12px var(--scn-pad); }
  .scn-steps { padding: 0 var(--scn-pad) 14px; }
}