/*
 * Module purpose: refine the shared tutorial system for a larger, structured content library.
 * Main logic: reduce oversized article chrome, introduce grouped unframed link rows, and add answer-first article summaries.
 * Cautions: this stylesheet only overrides the original guide foundation and keeps every page readable without JavaScript.
 * Interactions: generated and existing localized pages load this file after guides.css so one layer can be removed independently.
 */
:root {
    --reading_width: 770px;
}

.guide_hero {
    min-height: min(560px, calc(100vh - var(--header_height)));
}

.article_header {
    min-height: 390px;
    padding-bottom: 54px;
}

.guide_hero::before,
.article_header::before {
    background: rgba(10, 17, 14, 0.64);
}

h1 {
    font-size: 64px;
}

.article_header h1 {
    font-size: 52px;
}

.guide_intro h2 {
    font-size: 43px;
}

.workflow_inner h2 {
    font-size: 42px;
}

.text_command {
    display: inline-block;
    margin-top: 18px;
    font-size: 14px;
    font-weight: 750;
    text-decoration: none;
}

/*
 * Module purpose: organize many tutorials without turning the guide hub into a wall of equal cards.
 * Main logic: pair one concise category introduction with compact full-width article rows separated by rules.
 * Cautions: rows keep stable columns and wrap descriptions before text can collide with numbers or arrows.
 * Interactions: GUIDE_INDEX_GROUPS supplies the category and article copy through the static content builder.
 */
.guide_catalog {
    border-top: 1px solid var(--line_dark);
}

.topic_group {
    max-width: var(--content_width);
    display: grid;
    grid-template-columns: minmax(230px, 0.72fr) minmax(0, 1.55fr);
    gap: 78px;
    margin: 0 auto;
    padding: 70px 22px;
}

.topic_group + .topic_group {
    border-top: 1px solid var(--line);
}

.topic_group_heading {
    align-self: start;
    position: sticky;
    top: 96px;
}

.topic_group_heading h2 {
    margin: 0;
    font-size: 31px;
    line-height: 1.22;
}

.topic_group_heading > p:last-child {
    margin: 17px 0 0;
    color: var(--muted);
    font-size: 14px;
}

.topic_link_list {
    border-top: 1px solid var(--line_dark);
}

.topic_link {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 24px;
    gap: 20px;
    align-items: center;
    min-height: 104px;
    padding: 19px 4px;
    color: var(--ink);
    border-bottom: 1px solid var(--line);
    text-decoration: none;
    transition: padding 160ms ease, background 160ms ease;
}

.topic_link:hover {
    padding-inline: 13px;
    color: var(--ink);
    background: var(--paper_soft);
}

.topic_link strong {
    display: block;
    font-family: "Iowan Old Style", "Noto Serif SC", "Source Han Serif SC", "Songti SC", Georgia, serif;
    font-size: 21px;
    line-height: 1.28;
}

.topic_link small {
    display: block;
    margin-top: 6px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}

.topic_group:nth-child(2) .course_number {
    color: var(--blue);
}

.topic_group:nth-child(3) .course_number {
    color: var(--coral);
}

/*
 * Module purpose: give long articles an immediate answer and stable orientation before detailed sections begin.
 * Main logic: place the concise answer beside three factual constraints, then tighten the reading grid and section rhythm.
 * Cautions: summary content is visible static HTML and facts remain definitions rather than decorative metric cards.
 * Interactions: every generated article supplies answer_html and quick_facts while older articles continue using the base layout.
 */
.article_overview {
    max-width: var(--content_width);
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(250px, 0.55fr);
    gap: 76px;
    margin: 0 auto;
    padding: 48px 22px;
    border-bottom: 1px solid var(--line);
}

.answer_summary {
    padding-right: 36px;
    border-right: 1px solid var(--line);
}

.answer_summary > p:last-child {
    max-width: 760px;
    margin: 0;
    color: var(--ink_soft);
    font: 23px/1.56 "Iowan Old Style", "Noto Serif SC", "Source Han Serif SC", "Songti SC", Georgia, serif;
}

.article_overview .guide_facts {
    align-self: center;
}

.article_layout {
    grid-template-columns: minmax(0, var(--reading_width)) 250px;
    gap: 64px;
    padding-top: 58px;
}

