.blog-post-page {
  .container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 var(--space-xl);
  }

  .blog-content {
    h2 {
      margin-top: var(--space-xxl);
      margin-bottom: var(--space-md);
      font-size: var(--font-xl);
      line-height: 1.3;
    }

    h3 {
      margin-top: var(--space-xl);
      margin-bottom: var(--space-md);
      font-size: var(--font-lg);
    }

    p {
      margin-bottom: var(--space-lg);
      color: var(--color-text-light);
      line-height: 1.8;
    }

    ul,
    ol {
      margin-bottom: var(--space-lg);
      padding-left: 1.4rem;
    }

    li {
      margin-bottom: var(--space-sm);
      color: var(--color-text-light);
      line-height: 1.8;
    }

    a {
      color: var(--color-primary);

      &:hover {
        text-decoration: underline;
      }
    }

    strong {
      color: var(--color-text);
      font-weight: var(--font-semibold);
    }

    hr {
      margin: var(--space-xxl) 0;
      border: 0;
      border-top: 1px solid var(--color-border);
    }

    blockquote {
      margin: var(--space-xl) 0;
      padding-left: var(--space-lg);
      border-left: 3px solid var(--color-primary);
      color: var(--color-text-light);
      font-style: italic;
      line-height: 1.7;
    }

    img {
      display: block;
      max-width: 100%;
      border-radius: var(--radius-lg);
      margin: var(--space-xxl) auto;
    }

    code {
      padding: 2px 6px;
      border-radius: var(--radius-sm);
      background: var(--hover-bg);
      font-size: 0.9em;
    }

    pre {
      margin: var(--space-xl) 0;
      padding: var(--space-lg);
      overflow-x: auto;
      border-radius: var(--radius-lg);
      background: var(--color-surface);
      border: 1px solid var(--color-border);

      code {
        padding: 0;
        background: none;
      }
    }
  }
}

.blog-post {
  padding: 100px 0 80px;
}

.blog-header {
  margin-bottom: 56px;

  .badge {
    margin-bottom: var(--space-lg);
  }

  h1 {
    font-size: 52px;
    line-height: 1.05;
    letter-spacing: -0.03em;
    margin-bottom: var(--space-lg);

    @media (max-width: 768px) {
      font-size: 38px;
    }
  }
}

.blog-excerpt {
  max-width: 720px;
  font-size: var(--font-lg);
  line-height: 1.7;
  color: var(--color-text-light);
  margin-bottom: var(--space-xl);
}

.blog-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;

  time {
    font-size: var(--font-sm);
    color: var(--color-text-light);
  }
}

.blog-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;

  span {
    padding: 6px 10px;
    border-radius: var(--radius-2xl);
    border: 1px solid var(--color-border);
    font-size: var(--font-xs);
    color: var(--color-text-light);
  }
}