/* =========================================
   Events List — Страница списка мероприятий
   Карточка: макет Figma month_event / event-area / event-item
   Токены поверхностей и текста: variables.css → --paper-compact-*,
   полоса эпика → --epic-strip-* (см. комментарий в :root).
   ========================================= */

/* ===================================
   Сетка месяца (/events) — gap 10px как event-grid в Figma
   =================================== */

.catalog-main .gc-events-index-grid {
    gap: var(--spacing-mdl);
}

/* ===================================
   Ячейка: опциональная строка эпика + карточка мероприятия
   =================================== */

.gc-event-card-cell {
    isolation: isolate;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    min-width: 0;
    height: 100%;
}

.gc-event-card-cell .gc-event-card-surface {
    flex: 1 1 auto;
    min-height: 0;
    /* Скругление как в Figma event-item (12px), контент не ломает углы */
    border-radius: var(--radius-lg);
    overflow: hidden;
}

/* Поверхности и бордер карточки — токены Figma month_event (светлая плитка / тёмный вариант) */
.catalog-main .gc-event-card.gc-event-card-surface {
    background: var(--paper-compact-bg);
    border-color: var(--paper-compact-border);
}

/* Без transition: all от .gc-card-interactive — только фон и бордер, лёгкий hover из токенов */
.catalog-main a.gc-event-card.gc-event-card-surface.gc-card-interactive {
    transition:
        background-color var(--transition-fast) var(--ease-in-out),
        border-color var(--transition-fast) var(--ease-in-out);
}

.catalog-main a.gc-event-card.gc-event-card-surface.gc-card:hover:not(.gc-card-activity-event),
.catalog-main a.gc-event-card.gc-event-card-surface.gc-card:focus-visible:not(.gc-card-activity-event) {
    background: var(--paper-compact-bg-hover);
    border-color: var(--paper-compact-border-hover);
}

/*
 * Figma event-area: itemSpacing −20 между epic-area и event-item —
 * карточка заезжает на эпик, нижняя часть эпика визуально «из-под» белой плитки.
 */
.gc-event-card-cell--epic .gc-event-card-epic-row {
    position: relative;
    z-index: 0;
    padding: 0;
}

.gc-event-card-cell--epic .gc-event-card-surface {
    position: relative;
    z-index: 1;
    margin-top: calc(-1 * (var(--spacing-md) + var(--spacing-xs)));
}

/* Строка эпика: на всю ширину ячейки, боковые inset чуть шире подписи */
.gc-event-card-epic-row {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    padding: 0 var(--spacing-md);
}

/* Ширина колонки, скругления только сверху 12px; снизу lg под перекрытие карточкой */
.gc-event-card-epic-pill {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-xs);
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-lg) var(--spacing-sm);
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    background: var(--epic-strip-bg);
    color: var(--epic-strip-text);
    text-decoration: none;
    font-size: var(--font-size-caption);
    font-weight: 500;
    line-height: var(--line-height-list-description);
    transition: background-color var(--transition-fast) var(--ease-in-out);
}

.gc-event-card-epic-pill:hover {
    background: var(--epic-strip-bg-hover);
    color: var(--epic-strip-text);
}

.gc-event-card-epic-pill:focus-visible {
    outline: 2px solid var(--accent-link);
    outline-offset: 2px;
}

.gc-event-card-epic-pill:active {
    background: var(--epic-strip-bg-active);
}

/* Левая группа: иконка + подпись «Эпик» */
.gc-event-card-epic-lead {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-sm);
    flex-shrink: 0;
}

.gc-event-card-epic-icon {
    font-size: var(--font-size-xl);
    line-height: 1;
    flex-shrink: 0;
}

.gc-event-card-epic-label {
    flex-shrink: 0;
}

.gc-event-card-epic-name {
    min-width: 0;
}

.gc-event-card-epic-caret {
    flex-shrink: 0;
    font-size: var(--font-size-md);
    line-height: 1;
    opacity: 0.9;
}

/* ===================================
   Карточка мероприятия (gc-event-card + gc-card)
   =================================== */

.gc-event-card {
    display: flex;
    flex-direction: column;
}

