/* pages__blog__[slug] */
.blog-detail-container:not(.mc-s) {
    max-width: 760px;
    padding-bottom: 5rem;
  }

  .blog-header:not(.mc-s) {
    margin-top: 1rem;
    margin-bottom: 2.5rem;
  }

  .blog-title:not(.mc-s) {
    font-size: var(--type-page);
    line-height: 1.15;
    margin-block: 0.75rem 1.25rem;
  }

  /* Drugi głos typograficzny zaczyna się już w leadzie — historia czyta się
     jak tekst do czytania, nie jak interfejs. Szczegóły meta zostają w Montserrat. */
  .blog-lead-text:not(.mc-s) {
    font-family: var(--font-prose);
    font-size: 1.3rem;
    line-height: 1.55;
    color: var(--ink);
    margin-bottom: 1rem;
  }

  .blog-meta-author:not(.mc-s) {
    font-size: 0.9rem;
    color: var(--muted);
  }

  .blog-featured-image:not(.mc-s) {
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 16 / 9;
    margin-bottom: 3rem;
  }

  .blog-featured-image:not(.mc-s) img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .blog-content:not(.mc-s) {
    font-family: var(--font-prose);
    font-size: 1.15rem;
    line-height: 1.72;
    margin-bottom: 4rem;
  }

  /* Śródtytuły wracają do Montserrat — kontrast szeryf/bezszeryf buduje
     hierarchię wewnątrz artykułu bez dokładania kolejnego stopnia wielkości. */
  .blog-content:not(.mc-s) h2,
  .blog-content:not(.mc-s) h3 {
    margin-block: 2.5rem 0.75rem;
    font-family: "Montserrat", sans-serif;
  }

  .blog-content:not(.mc-s) blockquote {
    margin: 2rem 0;
    padding-left: 1.5rem;
    border-left: 3px solid var(--brick);
    font-size: 1.25rem;
    line-height: 1.5;
    font-style: italic;
    color: var(--ink);
  }

  .blog-content:not(.mc-s) a {
    color: var(--teal);
    text-underline-offset: 0.18em;
  }

  /* Karta jest flex-column, więc przycisk rozciągał się na całą szerokość
     i wyglądał jak pasek, nie jak przycisk. */
  .blog-cta-card:not(.mc-s) {
    align-items: flex-start;
    background: var(--paper);
    padding: 2rem 2.5rem;
    border-color: var(--teal);
    margin-bottom: 2.5rem;
  }

  .blog-cta-card:not(.mc-s) h2:not(.mc-s) {
    margin-bottom: 0.5rem;
  }

  .blog-cta-card:not(.mc-s) p:not(.mc-s) {
    margin-bottom: 1.25rem;
    color: var(--muted);
  }

  .blog-nav-back:not(.mc-s) {
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
  }