/* /czech-for/:slug situation articles. Loaded alongside blog-article.css
   (extraPageStylesheets) — reuses .ba-*/.hp-* classes for the shared article
   look and only adds what's new here: the quest CTA tweak, audio-play
   buttons, the FAQ accordion, and the related-situations list. */

/* Situations have no separate mobile template (unlike the grammar blog
   articles, which get a fully separate bacm-* mobile template with the TOC
   hand-placed near the top). They share .ba-grid/.ba-toc-box/.ba-aside with
   those articles instead, where .ba-toc-box normally lives nested inside
   .ba-aside, after the whole article, which only reads fine because
   .ba-grid's 2-column layout puts the sidebar visually alongside the
   article on desktop. Below 1001px that grid collapses to one column and
   DOM order takes over, so without this the TOC — now the very last thing
   in the DOM — rendered at the bottom of the page, after the entire
   article, which is useless as a table of contents.
   situations/*.ejs (via templates/situation-toc.ejs) puts .ba-toc-box as
   its own direct .ba-grid item instead of nesting it in .ba-aside, so it
   can be reordered independently: right after the hero at mobile widths
   (matching where the grammar mobile template puts it), and still in the
   top of the sidebar column on desktop. Scoped to .sq-wrap (situations
   only) so the 21 existing grammar .ba-wrap articles are untouched. */
@media (max-width: 1000px) {
    .sq-wrap .ba-grid {
        display: flex;
        flex-direction: column;
    }

    .sq-wrap .ba-toc-box {
        order: -1;
    }
}

@media (min-width: 1001px) {
    .sq-wrap .ba-grid {
        grid-template-areas: "article toc" "article aside";
    }

    .sq-wrap .ba-article { grid-area: article; }
    .sq-wrap .ba-toc-box { grid-area: toc; }
    .sq-wrap .ba-aside { grid-area: aside; }
}

/* The H1's direct 2-sentence answer — sits right under the title, above the tags. */
.ba-direct-answer {
    font-family: 'Inter', sans-serif;
    font-size: 1.05rem;
    line-height: 1.5;
    margin: 0.75rem 0 1rem 0;
}

.sq-cta-box .sq-cta-text {
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    color: #fff;
    opacity: 0.9;
    margin: 0.5rem 0 1rem 0;
}

.sq-cta-box .qs-start-btn {
    font-family: 'Roboto Mono', monospace;
    border: none;
    cursor: pointer;
}

.sq-cta-box .qs-start-btn:disabled {
    cursor: wait;
    opacity: 0.7;
}

/* Per-sentence audio buttons, inline with example/phrase text. The global
   `button` rule (style.css) sets a 70px left/right padding meant for
   full-width text buttons — without overriding it here, that padding
   stretches this bare icon into a wide oval. No border/background/ring here
   on purpose — just the icons8 play/pause glyph itself, no circle around it. */
.qs-audio-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    margin-left: 0.5rem;
    border: none;
    background: transparent;
    color: var(--as-black);
    cursor: pointer;
    vertical-align: middle;
    flex: none;
}

.qs-audio-btn img { width: 100%; height: 100%; display: block; }

.qs-audio-btn:hover img { opacity: .65; }

/* FAQ — plain <details>/<summary>, no JS required. */
.ba-faq-item {
    border: 2px solid var(--as-black);
    border-top: none;
    padding: 0;
}

.ba-faq-item:first-of-type { border-top: 2px solid var(--as-black); }

.ba-faq-item summary {
    cursor: pointer;
    list-style: none;
    padding: 0.9rem 1rem;
    font-weight: 700;
    font-family: 'Roboto Mono', monospace;
    font-size: 0.95rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.ba-faq-item summary::-webkit-details-marker { display: none; }

.ba-faq-item summary::after {
    content: '+';
    font-size: 1.2rem;
    flex: none;
}

.ba-faq-item[open] summary::after { content: '\2212'; }

.ba-faq-item p {
    margin: 0;
    padding: 0 1rem 1rem 1rem;
}

/* Related-situations list in the aside. */
.sq-related-list { display: flex; flex-direction: column; gap: 0.5rem; }

/* `nav.sq-related-list a` (not just `.sq-related-list a`) is deliberate: on
   the mobile template this stylesheet loads before blog-article-mobile.css,
   whose `.bacm-article a` sets a yellow underline for in-article prose
   links at the exact same specificity (one class + `a`) — same specificity
   plus later-in-cascade let it win and leak into this sidebar list. Adding
   the `nav` type selector (matching the real markup) outranks it without
   relying on stylesheet order. */
nav.sq-related-list a {
    display: block;
    padding: 0.6rem 0.75rem;
    border: none;
    background: var(--as-yellow);
    font-family: 'Roboto Mono', monospace;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--as-black);
    text-decoration: none;
}

nav.sq-related-list a:hover { background: var(--as-cyan); }

/* "Save your progress" register CTA — same box, a lighter/secondary treatment
   than the quest CTA so the two don't visually compete. */
.sq-register-cta {
    border: 2px solid var(--as-black);
    background: #fff;
    padding: 1.25rem;
    margin: 1.5rem 0;
}

.sq-register-cta p { margin: 0 0 0.75rem 0; }

.sq-register-cta a.hp-btn {
    display: inline-block;
    text-decoration: none;
}

@media (max-width: 760px) {
    .qs-audio-btn { width: 26px; height: 26px; }
}