/* На адаптиве — карточки у края экрана без боковых линий (edge-to-edge как gc-panel в styles.css) */
@media (max-width: 991.98px) {
    .catalog-main .gc-event-card.gc-event-card-surface {
        /* border-left: none;
        border-right: none; */
    }
}

/* Тело: Figma event-item padding 10, itemSpacing 10 → токен --paper-compact-padding */
.catalog-main .gc-event-card.gc-event-card-surface .gc-card-body {
    --gc-content-bleed: var(--paper-compact-padding);
    padding: var(--paper-compact-padding);
    gap: var(--paper-compact-padding);
    flex: 1;
}

/* Блок с датой и названием */
.gc-event-card-header {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4xs);
    flex: 1;
    min-width: 0;
}

/* Дата/время — 14px Medium, lh 24px (Figma Variable 144:810 → --paper-compact-text) */
.catalog-main .gc-event-card-date {
    margin: 0;
    font-size: var(--font-size-sm);
    font-weight: 500;
    line-height: calc(24 / 14);
    color: var(--paper-compact-text);
}

/* Название — 14px Regular (Figma 144:812 → --paper-compact-text-muted) */
.catalog-main .gc-event-card-title {
    margin: 0;
    font-size: var(--font-size-sm);
    font-weight: 400;
    line-height: calc(24 / 14);
    color: var(--paper-compact-text-muted);
}

/* Строка участников — gap как itemSpacing карточки (Figma 10) */
.catalog-main .gc-event-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--paper-compact-padding);
    min-width: 0;
}

.gc-event-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-2sm);
    min-width: 0;
}

/*
 * Футер карточки каталога: текст «Заявка подана» — компактный secondary;
 * число заявок — проектный .gc-badge-counter (badges.css: pill, tabular-nums, овал даже для одной цифры).
 */
.catalog-main .gc-event-card-footer-badge.gc-badge:not(.gc-badge-counter) {
    flex-shrink: 0;
    padding: var(--spacing-4xs) var(--spacing-xs);
    font-size: var(--font-size-caption);
    font-weight: 500;
    line-height: 1.2;
    border-radius: var(--radius-md);
    white-space: nowrap;
}

.catalog-main .gc-event-card-footer-badge.gc-badge-counter {
    flex-shrink: 0;
}

/* ===================================
   Превью участников
   =================================== */

.gc-event-participants {
    display: flex;
    align-items: center;
    gap: var(--spacing-2sm);
    flex: 1 1 auto;
    min-width: 0;
}

.catalog-main .gc-event-participants {
    gap: var(--paper-compact-padding);
}

.catalog-main .gc-event-participants-count {
    font-size: var(--font-size-sm);
    color: var(--paper-compact-text-muted);
    white-space: nowrap;
}

/* Заглушка-аватар внутри карточки */
.gc-event-card .gc-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    background: var(--ui-surface-1);
    border: 1px solid var(--ui-border);
    color: var(--font-secondary);
    font-size: var(--font-size-xs);
    font-weight: 600;
    line-height: 1;
}

/* ===================================
   Секция месяца
   =================================== */

.events-index-months {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-mdl);
}

.events-index-sentinel {
    height: 1px;
}

.gc-month-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.gc-month-toggle-wrap {
    margin: 0;
}

@media (max-width: 991.98px) {
    .gc-month-toggle-wrap {
        padding-left: var(--spacing-sm);
        padding-right: var(--spacing-sm);
    }
}

.gc-month-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    background: var(--bg-content-main);
    border: 1px solid var(--ui-border);
    border-radius: var(--radius-full);
    padding: var(--spacing-sm) var(--spacing-sm);
    cursor: pointer;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--font-primary);
    transition: background var(--transition-fast), color var(--transition-fast);
    line-height: 1;
}

.gc-month-toggle:hover {
    background: var(--bg-content-secondary);
    color: var(--font-primary);
}

.gc-month-icon {
    font-size: var(--font-size-xs);
    color: var(--font-secondary);
    transition: transform 0.25s ease;
}

.gc-month-section.collapsed .gc-month-icon {
    transform: rotate(180deg);
}

.gc-month-section.collapsed .gc-month-content {
    display: none;
}