/* Главная для гостей и ещё не жителей (public/elements/home_guest.php) */

.hg {
    --hg-card: var(--card-bg, #141419);
    --hg-border: var(--border-color, #22222b);
    --hg-soft: var(--hover-bg-color, #1c1c24);
    --hg-text: var(--text-color, #fff);
    --hg-muted: var(--text-muted, #8b8b98);
    --hg-accent: var(--primary-color, #6a5aff);
    --hg-accent-soft: color-mix(in srgb, var(--hg-accent) 14%, transparent);

    max-width: var(--page-max);
    margin: 0 auto;
    padding: 30px var(--page-pad) 48px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    color: var(--hg-text);
}

.hg h1, .hg h2, .hg h3 { font-weight: normal; margin: 0; }

.hg-card {
    background: var(--hg-card);
    border: 1px solid var(--hg-border);
    border-radius: 18px;
}

.hg-muted { color: var(--hg-muted); margin: 0; }

/* Кнопки */
.hg-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.hg-btn {
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    border-radius: 12px;
    border: 1px solid var(--hg-border);
    background: var(--hg-soft);
    color: var(--hg-text);
    font-size: 15px;
    text-decoration: none;
}

.hg-btn:hover { border-color: var(--hg-accent); }
.hg-btn.primary { background: var(--hg-accent); border-color: var(--hg-accent); color: #fff; }
.hg-btn.primary:hover { filter: brightness(1.08); }
.hg-btn.ghost { background: transparent; color: var(--hg-muted); }
.hg-self-start { align-self: flex-start; }

/* Баннер */
.hg-hero {
    position: relative;
    overflow: hidden;
    padding: 48px;
    display: flex;
    align-items: center;
    gap: 24px;
}

.hg-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(600px 300px at 82% 40%, var(--hg-accent-soft), transparent 70%);
    pointer-events: none;
}

.hg-hero-text { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.hg-hero h1 { font-size: 44px; line-height: 1.12; }
.hg-hero p { margin: 0; max-width: 540px; font-size: 17px; line-height: 1.6; color: var(--hg-muted); }
.hg-art { position: relative; flex-shrink: 0; width: 440px; max-width: 42%; height: auto; image-rendering: pixelated; }

.hg-tag {
    align-self: flex-start;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--hg-border);
    background: var(--hg-soft);
    color: var(--hg-muted);
    font-size: 13px;
}

/* Цифры */
.hg-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.hg-stat { padding: 20px; display: flex; flex-direction: column; gap: 6px; }
.hg-stat b { font-weight: normal; font-size: 30px; }
.hg-stat span { color: var(--hg-muted); }

/* Заголовки секций */
.hg-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 10px 0 14px; }
.hg-head h2 { font-size: 26px; }
.hg-head p { margin: 6px 0 0; font-size: 14px; color: var(--hg-muted); }
.hg-head a { color: var(--hg-accent); font-size: 14px; text-decoration: none; }
.hg-head-inline { margin: 0; align-items: center; }
.hg-head-inline h2 { font-size: 22px; }

/* Возможности */
.hg-feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.hg-feat { padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.hg-feat h3 { font-size: 18px; margin-top: 4px; }
.hg-feat p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--hg-muted); }

.hg-ico {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--hg-accent-soft);
    color: var(--hg-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

/* Мероприятия */
.hg-events { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.hg-event { display: flex; overflow: hidden; color: inherit; text-decoration: none; }
.hg-event:hover { border-color: var(--hg-accent); }

.hg-date {
    width: 84px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--hg-soft);
    border-right: 1px solid var(--hg-border);
}

.hg-date b { font-weight: normal; font-size: 28px; }
.hg-date span { font-size: 12px; color: var(--hg-muted); }
.hg-event-body { min-width: 0; padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.hg-event-body b { font-weight: normal; font-size: 16px; }
.hg-event-body span { font-size: 13px; color: var(--hg-muted); }

/* Шаги и новости */
.hg-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.hg-panel { padding: 22px; display: flex; flex-direction: column; gap: 16px; }
.hg-panel h2 { font-size: 22px; }

.hg-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.hg-step { display: flex; gap: 14px; align-items: flex-start; }

.hg-step-n {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--hg-soft);
    color: var(--hg-muted);
    font-size: 15px;
}

.hg-step.is-current .hg-step-n { background: var(--hg-accent); color: #fff; }
.hg-step.is-done .hg-step-n { background: color-mix(in srgb, var(--success-color, #28c76f) 18%, transparent); color: var(--success-color, #28c76f); }
.hg-step.is-done b { color: var(--hg-muted); }
.hg-step.is-off { opacity: 0.55; }   /* шаг временно недоступен */
.hg-step b { font-weight: normal; font-size: 16px; display: block; margin-bottom: 4px; }
.hg-step span { font-size: 14px; color: var(--hg-muted); line-height: 1.45; }

.hg-news { display: flex; gap: 14px; align-items: center; color: inherit; text-decoration: none; }
.hg-news:hover b { color: var(--hg-accent); }
.hg-news img, .hg-news-ph { width: 116px; height: 74px; flex-shrink: 0; border-radius: 12px; object-fit: cover; }
.hg-news-ph { display: flex; align-items: center; justify-content: center; background: var(--hg-soft); color: var(--hg-muted); }
.hg-news b { font-weight: normal; font-size: 15px; line-height: 1.35; display: block; }
.hg-news small { display: block; margin-top: 4px; font-size: 12px; color: var(--hg-muted); }

/* Вопросы */
.hg-faq { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hg-q { padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; }
.hg-q b { font-weight: normal; font-size: 16px; }
.hg-q span { font-size: 14px; line-height: 1.5; color: var(--hg-muted); }
.hg-q a { color: var(--hg-accent); }

/* Финальный призыв */
.hg-cta { padding: 34px 40px; display: flex; align-items: center; gap: 20px; background: var(--hg-accent-soft); border-color: transparent; }
.hg-cta h2 { font-size: 26px; }
.hg-cta p { margin: 6px 0 0; color: var(--hg-muted); }
.hg-cta .hg-actions { margin-left: auto; }

/* Адаптив */
@media (max-width: 1100px) {
    .hg-feats, .hg-events { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hg-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .hg { padding: 18px 14px 32px; gap: 16px; }
    .hg-hero { padding: 26px 20px; flex-direction: column-reverse; align-items: stretch; }
    .hg-hero h1 { font-size: 30px; }
    .hg-hero p { font-size: 15px; }
    .hg-art { max-width: 70%; align-self: center; }
    .hg-feats, .hg-events, .hg-two, .hg-faq { grid-template-columns: 1fr; }
    .hg-stat b { font-size: 24px; }
    .hg-head h2 { font-size: 22px; }
    .hg-cta { flex-direction: column; align-items: flex-start; padding: 24px 20px; }
    .hg-cta .hg-actions { margin-left: 0; }
}