/* Site-level overrides for the risotto theme.
   This file shadows themes/risotto/static/css/custom.css (Hugo serves
   site/static before theme static). Theme itself is never edited. */

/* Restore heading hierarchy sizes (risotto flattens all headings to 1rem) */
h1 {
    font-size: 1.5rem;
}

h2 {
    font-size: 1.3rem;
    font-weight: 700;
}

h3 {
    font-size: 1.1rem;
}

/* Blog index: no page title anymore, give the first post breathing room */
.page__body > article.post:first-child {
    margin-top: 2rem;
}

/* Sidebar: drop the decorative "---" divider under the about block */
.page__aside > hr {
    display: none;
}

/* Blog index: cap previews at 3 lines + divide posts (2026-09-05) */
.post__summary {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-height: 1.5rem;
    overflow: hidden;
}

.page__body article.post + article.post {
    margin-top: 2.25rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--off-bg);
}


/* --- Homepage: section rhythm + 2-col grids (preview 2026-09-04) --- */
.page__body h2 {
    margin: 2.75rem 0 1.1rem 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--off-bg);
}

.page__body h2:first-child {
    border-top: 0;
    margin-top: 0;
    padding-top: 0;
}

.page__body .grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: 1rem;
    margin: 0 0 1.5rem 0;
    padding-left: 0;
    list-style: none;
}

.page__body .grid li {
    margin: 0;
    padding: 1rem;
    border: 1px solid var(--off-bg);
    background: var(--inner-bg);
    overflow-wrap: break-word;
}

/* The cards end up stacked one per row (the .grid wrapper holds a single <ul>),
   so the gap you actually see between two cards is their own margin. */
.page__body .grid li + li {
    margin-top: 1rem;
}

.page__body .grid li > strong:first-child {
    display: block;
    margin-bottom: 0.4rem;
}

/* blog list: tighten date-to-summary gap */
.post__meta { margin-bottom: 0.5rem; }


/* homepage section headings (h1) keep the divider rhythm */
.page__body > h1:not(:first-child) { margin: 2.75rem 0 1.1rem; padding-top: 1.25rem; border-top: 1px solid var(--off-bg); }
.page__body > h1:first-child { margin-bottom: 1.1rem; }

/* Homelab group labels (Compute / Storage / Workloads) are bold paragraphs;
   lift them one step above the 1rem bullet text they introduce. Explicit 700
   because the theme's <strong> weight (600) has no matching face in the
   Fira Mono stack on most machines. */
.page__body p > strong:only-child { font-size: 1.15rem; font-weight: 700; }

/* Homelab architecture diagram / code blocks: tighten font size & padding
   so 78-char box diagrams fit cleanly within the 752px desktop column */
.page__body .highlight pre {
    padding: 1rem 1.25rem;
    font-size: 0.85rem;
    line-height: 1.25;
}

/* --- Homepage: community contributions as a table (2026-09-16) --- */
.page__body table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.86rem;
    margin: 0 0 1.5rem 0;
}

.page__body thead th {
    text-align: left;
    white-space: nowrap;
    padding: 0 0.9rem 0.5rem 0;
    font-size: 0.74rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    border-bottom: 1px solid var(--off-bg);
}

.page__body tbody td {
    padding: 0.2rem 0.9rem 0.2rem 0;
    border-bottom: 1px solid var(--off-bg);
    vertical-align: top;
    line-height: 1.25rem;
}

.page__body tbody td.cc-area {
    width: 7rem;
    white-space: nowrap;
    color: var(--highlight);
}

/* Each area lives in its own tbody, so a group that follows another one can be
   spaced away from it by styling that tbody's first row. */
.page__body tbody + tbody tr:first-child td {
    padding-top: 1.3rem;
}

/* Push the contribution column right so the links read as their own column
   instead of hugging the Area label (user 2026-09-16: "Contribution再往右一些，
   至少往右一个 Area的宽度", then "再往左挪回Area的一半" → half of that offset, i.e.
   half an Area column ≈ 64px). The header cell gets the same offset so
   "Contribution" stays above its links. */
.page__body tbody td.cc-desc,
.page__body thead th + th {
    padding-left: 4rem;
}

/* Mobile: two columns still squeeze the contribution text, so below 42rem
   each row becomes a stacked block — Area as a small label line, the
   contribution underneath at full width. */
@media screen and (max-width: 42rem) {
    .page__body table,
    .page__body thead,
    .page__body tbody {
        display: block;
    }

    .page__body thead {
        display: none;
    }

    .page__body tbody tr {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        padding: 0.2rem 0;
        border-bottom: 1px solid var(--off-bg);
    }

    .page__body tbody td {
        padding: 0;
        border-bottom: 0;
    }

    /* here the row itself is the block, so the group gap goes on the row */
    .page__body tbody + tbody tr:first-child td {
        padding-top: 0;
    }

    .page__body tbody + tbody tr:first-child {
        padding-top: 1.6rem;
    }

    /* The merged Area cell is the only 'Cloud' in the source; on narrow
       screens it keeps its job as the group label, shown once, above the
       first entry of the group. The other rows of the group are just their
       contribution line. */
    .page__body tbody td.cc-area {
        order: 1;
        width: auto;
        font-size: 0.74rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
    }

    .page__body tbody td.cc-desc {
        order: 3;
        flex: 0 0 100%;
        margin-top: 0.3rem;
        line-height: 1.25rem;
        padding-left: 0.6rem;
    }

    /* the margin above only separates a group label from the entry it belongs
       to; rows without a label are plain entries and need no extra space */
    .page__body tbody td.cc-desc:only-child {
        margin-top: 0;
    }
}