/* ============================================================================
   PAGE-FAQ.CSS: /faq
   ----------------------------------------------------------------------------
   Layout drží GLOBÁLNÍ třídy (section.jl-container, .jl-pagehead) a harmonika
   sdílená obsahová vrstva (.ed-faq, .ed-faq-a, .ed-ico z components/editorial.css).
   Tady zůstává jen to, co je opravdu vlastní téhle stránce: hlavička kategorie
   a kontaktní pruh.

   Sazba se řídí týmž pravidlem jako karta nabídky: co je údaj (počet otázek),
   to je strojopis; co je nadpis, to je Archivo; tlačítko je čtený text.
   Tlačítko na Discord tu bylo Archivo 800 ve verzálkách přes 17 px, takže
   vedle skinového .btn-primary stála na jedné obrazovce dvě různá zelená
   tlačítka. Teď má sazbu vzorového .btn, 600, .93 rem, bez verzálek.
   ============================================================================ */

/* base.css dává .main-content `display:flex; align-items:center`, takže každý
   přímý potomek bez šířky se smrskne na max-content. width:100% + align-self
   je stejná pojistka, jakou má globální .jl-page. */
.faq-page {
    position: relative;
    overflow-x: hidden;
    width: 100%;
    align-self: stretch;
    padding-bottom: 60px;
}

/* Stránka jede na plné šířce globálního kontejneru; čitelnost řádku hlídá
   dvousloupcová mřížka, ne umělý strop stránky. */
.faq-wrap {
    max-width: none;
}

/* Sdílená .jl-pagehead si tady nedrží vlastní kolej, tu už má
   section.jl-container, jinak by se boční okraje sečetly. */
.faq-head {
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
    padding-top: 12px;
}

/* ============================================
   ROZVRŽENÍ: REJSTŘÍK + OTÁZKY
   --------------------------------------------
   Sedmnáct otázek ve čtyřech kategoriích potřebuje rejstřík, ne další
   sloupec akordeonů. Rejstřík drží levou kolej a při scrollu zůstává stát,
   otázky tečou vpravo v jednom sloupci: jsou to celé věty a ve dvou úzkých
   sloupcích se lámaly do čtyř řádků.
   ============================================ */
.faq-layout {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    gap: clamp(28px, 4vw, 68px);
    align-items: start;
    margin-top: 26px;
}

.faq-index {
    position: sticky;
    top: 96px;
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--rail);
}

/* Položka rejstříku: název vlevo, počet otázek vpravo. Aktivní stav nese
   levá hrana, stejně jako otevřená otázka v akordeonu. */
.faq-index-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 4px 11px 12px;
    border-bottom: 1px solid var(--rail);
    border-left: 2px solid transparent;
    color: var(--paper-2);
    text-decoration: none;
    transition: color var(--t-fast), border-color var(--t-fast);
}

.faq-index-item:hover,
.faq-index-item:focus-visible {
    color: var(--paper);
    border-left-color: var(--go);
}

.faq-index-name {
    font-size: 14px;
    line-height: 1.35;
}

.faq-index-n {
    flex: none;
    font-family: var(--font-code);
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .06em;
    color: var(--paper-3);
}

/* ============================================
   KATEGORIE
   ============================================ */
.faq-categories {
    display: flex;
    flex-direction: column;
    gap: 46px;
    min-width: 0;
}

/* Kotva pod lepivou lištou: bez odsazení by nadpis kategorie po skoku
   z rejstříku skončil schovaný pod ní. */
.faq-category {
    scroll-margin-top: 90px;
}

/* Hlavička kategorie: ikona + nadpis vlevo, vlasová linka doprava. Počet
   otázek odešel do rejstříku, tady by stál podruhé. */
.faq-category-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

.faq-category-rule {
    flex: 1 1 auto;
    height: 1px;
    min-width: 24px;
    background: var(--rail);
}

/* Nadpis kategorie je jeden z hlavních oddílů stránky. Sazba je stejná
   jako u .jl-section-label, jen o stupeň menší. */
