/* ==========================================================================
   archive.css — оформление архивных страниц (в стиле оригинала на Тильде).
   Общие компоненты (шапка, hero, футер, партнёры, org-card) — из styles.css.
   ========================================================================== */

.archive-page { background: #eaeaea; overflow-x: clip; }
.archive-page .org-card img { max-width: 100%; }

/* ---------- Блоки-секции ---------- */
.arch-block { padding: 5.5rem 0; overflow-x: clip; }
.arch-block--gray { background: #eaeaea; }
.arch-block--light { background: #f4f4f4; }

/* ---------- Заголовок секции с розовой линией ---------- */
.arch-title {
  --tsize: clamp(2.5rem, 7vw, 6.25rem);
  position: relative;
  z-index: 0;
  display: inline-block;
  margin-bottom: 3rem;
}
.arch-h2 {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: 'TT Bluescreens Condensed', 'TT Bluescreens', sans-serif;
  font-weight: 500;
  font-size: var(--tsize);
  line-height: 0.85;
  letter-spacing: 0;
  text-transform: uppercase;
  color: #242424;
}
.arch-h2 .pink { color: #e16fc8; }
/* Розовая линия проходит СКВОЗЬ текст (за ним) и уходит далеко за края.
   Размер/позиция привязаны к кеглю (как в оригинале: ширина 27.2×,
   смещения −7.05× и −2.18× от кегля) — ложится одинаково у всех заголовков. */
.arch-title__line {
  position: absolute;
  z-index: 0;
  left: calc(var(--tsize) * -7.05);
  top: calc(var(--tsize) * -2.18);
  width: calc(var(--tsize) * 27.24);
  height: auto;
  pointer-events: none;
  overflow: visible;
}

.arch-sub {
  margin: -1.5rem 0 2.5rem;
  font-family: 'TT Bluescreens', serif;
  font-weight: 600;
  font-size: 1.25rem;
  color: #444;
}
.arch-note { font-family: 'TT Bluescreens', serif; color: #666; font-size: 1.1rem; }

/* ---------- ABOUT / INTRO (скруглённая карточка) ---------- */
.arch-intro { background: #eaeaea; padding: 4rem 0; }
.arch-intro__card {
  background: #f4f4f4;
  border-radius: 20px;
  padding: clamp(2rem, 5vw, 5rem);
}
.arch-intro__title {
  font-family: 'TT Bluescreens Condensed', 'TT Bluescreens', sans-serif;
  font-weight: 500;
  font-size: clamp(2.25rem, 8.5vw, 6.875rem);
  line-height: 0.8;
  color: #242424;
  max-width: 6.3em;
}
.arch-intro__title .pink { color: #e16fc8; }
.arch-intro__text {
  margin-left: auto;
  margin-top: 2.5rem;
  max-width: 28rem;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.55;
  color: #000;
}
.arch-intro__text p + p { margin-top: 1.1rem; }

/* ---------- ПРОГРАММА ФОРУМА (страницы программы) ---------- */
.arch-program {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
.arch-program__page {
  border-radius: 14px;
  overflow: hidden;
  background: #f4f4f4;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}
.arch-program__page img { width: 100%; height: auto; display: block; }
@media (max-width: 767px) {
  .arch-program { grid-template-columns: 1fr; }
}

/* ---------- «КАК ЭТО БЫЛО» + ВИДЕО (карточки как на сайте) ---------- */
.arch-card {
  background: #f4f4f4;
  border-radius: 20px;
  padding: clamp(1.5rem, 3.5vw, 3.5rem);
}
.arch-card .arch-title { margin-bottom: 2rem; }

/* Карусель «Как это было» (11 фото, стрелки + автосмена) */
.arch-carousel {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  background: #e4e4e4;
}
.arch-carousel__viewport { position: absolute; inset: 0; }
.arch-carousel__track { position: absolute; inset: 0; }
/* Слайды наложены друг на друга и плавно перетекают (crossfade) —
   поэтому нет «перемотки» при возврате к первому фото. */
.arch-carousel__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.arch-carousel__slide.active { opacity: 1; }
.arch-carousel__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.arch-carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  color: #242424;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.arch-carousel__arrow svg { width: 22px; height: 22px; }
.arch-carousel__arrow:hover { background: #e16fc8; color: #fff; }
.arch-carousel__arrow--prev { left: 1rem; }
.arch-carousel__arrow--next { right: 1rem; }
.arch-carousel__dots {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  gap: 0.5rem;
}
.arch-carousel__dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.arch-carousel__dot.active { background: #e16fc8; transform: scale(1.25); }

/* Инлайн-видео (пользователь включает сам) */
.arch-media-frame {
  margin-top: 2.5rem;
  border-radius: 16px;
  overflow: hidden;
  background: #000;
  aspect-ratio: 16 / 9;
}
.arch-media-frame video,
.arch-media-frame iframe { width: 100%; height: 100%; display: block; border: 0; }
.arch-media-frame__hint {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  color: #888;
  background: #e4e4e4;
  border: 2px dashed #bdbdbd;
  border-radius: 16px;
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
}
.arch-media-frame__hint svg { width: 44px; height: 44px; }

/* Кнопки-пилюли по центру («все фото», «интервью») */
.arch-card__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-top: 2rem;
}
.arch-allphotos {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.6rem;
  border-radius: 9999px;
  border: 2px solid #242424;
  background: transparent;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  color: #242424;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.arch-allphotos svg { width: 18px; height: 18px; }
.arch-allphotos:hover { background: #e16fc8; color: #fff; border-color: #e16fc8; transform: scale(1.04); }

/* Видео-модалка */
.video-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: rgba(0, 0, 0, 0.85);
}
.video-modal.active { display: flex; }
.video-modal__inner {
  width: min(1100px, 100%);
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
}
.video-modal__inner video,
.video-modal__inner iframe { width: 100%; height: 100%; display: block; border: 0; }
.video-modal__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  color: #888;
  font-family: 'Inter', sans-serif;
}
.video-modal__placeholder svg { width: 54px; height: 54px; }
.video-modal__close {
  position: absolute;
  top: 1.25rem;
  right: 1.5rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease;
}
.video-modal__close:hover { background: #e16fc8; }

/* ---------- ОРГАНИЗАТОРЫ ФОРУМА (персоны) ---------- */
.arch-org-people { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3rem; }
/* Вертикальная карточка: фото сверху (на светлой подложке), имя, регалии */
.arch-org-person { display: block; max-width: 380px; }
.arch-org-person__photo { width: 100%; aspect-ratio: 300 / 340; border-radius: 16px; overflow: hidden; background: #efefef; margin-bottom: 1.75rem; }
.arch-org-person__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.arch-org-person__info h3 { font-family: 'TT Bluescreens Condensed', 'TT Bluescreens', sans-serif; font-weight: 500; font-size: clamp(2.5rem, 4.7vw, 3.75rem); color: #212121; margin-bottom: 1rem; }
.arch-org-person__info h3 .surname { color: #e16fc8; }
.arch-org-person__info ul { display: flex; flex-direction: column; gap: 0.4rem; }
.arch-org-person__info li { display: flex; gap: 0.5rem; font-family: 'Inter', sans-serif; font-weight: 500; font-size: 0.95rem; line-height: 1.5; color: #212121; }
.arch-org-person__info .dash { color: #e16fc8; }

/* ---------- ХЕДЛАЙНЕРЫ ---------- */
.headliners-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem 2.5rem; margin-top: 5.5rem; align-items: start; }
/* Карточки неактивные: без фона, тени и ховера */
.headliner-card { }
/* Фото-портрет выровнен по низу светлой подложки и слегка выходит за верх */
.headliner-card__photo {
  position: relative;
  aspect-ratio: 360 / 319;
  border-radius: 16px;
  background: #efefef;
  margin-bottom: 1.5rem;
}
.headliner-card__photo img {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 84%;
  height: 126%;
  object-fit: cover;
  object-position: center 12%;
  display: block;
}
.headliner-card h3 { font-family: 'TT Bluescreens Condensed', 'TT Bluescreens', sans-serif; font-weight: 500; font-size: clamp(2rem, 4.7vw, 3.75rem); line-height: 0.95; color: #212121; margin-bottom: 0.85rem; }
.headliner-card h3 .surname { color: #e16fc8; }
.headliner-card ul { display: flex; flex-direction: column; gap: 0.4rem; }
.headliner-card li { display: flex; gap: 0.5rem; font-family: 'Inter', sans-serif; font-weight: 500; font-size: 0.875rem; line-height: 1.5; color: #333; }
.headliner-card .dash { color: #e16fc8; }

/* ---------- СПИКЕРЫ ---------- */
.arch-speakers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3rem 4rem; }
.arch-speaker { display: flex; gap: 1.75rem; align-items: flex-start; }
.arch-speaker__photo { flex: 0 0 auto; width: 140px; height: 140px; border-radius: 50%; overflow: hidden; background: #e3e3e3; }
.arch-speaker__photo img { width: 100%; height: 100%; object-fit: cover; }
.arch-speaker__info { padding-top: 0.4rem; }
.arch-speaker__info h3 { font-family: 'TT Bluescreens Condensed', 'TT Bluescreens', sans-serif; font-weight: 500; font-size: clamp(2rem, 3.8vw, 3rem); color: #000; margin-bottom: 0.7rem; }
.arch-speaker__info h3 .surname { color: #e16fc8; }
.arch-speaker__info ul { display: flex; flex-direction: column; gap: 0.35rem; }
.arch-speaker__info li { display: flex; gap: 0.5rem; font-family: 'Inter', sans-serif; font-weight: 500; font-size: 1rem; line-height: 1.5; color: #000; }
.arch-speaker__info .dash { color: #e16fc8; }

/* ---------- ЗАКРЫВАЮЩИЙ БЛОК ---------- */
.arch-closing { background: #242424; color: #fff; text-align: center; padding: 6rem 0; }
.arch-closing__year { display: inline-block; font-family: 'TT Bluescreens', serif; letter-spacing: 0.2em; color: #e16fc8; margin-bottom: 1.5rem; }
.arch-closing__title { font-family: 'TT Bluescreens', serif; font-weight: 500; font-size: clamp(2rem, 4.5vw, 3.75rem); line-height: 1.05; max-width: 22ch; margin: 0 auto 1.75rem; }
.arch-closing__dates { font-family: 'TT Bluescreens', serif; font-size: clamp(1.25rem, 3vw, 2rem); letter-spacing: 0.06em; color: #e16fc8; }

/* ---------- ПЛАНШЕТ / МОБИЛЬНЫЙ ---------- */
@media (max-width: 1023px) {
  .headliners-grid { grid-template-columns: repeat(2, 1fr); }
  .arch-org-people { gap: 2rem; }
}
@media (max-width: 767px) {
  .arch-block, .arch-intro { padding: 3.5rem 0; }
  .arch-title { margin-bottom: 2rem; }
  .arch-intro__text { margin-top: 1.5rem; }
  .headliners-grid { grid-template-columns: 1fr; }
  .arch-speakers { grid-template-columns: 1fr; gap: 2rem; }
  .arch-speaker__photo { width: 100px; height: 100px; }
  .arch-org-people { grid-template-columns: 1fr; }
  .arch-org-person { max-width: 320px; }
  .arch-carousel__arrow { width: 38px; height: 38px; }
  .arch-carousel__arrow--prev { left: 0.5rem; }
  .arch-carousel__arrow--next { right: 0.5rem; }
}