/* =====================================================
       Article-Specific Styles
       ===================================================== */

    /* Article Header */
    .article-header {
      position: relative;
      padding: calc(var(--navbar-height) + var(--space-3xl)) 0 var(--space-3xl);
      background: linear-gradient(160deg, #1B2B5B 0%, #162348 40%, #0D2B4A 70%, #0B3D5B 100%);
      overflow: hidden;
    }

    .article-header::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: var(--gradient-hero-overlay);
      z-index: 1;
    }

    .article-header::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-image:
        radial-gradient(circle at 20% 30%, rgba(14, 165, 160, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(212, 175, 55, 0.06) 0%, transparent 50%);
      z-index: 2;
    }

    .article-header .container {
      position: relative;
      z-index: 3;
      max-width: 820px;
    }

    .article-header__breadcrumb {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: var(--space-xl);
      font-size: var(--font-size-sm);
    }

    .article-header__breadcrumb a {
      color: rgba(255, 255, 255, 0.6);
      text-decoration: none;
      transition: color var(--transition-base);
    }

    .article-header__breadcrumb a:hover {
      color: var(--color-secondary-light);
    }

    .article-header__breadcrumb span {
      color: rgba(255, 255, 255, 0.35);
    }

    .article-header__breadcrumb-current {
      color: rgba(255, 255, 255, 0.8) !important;
    }

    .article-header__category {
      display: inline-block;
      padding: 5px 16px;
      border-radius: 50px;
      font-size: 13px;
      font-weight: 600;
      margin-bottom: var(--space-lg);
      backdrop-filter: blur(4px);
    }

    .article-header__title {
      font-size: var(--font-size-4xl);
      font-weight: 700;
      color: var(--color-bg-white);
      line-height: 1.25;
      margin-bottom: var(--space-xl);
    }

    .article-header__meta {
      display: flex;
      align-items: center;
      gap: var(--space-xl);
      flex-wrap: wrap;
    }

    .article-header__meta-item {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: var(--font-size-sm);
      color: rgba(255, 255, 255, 0.7);
    }

    .article-header__meta-item svg {
      width: 16px;
      height: 16px;
      opacity: 0.7;
    }

    /* Featured Image */
    .article-featured-image {
      max-width: 920px;
      margin: -40px auto 0;
      padding: 0 var(--space-lg);
      position: relative;
      z-index: 4;
    }

    .article-featured-image img {
      width: 100%;
      max-height: 400px;
      object-fit: cover;
      border-radius: var(--radius-xl);
      box-shadow: var(--shadow-2xl);
    }

    /* Article Content - Prose Styling */
    .article-content {
      max-width: 720px;
      margin: 0 auto;
      padding: var(--space-3xl) var(--space-lg);
    }

    .article-content h2 {
      font-size: var(--font-size-2xl);
      font-weight: 700;
      color: var(--color-primary);
      margin: var(--space-3xl) 0 var(--space-lg);
      padding-right: var(--space-lg);
      border-right: 4px solid var(--color-secondary);
      line-height: 1.3;
    }

    .article-content h2:first-child {
      margin-top: 0;
    }

    .article-content h3 {
      font-size: var(--font-size-xl);
      font-weight: 700;
      color: var(--color-primary);
      margin: var(--space-2xl) 0 var(--space-md);
      line-height: 1.4;
    }

    .article-content p {
      font-size: var(--font-size-md);
      color: var(--color-text);
      line-height: 1.8;
      margin-bottom: var(--space-lg);
    }

    .article-content a {
      color: var(--color-secondary);
      text-decoration: underline;
      text-underline-offset: 3px;
      transition: color var(--transition-base);
    }

    .article-content a:hover {
      color: var(--color-secondary-dark);
    }

    .article-content blockquote {
      margin: var(--space-2xl) 0;
      padding: var(--space-xl) var(--space-xl) var(--space-xl) var(--space-xl);
      border-right: 4px solid var(--color-secondary);
      background: var(--color-bg-light);
      border-radius: 0 var(--radius-md) var(--radius-md) 0;
      font-size: var(--font-size-base);
      color: var(--color-text);
      line-height: 1.8;
      font-style: normal;
    }

    .article-content ul,
    .article-content ol {
      margin: var(--space-lg) 0;
      padding-right: var(--space-xl);
    }

    .article-content ul {
      list-style: none;
    }

    .article-content ul li {
      position: relative;
      padding-right: var(--space-lg);
      margin-bottom: var(--space-sm);
      font-size: var(--font-size-md);
      color: var(--color-text);
      line-height: 1.8;
    }

    .article-content ul li::before {
      content: '';
      position: absolute;
      right: 0;
      top: 12px;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--color-secondary);
    }

    .article-content ol {
      list-style: none;
      counter-reset: article-counter;
    }

    .article-content ol li {
      position: relative;
      padding-right: calc(var(--space-lg) + 8px);
      margin-bottom: var(--space-sm);
      font-size: var(--font-size-md);
      color: var(--color-text);
      line-height: 1.8;
      counter-increment: article-counter;
    }

    .article-content ol li::before {
      content: counter(article-counter);
      position: absolute;
      right: 0;
      top: 3px;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: var(--gradient-secondary);
      color: var(--color-bg-white);
      font-size: 12px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .article-content strong {
      font-weight: 700;
      color: var(--color-primary);
    }

    .article-content img {
      width: 100%;
      border-radius: var(--radius-md);
      margin: var(--space-xl) 0;
    }

    .article-content code {
      background: var(--color-bg-light);
      border: 1px solid var(--color-border);
      padding: 2px 8px;
      border-radius: 4px;
      font-size: 0.9em;
      direction: ltr;
      display: inline-block;
    }

    .article-content pre {
      background: var(--color-bg-dark);
      color: rgba(255, 255, 255, 0.9);
      padding: var(--space-xl);
      border-radius: var(--radius-md);
      overflow-x: auto;
      margin: var(--space-xl) 0;
      direction: ltr;
      text-align: left;
      line-height: 1.6;
    }

    .article-content pre code {
      background: transparent;
      border: none;
      padding: 0;
      font-size: var(--font-size-sm);
      color: inherit;
    }

    /* CTA Box */
    .article-cta {
      max-width: 720px;
      margin: 0 auto var(--space-3xl);
      padding: 0 var(--space-lg);
    }

    .article-cta__box {
      position: relative;
      background: var(--color-bg-white);
      border-radius: var(--radius-xl);
      padding: var(--space-2xl) var(--space-3xl);
      text-align: center;
      box-shadow: var(--shadow-xl);
      border: 2px solid transparent;
      background-clip: padding-box;
      overflow: hidden;
    }

    .article-cta__box::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: var(--gradient-cta);
    }

    .article-cta__icon {
      width: 56px;
      height: 56px;
      border-radius: var(--radius-full);
      background: linear-gradient(135deg, rgba(14, 165, 160, 0.1) 0%, rgba(14, 165, 160, 0.05) 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto var(--space-lg);
      color: var(--color-secondary);
    }

    .article-cta__icon svg {
      width: 28px;
      height: 28px;
    }

    .article-cta__title {
      font-size: var(--font-size-xl);
      font-weight: 700;
      color: var(--color-primary);
      margin-bottom: var(--space-sm);
    }

    .article-cta__text {
      font-size: var(--font-size-base);
      color: var(--color-text-light);
      margin-bottom: var(--space-xl);
      line-height: 1.6;
    }

    /* Related Articles */
    .related-articles {
      padding: var(--space-4xl) 0;
      background: var(--color-bg-light);
    }

    .related-articles .section-title {
      margin-bottom: var(--space-2xl);
    }

    .related-articles__grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--space-xl);
    }

    /* Reuse blog card styles */
    .related-card {
      background: var(--color-bg-white);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-md);
      border: 1px solid var(--color-border);
      overflow: hidden;
      transition: all 0.3s ease;
      display: flex;
      flex-direction: column;
      text-decoration: none;
      color: inherit;
    }

    .related-card:hover {
      transform: translateY(-6px);
      box-shadow: var(--shadow-xl);
      border-color: rgba(14, 165, 160, 0.2);
    }

    .related-card__image-wrapper {
      position: relative;
      overflow: hidden;
      aspect-ratio: 16 / 9;
    }

    .related-card__image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.4s ease;
    }

    .related-card:hover .related-card__image {
      transform: scale(1.05);
    }

    .related-card__category {
      position: absolute;
      top: 12px;
      right: 12px;
      padding: 4px 12px;
      border-radius: 50px;
      font-size: 11px;
      font-weight: 600;
      backdrop-filter: blur(4px);
    }

    .related-card__body {
      padding: var(--space-lg);
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    .related-card__title {
      font-size: var(--font-size-base);
      font-weight: 700;
      color: var(--color-primary);
      margin-bottom: var(--space-sm);
      line-height: 1.4;
      transition: color var(--transition-base);
    }

    .related-card:hover .related-card__title {
      color: var(--color-secondary);
    }

    .related-card__date {
      font-size: var(--font-size-xs);
      color: var(--color-text-muted);
      margin-top: auto;
      padding-top: var(--space-md);
    }

    /* 404 State */
    .article-404 {
      min-height: 60vh;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: var(--space-3xl) var(--space-lg);
      background: var(--color-bg-light);
    }

    .article-404__icon {
      width: 100px;
      height: 100px;
      border-radius: var(--radius-full);
      background: rgba(229, 62, 62, 0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto var(--space-xl);
      color: var(--color-error);
    }

    .article-404__icon svg {
      width: 48px;
      height: 48px;
    }

    .article-404__title {
      font-size: var(--font-size-3xl);
      font-weight: 700;
      color: var(--color-primary);
      margin-bottom: var(--space-md);
    }

    .article-404__text {
      font-size: var(--font-size-lg);
      color: var(--color-text-light);
      margin-bottom: var(--space-2xl);
    }

    /* Responsive */
    @media (max-width: 1024px) {
      .related-articles__grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 768px) {
      .article-header {
        padding: calc(var(--navbar-height) + var(--space-xl)) 0 var(--space-2xl);
      }

      .article-header__title {
        font-size: var(--font-size-2xl);
      }

      .article-header__meta {
        gap: var(--space-md);
      }

      .article-featured-image {
        margin-top: -20px;
      }

      .article-featured-image img {
        max-height: 250px;
        border-radius: var(--radius-lg);
      }

      .article-content {
        padding: var(--space-2xl) var(--space-md);
      }

      .article-content h2 {
        font-size: var(--font-size-xl);
      }

      .article-content p,
      .article-content ul li,
      .article-content ol li {
        font-size: var(--font-size-base);
      }

      .article-cta__box {
        padding: var(--space-xl);
      }

      .related-articles__grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
      }

      .related-articles {
        padding: var(--space-2xl) 0;
      }
    }