/* ==========================================================================
   Design v3 — Jak začít (/jak-zacit)
   View:     app/Views/v3/how_to_start.php   ($pageCss = 'howto', $pageClass = 'b3-page-howto')
   Prototyp: design_handoff_l2beleth/design/Jak-zacit v3.dc.html
   Prefix:   .hts3-
   ========================================================================== */

/* Per-page pozadí (tyrkysová záře u spodního okraje) */
body.b3-page-howto {
    --b-page-bg: radial-gradient(1200px 500px at 50% 100%, rgba(60, 201, 180, .14), transparent 70%), #070d0e;
}

/* Obal stránky: .b-page.b-page--loose (--b-max:1280px) + flex column */
.hts3 {
    display: flex;
    flex-direction: column;
    gap: clamp(56px, 7vw, 88px);
}

/* ── Hlavička ───────────────────────────────────────────────────────────── */
.hts3-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
}
.hts3-head .b-kicker { line-height: 1.55; }
.hts3-h1 { --b-h1-size: clamp(40px, 6vw, 80px); }

/* ── Kroky ──────────────────────────────────────────────────────────────── */
.hts3-steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: 48px 32px;
    margin: 0;
    padding: 0;
    list-style: none;
}
/* Zářící spojovací linka za medailony (v prototypu <div aria-hidden> v <ol>).
   Jako v prototypu vždy viditelná — na mobilu prochází za medailonem I
   (medailon má neprůhledné pozadí). */
.hts3-steps::before {
    content: '';
    position: absolute;
    left: 4%;
    right: 4%;
    top: 44px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #8a6a2a 10%, #d9b562 40%, #3cc9b4 90%, transparent);
    box-shadow: 0 0 18px rgba(217, 181, 98, .4);
    pointer-events: none;
}

.hts3-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    min-width: 0;
    text-align: center;
}

/* Medailon s římskou číslicí */
.hts3-medal {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
    border: 1px solid var(--hts3-line, #d9b562);
    border-radius: 50%;
    background: #070d0e;
    box-shadow: var(--hts3-glow, 0 0 30px rgba(217, 181, 98, .35));
    color: var(--hts3-ink, #e3c47f);
    font-family: var(--b-display);
    font-size: 30px;
    font-weight: 900;
}
.hts3-step--1 { --hts3-line: #d9b562; --hts3-ink: #e3c47f; --hts3-glow: 0 0 30px rgba(217, 181, 98, .35); }
.hts3-step--2 { --hts3-line: #d9b562; --hts3-ink: #e3c47f; --hts3-glow: 0 0 30px rgba(217, 181, 98, .3); }
.hts3-step--3 { --hts3-line: #6fc9b0; --hts3-ink: #a6ebdd; --hts3-glow: 0 0 30px rgba(60, 201, 180, .3); }
.hts3-step--4 { --hts3-line: #3cc9b4; --hts3-ink: #3cc9b4; --hts3-glow: 0 0 40px rgba(60, 201, 180, .5); }

.hts3-step__kicker {
    margin-top: 8px;
    color: #a6ebdd;
    font-size: 14px;
    font-variant: small-caps;
    letter-spacing: .24em;
}
.hts3-step__title {
    margin: 0;
    font-family: var(--b-display);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    overflow-wrap: break-word;
}
.hts3-step__text {
    margin: 0;
    color: #bfcecd;
    font-size: 17px;
    line-height: 1.6;
}

/* CTA — .b-btn.b-btn--sm + varianta; doladění na hodnoty prototypu */
.hts3-cta { margin-top: 6px; max-width: 100%; white-space: normal; }
.hts3-cta i { font-size: 1em; }
.hts3-cta.b-btn--gold { font-weight: 400; box-shadow: none; }
.hts3-cta.b-btn--gold:hover,
.hts3-cta.b-btn--gold:focus-visible { box-shadow: 0 0 30px rgba(217, 181, 98, .5); }
.hts3-cta.b-btn--ghost-gold,
.hts3-cta.b-btn--ghost-teal { padding: 11px 20px; }

/* Krok 1 pro přihlášeného (legacy: „Přihlášen přes Discord“ místo tlačítka) */
.hts3-done {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    padding: 11px 0;
    color: #a6ebdd;
    font-size: 16px;
    font-variant: small-caps;
    letter-spacing: .14em;
    text-transform: lowercase; /* small-caps štítky jsou v prototypech malými písmeny */
}
.hts3-done i { color: #3cc9b4; font-size: 18px; }

/* ── Technické požadavky ────────────────────────────────────────────────── */
.hts3-req {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    text-align: center;
}
.hts3-req__title {
    margin: 0;
    color: #e3c47f;
    font-family: var(--b-body);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.55;
    font-variant: small-caps;
    letter-spacing: .28em;
}
.hts3-req__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 36px;
    margin: 0;
    padding: 0;
    list-style: none;
    color: #cfdcda;
    font-size: 18px;
}
.hts3-req__item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.hts3-req__item i { flex: none; color: #3cc9b4; }
.hts3-req__sep { color: #8a6a2a; }

/* Pod ~1190 px se řádek požadavků zalomí a oddělovač ◆ zůstane osamocený na začátku/konci řádku
   → položky pod sebe, bez oddělovačů. */
@media (max-width: 1199px) {
    .hts3-req__list { flex-direction: column; align-items: center; gap: 12px; }
    .hts3-req__sep { display: none; }
}