/* ============================================================
   Component: Подача заявки (шаги) + авто-список документов
   Классы: .gk-apply (шаги), .gk-docs (список файлов)
   Применение: rabota/leaders.php — сначала скачать документы, затем подать заявку.
   Стили на дизайн-токенах --gk-*. Грузится из include/docs-list.php.
   ============================================================ */

.gk-apply {
    margin: var(--gk-space-15) 0;
}

/* Шапка блока */
.gk-apply__head {
    max-width: 760px;
    margin: 0 0 var(--gk-space-8);
}

.gk-apply__eyebrow {
    display: inline-block;
    padding: 6px 14px;
    margin-bottom: var(--gk-space-4);
    border-radius: var(--gk-radius-pill);
    background: rgba(24, 41, 104, 0.08);
    color: var(--gk-color-brand);
    font-size: var(--gk-font-size-eyebrow);
    font-weight: var(--gk-font-weight-bold);
    letter-spacing: var(--gk-letter-spacing-eyebrow);
    text-transform: uppercase;
}

.gk-apply__title {
    margin: 0 0 var(--gk-space-3);
    font-size: clamp(24px, 3vw, 34px);
    font-weight: var(--gk-font-weight-bold);
    line-height: 1.2;
    color: var(--gk-color-text-heading);
}

.gk-apply__lead {
    margin: 0;
    font-size: clamp(15px, 1.4vw, 18px);
    line-height: 1.55;
    color: var(--gk-color-text-body);
}

/* Шаги: вертикально, один под другим */
.gk-apply__steps {
    display: flex;
    flex-direction: column;
    gap: var(--gk-space-6);
}

.gk-apply__step {
    position: relative;
    display: flex;
    gap: var(--gk-space-6);
    padding: var(--gk-space-8);
    border-radius: var(--gk-radius-xl);
    background: var(--gk-color-surface);
    border: 1px solid var(--gk-color-border);
    box-shadow: var(--gk-shadow-card);
}

/* Номер шага */
.gk-apply__num {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--gk-color-brand);
    color: var(--gk-color-text-inverse);
    font-size: 22px;
    font-weight: var(--gk-font-weight-bold);
    line-height: 1;
}

.gk-apply__body {
    flex: 1;
    min-width: 0;
}

.gk-apply__step-title {
    margin: 4px 0 var(--gk-space-2);
    font-size: clamp(18px, 1.8vw, 22px);
    font-weight: var(--gk-font-weight-bold);
    color: var(--gk-color-text-heading);
}

.gk-apply__step-text {
    margin: 0 0 var(--gk-space-5);
    font-size: var(--gk-font-size-card-text);
    line-height: 1.55;
    color: var(--gk-color-text-body);
}

/* Шаг 2 — акцентная карточка с брендовым градиентом */
.gk-apply__step--accent {
    overflow: hidden;
    border: none;
    color: var(--gk-color-text-inverse);
    background:
        radial-gradient(ellipse at 90% 0%, rgba(167, 139, 250, 0.40) 0%, transparent 55%),
        radial-gradient(ellipse at 0% 100%, rgba(96, 165, 250, 0.40) 0%, transparent 55%),
        linear-gradient(135deg, #0f1a4f 0%, #182968 40%, #2e3a8c 100%);
    box-shadow: var(--gk-shadow-card-hover);
}

.gk-apply__step--accent .gk-apply__num {
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.30);
}

.gk-apply__step--accent .gk-apply__step-title {
    color: var(--gk-color-text-inverse);
}

.gk-apply__step--accent .gk-apply__step-text {
    color: rgba(255, 255, 255, 0.85);
}

/* Кнопка «Подать заявку» */
.gk-apply__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--gk-space-2);
    height: 56px;
    padding: 0 var(--gk-space-8);
    border-radius: var(--gk-radius-pill);
    background: var(--gk-color-surface);
    color: var(--gk-color-brand);
    font-size: 15px;
    font-weight: var(--gk-font-weight-bold);
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.25);
    transition: transform var(--gk-transition-default), box-shadow var(--gk-transition-default), gap var(--gk-transition-default);
}

.gk-apply__action:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.35);
    gap: var(--gk-space-3);
    color: var(--gk-color-brand);
}

.gk-apply__action svg {
    width: 18px;
    height: 18px;
    transition: transform var(--gk-transition-default);
}

.gk-apply__action:hover svg {
    transform: translateX(2px);
}

/* ============================================================
   Список документов (gk-docs) — рендерится из docs-list.php
   ============================================================ */
.gk-docs__title {
    margin: 0 0 var(--gk-space-4);
    font-size: var(--gk-font-size-card-title);
    font-weight: var(--gk-font-weight-semibold);
    color: var(--gk-color-text-heading);
}

.gk-docs {
    display: flex;
    flex-direction: column;
    gap: var(--gk-space-3);
}

.gk-docs__item {
    display: flex;
    align-items: center;
    gap: var(--gk-space-4);
    padding: var(--gk-space-4) var(--gk-space-5);
    border-radius: var(--gk-radius-md);
    background: var(--gk-color-surface-muted);
    border: 1px solid var(--gk-color-border);
    transition: background var(--gk-transition-default), box-shadow var(--gk-transition-default), transform var(--gk-transition-default);
}

.gk-docs__item:hover {
    background: var(--gk-color-surface);
    box-shadow: var(--gk-shadow-card);
    transform: translateY(-1px);
}

.gk-docs__icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--gk-radius-md);
    background: rgba(24, 41, 104, 0.08);
    color: var(--gk-color-brand);
}

.gk-docs__icon svg {
    width: 22px;
    height: 22px;
}

.gk-docs__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.gk-docs__name {
    font-size: var(--gk-font-size-card-text);
    font-weight: var(--gk-font-weight-medium);
    line-height: 1.35;
    color: var(--gk-color-text-heading);
}

.gk-docs__meta {
    font-size: var(--gk-font-size-meta);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--gk-color-text-meta);
}

.gk-docs__download {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--gk-space-2);
    height: var(--gk-control-height-sm);
    padding: 0 var(--gk-space-5);
    border-radius: var(--gk-radius-pill);
    background: var(--gk-color-brand);
    color: var(--gk-color-text-inverse);
    font-size: var(--gk-font-size-body);
    font-weight: var(--gk-font-weight-bold);
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--gk-transition-default), transform var(--gk-transition-default);
}

.gk-docs__download:hover {
    background: var(--gk-color-brand-hover);
    color: var(--gk-color-text-inverse);
    transform: translateY(-1px);
}

.gk-docs__download svg {
    width: 16px;
    height: 16px;
}

.gk-docs__empty {
    margin: 0;
    font-size: var(--gk-font-size-card-text);
    color: var(--gk-color-text-meta);
}

/* Адаптив */
@media (max-width: 700px) {
    .gk-apply__step {
        flex-direction: column;
        gap: var(--gk-space-4);
        padding: var(--gk-space-6);
    }
    .gk-apply__action {
        width: 100%;
    }
    .gk-docs__item {
        flex-wrap: wrap;
    }
    .gk-docs__download {
        width: 100%;
        justify-content: center;
        margin-top: var(--gk-space-1);
    }
}