.post-hero {
      background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-primary) 100%);
      color: var(--color-white);
      padding-top: var(--spacing-xl);
      padding-bottom: var(--spacing-lg);
    }

    .post-breadcrumb {
      margin-bottom: var(--spacing-md);
      font-size: 0.9rem;
      opacity: 0.8;
    }

    .post-breadcrumb a {
      color: var(--color-white);
      text-decoration: none;
    }

    .post-title {
      font-size: 2.5rem;
      font-weight: 800;
      margin-bottom: var(--spacing-md);
      line-height: 1.2;
    }

    .post-meta {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: var(--spacing-lg);
      flex-wrap: wrap;
      gap: var(--spacing-md);
    }

    .meta-left {
      display: flex;
      align-items: center;
      gap: var(--spacing-md);
      flex-wrap: wrap;
    }

    .post-date, .post-author {
      font-size: 0.95rem;
      opacity: 0.9;
    }

    .post-cover {
      margin-top: var(--spacing-xs);
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    }

    .post-cover img {
      width: 100%;
      height: 400px;
      object-fit: cover;
      display: block;
    }

    .post-body {
      font-size: 1.1rem;
      line-height: 1.7;
      margin-top: var(--spacing-md);
    }

    /* Blog Post H1 Styling */
    .post-body h1 {
        color: var(--color-primary);
        font-family: var(--font-display);
        font-size: 2.5rem;
        font-weight: 800;
        line-height: 1.2;
        margin: 0 0 var(--spacing-lg) 0;
        padding-bottom: var(--spacing-sm);
        border-bottom: 3px solid var(--color-primary);
        position: relative;
    }

    .post-body h1::after {
        content: '';
        position: absolute;
        bottom: -3px;
        left: 0;
        width: 80px;
        height: 3px;
        background: var(--color-accent);
    }

    @media (max-width: 768px) {
      .post-body h1 {
          font-size: 2rem;
          margin: var(--spacing-lg) 0 var(--spacing-md) 0;
      }
    }

    .post-body h2 {
      color: var(--color-primary);
      margin-top: var(--spacing-lg);
      margin-bottom: var(--spacing-md);
      font-size: 1.75rem;
      border-bottom: 2px solid var(--color-accent);
      padding-bottom: var(--spacing-xs);
    }

    .post-body h3 {
      color: var(--color-primary);
      margin-bottom: var(--spacing-sm);
      font-size: 1.4rem;
    }

    .post-body p {
      margin-bottom: var(--spacing-md);
      color: var(--color-gray-800);
    }

    /* Blog CTA */
    .project-cta {
      text-align: center;
    }

    .cta-content{
      min-width: 100%;
    }

    .cta-content h2 {
      color: var(--color-primary);
      margin-bottom: var(--spacing-sm);
    }

    .cta-content p {
      min-width: 100%;
      font-size: 1.2rem;
      margin-bottom: var(--spacing-lg);
      max-width: 500px;
      margin-left: auto;
      margin-right: auto;
    }

    .cta-actions {
      margin-top: var(--spacing-md);
      display: flex;
      gap: var(--spacing-sm);
      justify-content: center;
      flex-wrap: wrap;
    }

    /* Mobile styles */
    @media (max-width: 768px) {
      .post-title {
        font-size: 2rem;
      }
      
      .post-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
      }
      
      .post-cover img {
        height: 300px;
      }

      .cta-actions {
        flex-direction: column;
        align-items: center;
      }
      
      .cta-actions .btn {
        width: 100%;
        max-width: 280px;
      }
    }