/**
 * Архив прошедших мероприятий — /event-list/archive/ и страница завершённого события.
 * Дополняет event-list.css / event.css. Палитра — из colors.css.
 * ТЗ PMD, май 2026 (см. docs/archive-page-texts.md).
 */

/* ---------- Разводящая страница: первый экран ---------- */

.event-archive-page .archive-intro {
    max-width: 760px;
    margin-top: 10px;
    color: var(--color-text-plashka);
}

.archive-header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
    /* .header-event-list-content — flex-колонка с order: h1=1, интро=2.
       Ставим кнопки после интро (иначе order:0 поднимает их над заголовком). */
    order: 3;
}

/* ---------- Карточка завершённого мероприятия ---------- */

/* Плашка «Мероприятие завершено» — лента поверх верха изображения. */
.event-image .event-status-badge {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    display: block;
    padding: 8px 12px;
    text-align: center;
    background: var(--color-secondary);
    color: var(--color-text-white);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* Фраза вместо цены на карточке архива. */
.event-archive-hint {
    color: var(--color-text-plashka);
    line-height: 1.35;
}

/* ---------- Врезной CTA-блок (после 6–8 карточек) ---------- */

.archive-inline-cta {
    grid-column: 1 / -1;
    background: var(--color-bg-green-shield);
    border: 1px solid var(--color-border-light);
    border-radius: 16px;
    padding: 28px 32px;
    margin: 4px 0;
}

.archive-inline-cta__title {
    margin: 0 0 10px;
    color: var(--color-text-green);
}

.archive-inline-cta__text {
    margin: 0 0 18px;
    max-width: 820px;
    color: var(--color-text-plashka);
}

.archive-inline-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* ---------- Ссылка на архив после пагинации (на /event-list/) ---------- */

.event-list-archive-link {
    display: flex;
    justify-content: center;
    margin-top: 24px;
}

/* ---------- Блок перелинковки на актуальные (внизу архива) ---------- */

.archive-crosslink {
    padding: 48px 0 8px;
}

.archive-crosslink__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.archive-crosslink__header h2 {
    margin: 0;
}

.archive-crosslink__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* ---------- Страница завершённого мероприятия: плашка ---------- */

/* Бейдж «Завершенное мероприятие» в ряду тегов заголовка события. */
.event-badge.event-badge--archive {
    background: var(--color-secondary);
    color: var(--color-text-white);
}

.event-archive-banner {
    margin: 8px 0 4px;
}

.event-archive-banner__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding: 18px 24px;
    background: var(--color-bg-burgundy-shield);
    border: 1px solid var(--color-border-burgundy);
    border-radius: 14px;
}

.event-archive-banner__text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.event-archive-banner__title {
    color: var(--color-text-burgundy);
    font-size: 18px;
    font-weight: 700;
}

.event-archive-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* ---------- Страница завершённого: блок «Подобрать актуальное обучение» ---------- */

.event-archive-lead {
    padding: 40px 0;
}

.event-archive-lead__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: start;
}

.event-archive-lead__intro h2 {
    margin: 0 0 12px;
}

.event-archive-lead__intro p {
    margin: 0 0 18px;
    color: var(--color-text-plashka);
}

.similar-events-all-link {
    white-space: nowrap;
}

/* Центрированная ФОС «Остались вопросы?» (вместо блока «Регистрация», ТЗ п.6). */
.event-archive-cta {
    padding: 40px 0;
}

.event-archive-cta__inner {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
}

.event-archive-cta__title {
    margin: 0 0 24px;
}

.event-archive-cta__form {
    text-align: left;
    margin: 0 auto 20px;
}

.event-archive-cta__link {
    display: flex;
    width: 100%;
    justify-content: center;
}

/* Блок «Актуальные мероприятия по теме» — сразу после первого экрана (single-archive). */
.event-archive-actual {
    padding: 48px 0;
    margin: 24px 0;
}

.event-archive-actual .similar-events-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

@media (max-width: 992px) {
    .event-archive-actual .similar-events-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .event-archive-actual .similar-events-container {
        grid-template-columns: 1fr;
    }
}

/* ---------- Модалка ФОС на страницах архива: поля во всю ширину ---------- */
/* Глобально .dk-modal-form (min-width:768px) кладёт однострочные поля в 2 колонки
   (width: calc(50% - 6px)) — рекомендация подрядчика, чтобы попап влезал без
   прокрутки. На страницах архива по требованию — растягиваем на всю ширину.
   Селектор с 4 классами перебивает глобальный (3 класса) независимо от порядка. */
@media (min-width: 768px) {
    .dk-modal-form .dk-modal-form__form .wpcf7-form > .form-field {
        width: 100%;
    }
}

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

@media (max-width: 992px) {
    .archive-crosslink__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .event-archive-lead__inner {
        grid-template-columns: 1fr;
    }
    .event-archive-banner__inner {
        flex-direction: column;
        align-items: flex-start;
    }
    .archive-inline-cta {
        padding: 22px 18px;
    }
}

@media (max-width: 576px) {
    .archive-crosslink__grid {
        grid-template-columns: 1fr;
    }
    .archive-header-actions .btn,
    .archive-inline-cta__actions .btn,
    .event-archive-banner__actions .btn {
        width: 100%;
    }
}