/*
 * Ghost compatibility layer
 * - Editor card width classes (.kg-width-wide / .kg-width-full)
 * - Custom-font hooks driven by Ghost admin "Design → Typography"
 * Loaded after pages.css so it can override card widths inside .gh-content.
 */

@layer pages {
  /* Wide image / embed / gallery card — escapes the article column */
  .gh-content .kg-width-wide,
  .article .kg-width-wide,
  .gh-content > figure.kg-width-wide,
  .article > figure.kg-width-wide {
    position: relative;
    width: min(100%, 1100px);
    max-width: 100vw;
    margin-inline: auto;
    margin-block: 2rem;
  }

  /* Full-bleed card — breaks out to the viewport edges */
  .gh-content .kg-width-full,
  .article .kg-width-full,
  .gh-content > figure.kg-width-full,
  .article > figure.kg-width-full {
    position: relative;
    width: 100vw;
    max-width: 100vw;
    margin-inline: calc(50% - 50vw);
    margin-block: 2.5rem;
  }

  /* Default-width image cards: cap at column width and preserve aspect
     ratio. tokens.css only sets `max-inline-size: 100%` on <img>, so
     without `height: auto` the height attr can stick at its declared
     pixel value once the column shrinks the width — squishing the image.  */
  .gh-content figure img,
  .article figure img {
    height: auto;
  }

  .gh-content .kg-width-wide img,
  .gh-content .kg-width-full img,
  .article .kg-width-wide img,
  .article .kg-width-full img {
    display: block;
    width: 100%;
    height: auto;
  }

  /* Comments wrapper — Ghost's {{comments}} widget is wrapped in
       .post-comments. The "// guestbook · N entries" heading should match
       the design's section labels (mono · lime · wide-tracking) used by
       .related-label and friends. Scoped to .post-comments so it can't
       leak into other contexts. */
  .post-comments .comments-label {
    font-family: var(--font-mono);
    font-size: var(--fs-meta);
    color: var(--lime);
    letter-spacing: 0.2em;
    margin-block-end: 0.75rem;
  }

  /* meta line under the section heading (// guestbook · N entries). */
  .post-comments .cmt-head .meta {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--ink-3);
    letter-spacing: 0.15em;
    margin-block-start: 0;
  }

  /* The Ghost comments iframe lives inside `.win > .post-comments-frame`.
       Give the iframe room to breathe, fill the window's width, and let the
       widget set its own height. */
  .post-comments .post-comments-frame {
    padding: 1.25rem 1rem 0.5rem;
  }
  .post-comments .post-comments-frame iframe,
  .post-comments .post-comments-frame #ghost-comments-root iframe {
    display: block;
    width: 100%;
    border: 0;
  }

  /* Hide the paywall as we have a custom one */
  .gh-post-upgrade-cta-content,
  .gh-post-upgrade-cta {
    display: none !important;
  }

  /* Revision label fallback: when no internal #rev-* tag is present on the post,
     the [data-stat-rev] element renders empty — show "v1" as the implicit default. */
  [data-stat-rev]:empty::before {
    content: "v1";
  }

  /* ── Adaptive column counts for prev-next & related ──────────────────
       pages.css fixes these grids at 2 cols / 3 cols above 640px regardless
       of how many cards are inside. When prev_post or next_post is missing,
       or when there are fewer than 3 related posts, the unused tracks leave
       awkward gaps. Use :has() so the column count tracks the actual child
       count, capped at the design max. Browsers without :has() fall back to
       the original pages.css rules (acceptable, was the prior behaviour). */
  @media (min-width: 640px) {
    /* prev-next: 1 neighbour → 1 col, 2 → 2 cols. */
    .prev-next:not(:has(> a:nth-child(2))) {
      grid-template-columns: 1fr;
    }
    .prev-next:has(> a:nth-child(2)) {
      grid-template-columns: 1fr 1fr;
    }

    /* related: 1 → 1 col, 2 → 2 cols, 3+ → 3 cols. The :nth-child(3) rule
       comes last so it wins when all three exist (same specificity). */
    .related .related-grid:not(:has(> a:nth-child(2))) {
      grid-template-columns: 1fr;
    }
    .related .related-grid:has(> a:nth-child(2)) {
      grid-template-columns: repeat(2, 1fr);
    }
    .related .related-grid:has(> a:nth-child(3)) {
      grid-template-columns: repeat(3, 1fr);
    }
  }
}

/*
 * Custom-font support — Ghost emits body classes for the picked typography
 * setting (e.g. "site-typography-modern-sans-serif"). Map them to CSS
 * variables that the rest of the theme can opt into.
 *
 * Defaults preserve the handoff (Space Grotesk + JetBrains Mono).
 */
:root {
  --gh-font-heading: "Space Grotesk", system-ui, sans-serif;
  --gh-font-body: "Space Grotesk", system-ui, sans-serif;
  --gh-font-mono: "JetBrains Mono", ui-monospace, monospace;
}

body.has-serif-title {
  --gh-font-heading: "Iowan Old Style", "Palatino", Georgia, serif;
}
body.has-serif-body {
  --gh-font-body: "Iowan Old Style", "Palatino", Georgia, serif;
}
body.has-sans-title {
  --gh-font-heading: "Space Grotesk", system-ui, sans-serif;
}
body.has-sans-body {
  --gh-font-body: "Space Grotesk", system-ui, sans-serif;
}