/* STUDIO Kommentarbereich unter einem Beitrag (partials/components/comments-section.hbs).
   Große hellgraue Kachel als Einladung: links der Kopf, rechts die Kommentare. Die Kommentare selbst gestaltet css/comments.css
   im Fenster von Ghost. Im Blogartikel so breit wie die Kacheln „Vorheriger/Nächster Beitrag“, sonst bis 1080px. */

.discussion {
    --d-ink: var(--text-color);
    --d-muted: var(--c-muted);
    --d-tile: var(--c-tile);
    width: 100%;
    max-width: 1080px;
    margin: max(72px, 5.5vw) auto 0;
    font-family: var(--font2);
    color: var(--d-ink);
    scroll-margin-top: 96px;
}

/* Im Blogartikel aus der schmalen Textspalte heraus, genau wie .post-neighbours in css/post-reading.css */
.post-end .discussion {
    max-width: var(--r-wide);
    width: auto;
    margin: max(72px, 5.5vw) calc((var(--r-measure) - min(var(--r-wide), 100vw - 2 * var(--r-gutter))) / 2) 0;
}

.discussion-tile {
    display: grid;
    grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
    gap: clamp(40px, 5vw, 80px);
    align-items: start;
    padding: clamp(40px, 4.4vw, 64px);
    background: var(--d-tile);
    border-radius: clamp(28px, 2.6vw, 40px);
}

/* Kopf bleibt am Rechner beim Scrollen durch lange Diskussionen neben den Kommentaren stehen */
.discussion-head {
    position: sticky;
    top: 112px;
}

.discussion-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 28px;
}

.discussion-kicker,
.discussion-count {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 14px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
}

.discussion-kicker {
    background: var(--d-ink);
    color: var(--c-on-ink);
}

.discussion-count {
    background: var(--c-on-ink);
    color: var(--d-ink);
    font-variant-numeric: tabular-nums;
}

/* Ghost schreibt die Zahl erst, wenn sie geladen ist. Bis dahin keine leere Pille */
.discussion-count:empty {
    display: none;
}

.discussion-title {
    margin: 0;
    font-family: var(--font1);
    font-size: clamp(40px, 4vw, 60px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.045em;
    text-wrap: balance;
}

.discussion-text {
    margin: 20px 0 0;
    max-width: 34ch;
    color: var(--d-muted);
    font-size: 17px;
    line-height: 1.5;
    text-wrap: pretty;
}

.discussion-body {
    min-width: 0;
    /* Platz für Ghosts Fenster, bevor es geladen ist. Sonst springt die Seite (CLS) */
    min-height: 240px;
}

.discussion-body #ghost-comments-root,
.discussion-body iframe[title="comments-frame"] {
    display: block;
    width: 100%;
}

@media (max-width: 1080px) {
    .discussion-tile {
        grid-template-columns: minmax(0, 1fr);
        gap: 36px;
    }

    .discussion-head {
        position: static;
    }

    .discussion-text {
        max-width: 46ch;
    }
}

@media (max-width: 767px) {
    .post-end .discussion,
    .discussion {
        margin-inline: 0;
    }

    .discussion-tile {
        gap: 28px;
        padding: 28px 16px 20px;
        border-radius: 28px;
    }

    .discussion-head {
        padding-inline: 8px;
    }

    .discussion-meta {
        margin-bottom: 20px;
    }

    .discussion-title {
        font-size: 40px;
    }

    .discussion-text {
        margin-top: 14px;
        font-size: 16px;
    }
}

/* Ghosts Fenster der Kommentare (eigene iframes neben der Liste): über die volle Bildschirmhöhe, auch unter Safaris Leisten
   am iPhone. Sonst bleibt dort ein Streifen der Seite sichtbar */
.discussion iframe:not([title="comments-frame"]):not([title="auth-frame"]) {
    height: 100lvh !important;
}