/* Scoped article polish. Keep this in the site's first brand layer so it can
   override older layered article rules without changing non-editorial pages. */
@layer pcba-enterprise-color {
  body.page-blog-detail .blog-detail {
    width: 100% !important;
    max-width: none !important;
    margin-inline: auto !important;
    box-sizing: border-box !important;
    background: #fff !important;
  }

  body.page-blog-detail #article-container {
    color: #252927 !important;
    background: #fff !important;
  }

  body.page-blog-detail #article-container .article-content,
  body.page-blog-detail #article-container .article-content p,
  body.page-blog-detail #article-container .article-content li {
    color: #424747 !important;
    line-height: 1.65 !important;
  }

  body.page-blog-detail #article-container .article-content > p {
    margin: 0 0 14px !important;
  }

  body.page-blog-detail #article-container .article-content > h2 {
    color: #252927 !important;
    font-size: clamp(22px, 2.4vw, 27px) !important;
    line-height: 1.25 !important;
    margin: 22px 0 8px !important;
  }

  body.page-blog-detail #article-container .article-related h2,
  body.page-blog-detail #article-container .article-faq h2,
  body.page-blog-detail #article-container .article-faq h3,
  body.page-blog-detail #article-container .article-decision-path strong {
    color: #252927 !important;
    -webkit-text-fill-color: #252927 !important;
  }

  body.page-blog-detail #article-container .article-related,
  body.page-blog-detail #article-container .article-faq {
    padding: 18px !important;
    margin-top: 18px !important;
  }

  body.page-blog-detail #article-container .article-related h2,
  body.page-blog-detail #article-container .article-faq h2 {
    margin: 4px 0 12px !important;
    font-size: 22px !important;
    line-height: 1.3 !important;
  }

  body.page-blog-detail #article-container .article-related-grid {
    gap: 10px !important;
    margin: 14px 0 !important;
  }

  body.page-blog-detail #article-container .article-related-link {
    color: #252927 !important;
    background: #f5f7f7 !important;
    border: 1px solid #dfe5e4 !important;
    border-radius: 12px !important;
    padding: 14px 16px !important;
    text-decoration: none !important;
    transition: background-color .18s ease, border-color .18s ease;
  }

  body.page-blog-detail #article-container .article-related-link strong {
    color: #252927 !important;
    -webkit-text-fill-color: #252927 !important;
    line-height: 1.4 !important;
  }

  body.page-blog-detail #article-container .article-related-link span,
  body.page-blog-detail #article-container .article-faq-item p {
    color: #555b5f !important;
    -webkit-text-fill-color: #555b5f !important;
    line-height: 1.55 !important;
  }

  body.page-blog-detail #article-container .article-decision-path {
    margin: 18px 0 !important;
    padding: 16px 18px !important;
    background: #f1f6f5 !important;
    border: 1px solid #dce8e6 !important;
    border-radius: 14px !important;
  }

  body.page-blog-detail #article-container .article-decision-path a {
    color: #08675f !important;
    -webkit-text-fill-color: #08675f !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    font-weight: 600 !important;
  }

  body.page-blog-detail #article-container .article-faq-item {
    margin-top: 10px !important;
    padding-top: 10px !important;
    border-top-color: #e5e9e8 !important;
  }

  body.page-blog-detail #article-container .article-faq-item h3 {
    font-size: 17px !important;
    line-height: 1.4 !important;
    margin: 0 0 6px !important;
  }

  body.page-blog-detail #article-container .article-faq-item p {
    margin: 0 !important;
  }

  body.page-blog-detail #article-container .article-cta {
    margin-top: 18px !important;
    padding: 22px !important;
    background: #202624 !important;
    border-radius: 16px !important;
  }

  body.page-blog-detail #article-container .article-cta h2,
  body.page-blog-detail #article-container .article-cta p {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
  }

  body.page-blog-detail #article-container .article-cta p {
    line-height: 1.55 !important;
    margin: 10px 0 0 !important;
  }

  body.page-blog-detail #article-container .article-cta > div {
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
  }

  body.page-blog-detail #article-container a:not(.article-cta-button) {
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
  }

  @media (max-width: 640px) {
    body.page-blog-detail #article-container .article-related,
    body.page-blog-detail #article-container .article-faq {
      padding: 14px !important;
    }

    body.page-blog-detail #article-container .article-related-link {
      padding: 13px 14px !important;
    }

    body.page-blog-detail #article-container .article-cta {
      padding: 18px !important;
    }
  }

  @media (max-width: 900px) {
    body.page-blog-detail #article-container .article-cta {
      grid-template-columns: minmax(0, 1fr) !important;
      gap: 12px !important;
    }

    body.page-blog-detail #article-container .article-cta > div,
    body.page-blog-detail #article-container .article-cta .article-cta-button {
      grid-column: 1 !important;
      justify-self: start !important;
    }

    body.page-blog-detail #article-container .article-cta h2 {
      margin: 0 !important;
      font-size: 24px !important;
      line-height: 1.25 !important;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    body.page-blog-detail #article-container .article-related-link {
      transition: none;
    }
  }
}

