/*
 * public_docs.css — docs-specific additions over the shared article design
 * language (hero-band/wrap-narrow/prose come from chippie-marketing.css;
 * crumbs/toc from blog/article.css on article pages).
 * Templates: templates/public_docs/index.html, templates/public_docs/article.html
 */

/* ---- Index: sectioned card list ---- */

.docs-index { padding-bottom: 72px; }

/* Neutralise the global `section { padding: 84px 0 }` from
   chippie-marketing.css — index sections space with margin only. */
.docs-section { padding: 0; margin-top: 40px; }

.docs-section-title {
    font-size: 15px;
    font-family: "IBM Plex Mono", monospace;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--orange-deep, #b4430f);
    margin: 0 0 14px;
}

.docs-card-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

.docs-card {
    display: block;
    padding: 16px 20px;
    border: 1px solid var(--border, #e4ddd2);
    border-radius: 12px;
    text-decoration: none;
    background: var(--surface, #fff);
    transition: border-color .15s;
}

.docs-card:hover { border-color: var(--orange, #e85d1f); }

.docs-card-title {
    display: block;
    font-weight: 700;
    font-size: 17px;
    color: var(--green, #1e3a2f);
}

.docs-card-desc {
    display: block;
    margin-top: 4px;
    font-size: 15px;
    color: var(--text-2, #5c5750);
}

/* ---- Article: white body band + prose spacing + foot nav ---- */

/* Closes the hero visually, matching the blog article's white body section. */
.docs-body {
    background: var(--white, #fff);
    border-top: 1px solid var(--border, #e4ddd2);
}

.docs-prose { margin-top: 32px; }

.docs-foot { padding-bottom: 72px; }

.docs-foot-list {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    columns: 2;
    column-gap: 32px;
}

.docs-foot-list li { margin-bottom: 8px; break-inside: avoid; }

.docs-foot-list a {
    color: var(--green, #1e3a2f);
    text-decoration: none;
    font-size: 15px;
}

.docs-foot-list a:hover { color: var(--orange, #e85d1f); text-decoration: underline; }

@media (max-width: 575.98px) {
    .docs-foot-list { columns: 1; }
}