.article_body {
    font-size: 16px;
}

.article_body > .map_figure:first-child {
    margin-bottom: 54px;
}

.article_section {
    padding-top: 4px;
}

.article_section + .article_section {
    margin-top: 52px;
    padding-top: 4px;
    border-top: 1px solid var(--line);
}

.article_body .article_section h2 {
    margin: 34px 0 16px;
    font-size: 30px;
}

.article_body .article_section + .article_section h2 {
    margin-top: 26px;
}

.table_wrap {
    max-width: 100%;
    overflow-x: auto;
}

.faq_list {
    border-top: 1px solid var(--line_dark);
}

.faq_item {
    padding: 21px 0 18px;
    border-bottom: 1px solid var(--line);
}

.article_body .faq_item h3 {
    margin: 0 0 7px;
    font-size: 20px;
}

.faq_item p {
    margin-bottom: 0;
}

.article_cta .section_kicker {
    color: #7fd0b0;
}

/*
 * Module purpose: provide one restrained trust footer across tutorials, cases, and policy pages.
 * Main logic: separate product identity, crawlable policy navigation, copyright ownership, and third-party data terms into two quiet rows.
 * Cautions: ownership text applies only to original EasyMap material and never claims third-party boundary data.
 * Interactions: site_content_shared renders the same structure for every generated content page.
 */
.content_site_footer {
    display: block;
    padding: 34px max(22px, calc((100vw - var(--content_width)) / 2));
    color: #99a8a1;
    text-align: left;
    background: #17231f;
    border-top: 0;
}

.content_footer_primary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 34px;
}

.content_footer_primary > div {
    display: grid;
    gap: 4px;
}

.content_footer_primary strong {
    color: #fff;
    font-size: 14px;
}

.content_footer_primary nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px 22px;
}

.content_footer_primary a {
    color: #d8e3de;
    text-decoration: none;
}

.content_footer_primary a:hover {
    color: #fff;
}

.content_footer_legal {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 24px;
    margin-top: 22px;
    padding-top: 17px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 11px;
}

/*
 * Module purpose: distinguish source notes from the instructional flow without turning them into a promotional block.
 * Main logic: use a quiet ruled list, clear publisher labels, and full-width links that remain easy to scan.
 * Cautions: external sources use ordinary anchors and must stay visible in server-rendered HTML.
 * Interactions: build_guide_content inserts this block only when a page has relevant authoritative references.
 */
.article_references {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 30px 0;
}

.article_references ul {
    display: grid;
    gap: 0;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.article_references li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: baseline;
    padding: 12px 0;
    border-top: 1px solid var(--line);
}

.article_references a {
    color: #174f43;
    font-weight: 700;
}

.article_references span {
    color: var(--muted);
    font-size: 12px;
}

@media (max-width: 900px) {
    .topic_group {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .topic_group_heading {
        position: static;
    }

    .article_overview {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .answer_summary {
        padding-right: 0;
        padding-bottom: 28px;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .content_footer_primary {
        flex-direction: column;
    }

    .content_footer_primary nav {
        justify-content: flex-start;
    }
}

@media (max-width: 680px) {
    .guide_hero {
        min-height: 68vh;
    }

    .article_header {
        min-height: 390px;
    }

    h1,
    .article_header h1 {
        font-size: 38px;
    }

    .guide_intro h2,
    .workflow_inner h2 {
        font-size: 31px;
    }

    .guide_catalog {
        border-top-color: var(--line);
    }

    .topic_group {
        gap: 24px;
        padding: 48px 18px;
    }

    .topic_group_heading h2 {
        font-size: 27px;
    }

    .topic_link {
        grid-template-columns: 34px minmax(0, 1fr) 18px;
        gap: 12px;
        min-height: 96px;
        padding-block: 16px;
    }

    .topic_link strong {
        font-size: 19px;
    }

    .article_overview {
        padding: 36px 18px;
    }

    .answer_summary > p:last-child {
        font-size: 20px;
    }

    .article_layout {
        padding-top: 44px;
    }

    .article_section + .article_section {
        margin-top: 42px;
    }

    .article_body .article_section h2 {
        font-size: 26px;
    }

    .article_references li {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}