/*
 * Blog: post page and overview (Components/Blog/view). Concept: a printed column, one reading width, type does
 * the work; the cards below share the language of the start page. Tokens from account.css.
 */

/* ---------- post ---------- */
.post {
    max-width: 820px;
    margin: 0 auto 28px;
    padding: 28px 48px 40px;
    border: 1px solid var(--acc-line);
    border-radius: 16px;
    background: var(--acc-surface);
    color: #2B3037;
}
.post-back { display: inline-block; margin-bottom: 18px; color: var(--acc-muted); font-size: 14px; }
.post-back:hover { color: var(--acc-ink); text-decoration: none; }
.post-kicker { margin: 0 0 8px; color: var(--acc-accent-ink); font-size: 13px; letter-spacing: 0.04em; }
.post-title {
    margin: 0;
    color: var(--acc-ink);
    font-family: "Roboto Medium", Roboto, sans-serif;
    font-size: 36px;
    line-height: 1.15;
    letter-spacing: -0.01em;
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
}
.post-lead { margin-top: 14px; color: var(--acc-muted); font-size: 19px; line-height: 1.55; }
.post-lead p { margin: 0; }
.post-image { display: block; width: 100%; max-height: 420px; margin: 26px 0 4px; border-radius: 12px; object-fit: cover; }

.post-body { margin-top: 26px; font-size: 17px; line-height: 1.7; }
.post-body p, .post-body li { line-height: 1.7 !important; }   /* old posts carry inline line-heights from Word */
.post-body p { margin: 0 0 1.05em; }
.post-body h2, .post-body h3, .post-body h4 {
    margin: 1.8em 0 0.55em;
    color: var(--acc-ink);
    font-family: "Roboto Medium", Roboto, sans-serif;
    line-height: 1.25;
}
.post-body h2 { font-size: 24px; }
.post-body h3 { font-size: 20px; }
.post-body h4 { font-size: 17px; }
.post-body > :first-child { margin-top: 0; }
.post-body ul, .post-body ol { margin: 0 0 1.1em; padding-left: 1.3em; }
.post-body li { margin-bottom: 0.3em; }
.post-body li::marker { color: var(--acc-accent-ink); }
.post-body strong, .post-body b { color: var(--acc-ink); }
.post-body a { color: var(--acc-accent-ink); text-decoration: underline; text-underline-offset: 2px; }
.post-body blockquote { margin: 1.4em 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--primary-btn); color: var(--acc-muted); font-style: italic; }
.post-body hr { margin: 2em 0; border: 0; border-top: 1px solid var(--acc-line); }
.post-body img { max-width: 100%; height: auto; border-radius: 10px; }
.post-body br + br { display: none; }   /* pasted posts use <br><br> as paragraph breaks */

/* ---------- cards (overview, "Weitere Beiträge") ---------- */
.post-more { max-width: 820px; margin: 0 auto 8px; }
.post-more-title, .post-index-title { margin: 0 0 14px; color: var(--acc-ink); font-family: "Roboto Medium", Roboto, sans-serif; font-size: 22px; }
.post-index-title { font-size: 30px; margin-bottom: 4px; }
.post-index-lead { margin: 0 0 18px; color: var(--acc-muted); font-size: 16px; }
.post-index { margin-bottom: 8px; }
.post-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.post-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--acc-line);
    border-radius: 12px;
    background: var(--acc-surface);
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.post-card:hover { border-color: transparent; box-shadow: 0 10px 28px rgba(30, 34, 39, 0.12); transform: translateY(-2px); }
.post-card-image { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.post-card-body { display: flex; flex: 1; flex-direction: column; padding: 16px 18px 18px; }
.post-card-title { margin: 0 0 8px; font-family: "Roboto Medium", Roboto, sans-serif; font-size: 17px; line-height: 1.3; }
.post-card-link { color: var(--acc-ink); text-decoration: none; }
.post-card-link:hover { color: var(--acc-ink); text-decoration: none; }
.post-card-link::after { content: ""; position: absolute; inset: 0; }   /* whole card clickable */
.post-card-link:focus-visible { outline: none; }
.post-card:focus-within { outline: 2px solid var(--primary-btn); outline-offset: 2px; }
.post-card-text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 12px;
    color: var(--acc-muted);
    font-size: 14px;
    line-height: 1.5;
}
.post-card-more { margin-top: auto; color: var(--acc-ink); font-size: 14px; }

@media (max-width: 575.98px) {
    .post { padding: 20px 18px 28px; border-radius: 12px; }
    .post-title { font-size: 27px; }
    .post-lead { font-size: 17px; }
    .post-body { font-size: 16px; }
    .post-body h2 { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
    .post-card { transition: none; }
}