.faq-category-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(20px, 2.4vw, 26px);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: 0;
    text-transform: none;
    color: var(--paper);
}

/* Harmonika bere celou šířku sloupce; strop čitelnosti řádku drží odpověď. */
.faq-grid {
    max-width: none;
    gap: 10px;
}

/* ============================================
   KONTAKTNÍ PRUH
   --------------------------------------------
   Vodorovný pruh přes celou šířku: ikona, text, tlačítko na jedné lince.
   Karta jako každá jiná na webu, plocha --panel, linka, --r-card, černý stín.
   ============================================ */
.faq-contact {
    display: grid;
    grid-template-columns: minmax(0, 210px) minmax(0, 1fr) auto;
    align-items: center;
    gap: 22px;
    max-width: none;
    margin: 60px 0 0;
    padding: 26px 28px;
    text-align: left;
    background: var(--panel);
    border: 1px solid var(--rail);
    border-radius: var(--r-card);
    box-shadow: var(--lift);
}

/* Fotografie drží pevný poměr, ať se karta při načtení neposune. */
.faq-contact-shot {
    margin: 0;
}
.faq-contact-shot img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border: 1px solid var(--rail);
    border-radius: calc(var(--r-card) - 8px);
}

/* Nadpis a věta leží vedle sebe, jinak by mezi textem a tlačítkem zůstal
   prázdný pruh přes půl karty. */
.faq-contact-text {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 18px;
    min-width: 0;
}

.faq-contact h3 {
    flex: none;
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(19px, 2vw, 23px);
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
    color: var(--paper);
}

.faq-contact p {
    flex: 1 1 auto;
    max-width: 60ch;
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--paper-2);
}

.faq-contact .faq-discord-btn {
    flex: none;
    white-space: nowrap;
}

/* Jediné plné zelené tlačítko na stránce. Dřív tu byl značkový gradient
   s bílým textem a fialovou září pod ním, barevné stíny na webu nejsou. */
.faq-discord-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 22px;
    background: var(--go);
    color: var(--go-ink);
    font-family: var(--font-text);
    font-size: .93rem;
    font-weight: 600;
    letter-spacing: -.01em;
    text-transform: none;
    border: none;
    border-radius: var(--r-btn);
    text-decoration: none;
    transition: background-color var(--t-fast), transform var(--t-fast);
}

.faq-discord-btn svg {
    width: 18px;
    height: 18px;
    flex: none;
}

.faq-discord-btn:hover,
.faq-discord-btn:focus-visible {
    background: var(--go-hi);
    color: var(--go-ink);
    transform: translateY(-1px);
}

/* ============================================
   RESPONSIVE
   ============================================ */
/* Pod 1000 px se rejstřík položí nad otázky a jede vodorovně: sloupec by
   ukrojil polovinu šířky a otázky by se lámaly. */
@media (max-width: 1000px) {
    .faq-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 26px;
    }

    .faq-index {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
        border-top: 0;
    }

    .faq-index-item {
        gap: 8px;
        padding: 8px 12px;
        border: 1px solid var(--rail);
        border-radius: var(--r-chip);
    }

    .faq-index-item:hover,
    .faq-index-item:focus-visible {
        border-color: var(--go);
    }
}

@media (max-width: 768px) {
    .faq-categories {
        gap: 34px;
    }

    .faq-category-header {
        gap: 12px;
        margin-bottom: 14px;
    }

    /* Linka za nadpisem nemá na mobilu kam růst. */
    .faq-category-rule {
        display: none;
    }

    .faq-contact {
        grid-template-columns: minmax(0, 1fr);
        justify-items: stretch;
        text-align: left;
        gap: 14px;
        margin-top: 40px;
        padding: 22px 18px;
    }
    .faq-contact-shot img { aspect-ratio: 16 / 7; }

    .faq-discord-btn {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .faq-discord-btn {
        transition: none;
    }

    .faq-discord-btn:hover {
        transform: none;
    }
}