/* Editorial hierarchy pass: make the reading column calm and the supporting
   links feel like one deliberate set rather than a wall of equal-weight cards. */
@layer pcba-enterprise-color {
  body.page-blog-detail #article-container {
    max-width: 960px !important;
    padding: clamp(24px, 4vw, 44px) clamp(22px, 4vw, 48px) !important;
  }

  body.page-blog-detail #article-container .blog-category {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 26px !important;
    padding: 4px 10px !important;
    border: 1px solid #dce8e5 !important;
    border-radius: 999px !important;
    background: #f1f7f5 !important;
    color: #17675f !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .08em !important;
  }

  body.page-blog-detail #article-container .article-title {
    max-width: 34ch !important;
    margin: 14px 0 16px !important;
    color: #202624 !important;
    font-size: clamp(32px, 4vw, 44px) !important;
    line-height: 1.12 !important;
    letter-spacing: -.035em !important;
    text-wrap: balance;
  }

  body.page-blog-detail #article-container .article-back,
  body.page-blog-detail #article-container .article-meta,
  body.page-blog-detail #article-container .article-meta time,
  body.page-blog-detail #article-container .article-meta span {
    opacity: 1 !important;
    filter: none !important;
    color: #58625f !important;
    -webkit-text-fill-color: #58625f !important;
  }

  body.page-blog-detail #article-container .article-back {
    color: #126e64 !important;
    -webkit-text-fill-color: #126e64 !important;
    font-weight: 600 !important;
  }

  body.page-blog-detail #article-container .article-meta {
    margin-bottom: 24px !important;
    padding-bottom: 18px !important;
    border-bottom: 1px solid #e7ecea !important;
    color: #68716e !important;
  }

  body.page-blog-detail #article-container .article-cover {
    max-height: 410px !important;
    margin-bottom: 30px !important;
    border: 1px solid #e7ecea !important;
    border-radius: 16px !important;
    object-fit: cover !important;
  }

  body.page-blog-detail #article-container .article-content > p,
  body.page-blog-detail #article-container .article-content > h2,
  body.page-blog-detail #article-container .article-content > ul,
  body.page-blog-detail #article-container .article-content > ol {
    width: min(100%, 70ch) !important;
    margin-inline: auto !important;
  }

  body.page-blog-detail #article-container .article-content > p {
    font-size: 17px !important;
    line-height: 1.72 !important;
    margin-bottom: 16px !important;
  }

  body.page-blog-detail #article-container .article-content > p:first-child {
    color: #313936 !important;
    font-size: 18px !important;
    line-height: 1.7 !important;
  }

  body.page-blog-detail #article-container .article-content > h2 {
    box-sizing: border-box !important;
    margin-top: 30px !important;
    margin-bottom: 10px !important;
    padding-left: 13px !important;
    border-left: 3px solid #dcae38 !important;
    font-size: clamp(21px, 2.3vw, 25px) !important;
    line-height: 1.32 !important;
  }

  body.page-blog-detail #article-container .article-related,
  body.page-blog-detail #article-container .article-faq {
    padding: clamp(18px, 2.6vw, 26px) !important;
    border: 1px solid #e2e9e7 !important;
    border-radius: 18px !important;
    background: #f8faf9 !important;
  }

  body.page-blog-detail #article-container .article-related-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)) !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  body.page-blog-detail #article-container .article-related-link {
    min-height: 100% !important;
    box-sizing: border-box !important;
    border-radius: 13px !important;
    background: #fff !important;
  }

  body.page-blog-detail #article-container .article-related:not(.article-guide-links) {
    background: #f1f6f5 !important;
  }

  body.page-blog-detail #article-container .article-related-link strong {
    font-size: 15px !important;
  }

  body.page-blog-detail #article-container .article-related-link span {
    font-size: 14px !important;
  }

  body.page-blog-detail #article-container .article-faq-item {
    margin-top: 12px !important;
    padding-top: 12px !important;
  }

  body.page-blog-detail #article-container .article-faq-item h3 {
    color: #28312e !important;
    font-size: 16px !important;
  }

  body.page-blog-detail #article-container .article-faq-item p {
    font-size: 15px !important;
  }

  body.page-blog-detail #article-container .article-decision-path {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 12px 18px !important;
    padding: 14px 18px !important;
    border-radius: 14px !important;
  }

  body.page-blog-detail #article-container .article-decision-path > div {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px 18px !important;
  }

  body.page-blog-detail #article-container .article-cta {
    padding: 24px !important;
    border: 1px solid #343c39 !important;
    border-radius: 18px !important;
  }

  @media (max-width: 640px) {
    body.page-blog-detail #article-container {
      padding-inline: 18px !important;
    }

    body.page-blog-detail #article-container .article-title {
      font-size: clamp(29px, 8vw, 36px) !important;
    }

    body.page-blog-detail #article-container .article-decision-path {
      align-items: flex-start !important;
      flex-direction: column !important;
    }

    body.page-blog-detail #article-container .article-decision-path > div {
      flex-direction: column !important;
      align-items: flex-start !important;
    }
  }
}