/* ProcessBI blog styles; the white editorial theme is defined below. */

/* ── Blog post hero ── */
.blog-post-hero {
  padding: 130px 24px 64px;
  position: relative;
}
.blog-post-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(0,194,255,0.07) 0%, transparent 65%);
  pointer-events: none;
}

/* ── Breadcrumb ── */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  color: #8BB4CC;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.breadcrumb a { color: #8BB4CC; text-decoration: none; transition: color 0.2s; }
.breadcrumb a:hover { color: #00C2FF; }
.breadcrumb-sep { color: rgba(0,194,255,0.4); font-size: 0.75rem; }

/* ── Post meta ── */
.post-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.meta-tag {
  display: inline-block;
  background: rgba(0,194,255,0.1);
  border: 1px solid rgba(0,194,255,0.25);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 10px;
  font-weight: 700;
  color: #00C2FF;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.meta-date, .meta-read { font-size: 0.8125rem; color: #8BB4CC; }
.meta-sep { color: rgba(0,194,255,0.3); }

/* ── Article wrapper ── */
.blog-article { padding: 60px 0 80px; }

/* ── Article body ── */
.article-body {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 24px;
}
.article-body p {
  font-size: 1.0625rem;
  line-height: 1.85;
  color: #CBD5E1;
  margin-bottom: 1.5rem;
}
.article-body h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-top: 2.75rem;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #00C2FF;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.article-body h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: #E2E8F0;
  margin-top: 1.75rem;
  margin-bottom: 0.6rem;
  letter-spacing: -0.015em;
}
.article-body h4 {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #00C2FF;
  margin-top: 1.4rem;
  margin-bottom: 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Lists */
.article-body ul, .article-body ol {
  margin: 0.5rem 0 1.5rem 1.5rem;
  color: #CBD5E1;
}
.article-body li {
  font-size: 1.0625rem;
  line-height: 1.8;
  margin-bottom: 0.5rem;
}
.article-body ul li::marker { color: #00C2FF; }
.article-body ol li::marker { color: #00C2FF; font-weight: 600; }

/* ── Pull quote ── */
.pull-quote {
  border-left: 3px solid #00C2FF;
  padding: 14px 22px;
  margin: 2rem 0;
  font-style: italic;
  font-size: 1.125rem;
  line-height: 1.7;
  color: #E2E8F0;
  background: rgba(0,194,255,0.04);
  border-radius: 0 8px 8px 0;
}

/* ── Info box ── */
.info-box {
  background: rgba(0,194,255,0.05);
  border: 1px solid rgba(0,194,255,0.2);
  border-radius: 10px;
  padding: 20px 24px;
  margin: 1.75rem 0;
}
.info-box-title {
  font-size: 0.6875rem;
  font-weight: 700;
  color: #00C2FF;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 8px;
}
.info-box p { margin-bottom: 0 !important; }
.info-box a { color: #00C2FF; }

/* ── Blog callout ── */
.blog-callout {
  background: rgba(0,194,255,0.05);
  border-left: 4px solid #00C2FF;
  border-radius: 0 12px 12px 0;
  padding: 20px 24px;
  margin: 2rem 0;
}
.blog-callout p { font-size: 0.9375rem; color: #CBD5E1; margin: 0; line-height: 1.7; }
.blog-callout a { color: #00C2FF; text-decoration: underline; text-decoration-color: rgba(0,194,255,0.4); }
.blog-callout strong { color: #FFFFFF; }

/* ── Blog card category ── */
.blog-card-category {
  display: inline-block;
  background: rgba(0,194,255,0.12);
  border: 1px solid rgba(0,194,255,0.3);
  border-radius: 20px;
  padding: 4px 14px;
  font-size: 10px;
  font-weight: 700;
  color: #00C2FF;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* ── Related services section ── */
.related-services {
  padding: 72px 24px;
  border-top: 1px solid rgba(0,194,255,0.1);
  background: rgba(0,194,255,0.025);
}
.related-services-label {
  font-size: 0.6875rem;
  font-weight: 700;
  color: #00C2FF;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-bottom: 12px;
}
.related-services h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 2rem;
  letter-spacing: -0.02em;
}

/* ── Article table ── */
.table-wrap { overflow-x: auto; margin: 2rem 0; }
.article-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.article-table th {
  background: rgba(0,194,255,0.1);
  padding: 12px 16px;
  text-align: left;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #FFFFFF;
  border-bottom: 2px solid rgba(0,194,255,0.3);
}
.article-table td {
  padding: 10px 16px;
  font-size: 0.875rem;
  color: #CBD5E1;
  border-bottom: 1px solid rgba(0,194,255,0.08);
}
.article-table tr:last-child td { border-bottom: none; }
.article-table tr:hover td { background: rgba(0,194,255,0.04); }

/* White editorial system shared with the main ProcessBI site. */
.white-editorial{background:#fff!important;color:#13243a!important}
.white-editorial .blog-index-hero,.white-editorial .blog-post-hero{background:linear-gradient(135deg,#f3f9fc 0%,#fff 62%,#eef8f7 100%);border-bottom:1px solid #d8e6ef}
.white-editorial .blog-index-hero{padding:146px 24px 74px}
.white-editorial .blog-index-hero h1,.white-editorial .blog-post-hero h1,.white-editorial .related-services h2,.white-editorial .blog-cta h2{color:#10253e!important}
.white-editorial .blog-index-hero p,.white-editorial .blog-post-hero p,.white-editorial .meta-date,.white-editorial .meta-read,.white-editorial .breadcrumb,.white-editorial .breadcrumb a{color:#526d83!important}
.white-editorial .article-body p,.white-editorial .article-body li,.white-editorial .blog-card-excerpt,.white-editorial .article-table td,.white-editorial .blog-callout p{color:#324e65!important}
.white-editorial .article-body h2,.white-editorial .article-body h3,.white-editorial .article-body h4,.white-editorial .blog-card-title,.white-editorial .blog-callout strong{color:#10253e!important}
.white-editorial .blog-card{background:#fff;border:1px solid #d8e6ef;border-radius:16px;padding:26px;box-shadow:0 10px 30px rgba(24,60,88,.07);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.white-editorial .blog-card:hover{transform:translateY(-3px);border-color:#94c8dc;box-shadow:0 16px 36px rgba(24,60,88,.12)}
.white-editorial .blog-card-category,.white-editorial .meta-tag{background:#eaf7fa;border-color:#b9e1e8;color:#087a8c}
.white-editorial .blog-card-meta{color:#60798c}.white-editorial .blog-read-more,.white-editorial a{color:#075fa3}
.white-editorial .pull-quote,.white-editorial .info-box,.white-editorial .blog-callout{background:#f0f8fa;color:#23445a;border-color:#2aa3b3}
.white-editorial .article-table th{background:#eaf4f8;color:#15354d;border-color:#9fc8d9}.white-editorial .article-table td{border-color:#dbe8ef}
.white-editorial .related-services{background:#f7fafc;border-color:#dbe8ef}.white-editorial .blog-cta{background:linear-gradient(135deg,#edf7fa,#f7fbfc)!important;border-top:1px solid #d8e6ef}.white-editorial .blog-cta p{color:#526d83!important}
.insights-list-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:14px}.insights-filters{display:flex;gap:8px;flex-wrap:wrap}.insights-filters button{border:1px solid #bed4e2;background:#fff;color:#24475f;border-radius:999px;padding:8px 13px;font-size:.78rem;font-weight:700;cursor:pointer}.insights-filters button[aria-pressed=true]{background:#0f618f;color:#fff;border-color:#0f618f}.insights-filter-status{margin:0 0 22px;color:#60798c;font-size:.84rem}[data-insights-card][hidden]{display:none!important}
@media(max-width:720px){.white-editorial .blog-index-hero{padding-top:122px}.insights-list-head{display:block}.insights-filters{margin-top:14px}}
@media(prefers-reduced-motion:reduce){.white-editorial .blog-card{transition:none}.white-editorial .blog-card:hover{transform:none}}

/* Collection layout is scoped so existing article layouts stay unchanged. */
.blog-collection .blog-shell,.blog-collection .blog-hero-inner{width:100%;max-width:1160px;margin-inline:auto;min-width:0}
.blog-collection .blog-eyebrow,.blog-collection .section-label{font:700 12px/1.5 Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#075fa3}
.blog-collection .blog-hero-title{font:700 clamp(36px,4.6vw,64px)/1.08 'Space Grotesk',sans-serif;letter-spacing:-.04em;max-width:24ch;margin:18px 0 24px;text-wrap:balance;overflow-wrap:break-word}
.blog-collection .blog-hero-lede{max-width:70ch;font-size:clamp(17px,1.5vw,20px);line-height:1.7;color:#324e65;margin:0}
.blog-collection .blog-section{padding:48px 24px 32px}
.blog-collection .blog-section-heading{margin-bottom:16px}
.blog-collection .blog-feature{margin-bottom:48px}
.blog-collection .blog-card{display:flex;flex-direction:column;gap:16px;min-width:0;height:100%;text-decoration:none}
.blog-collection .blog-card-category{align-self:flex-start;width:fit-content;max-width:100%;line-height:1.5;overflow-wrap:break-word}
.blog-collection .blog-card-title{font:600 clamp(21px,1.8vw,25px)/1.25 'Space Grotesk',sans-serif;letter-spacing:-.02em;margin:0;overflow-wrap:break-word}
.blog-collection .blog-card-excerpt{font-size:15px;line-height:1.7;margin:0;overflow-wrap:break-word}
.blog-collection .blog-card-footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:auto;padding-top:18px;border-top:1px solid #d8e6ef}
.blog-collection .blog-card-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:12px;line-height:1.5}
.blog-collection .blog-read-more{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;white-space:nowrap}
.blog-collection .blog-read-more span{transition:transform .2s ease}
.blog-collection .blog-card:hover .blog-read-more span{transform:translateX(3px)}
.blog-collection .blog-feature .blog-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:40px;row-gap:16px;padding:32px;border-top:3px solid #087e83}
.blog-collection .blog-feature .blog-card-category{grid-column:1}
.blog-collection .blog-feature .blog-card-title{grid-column:1;grid-row:2;font-size:clamp(26px,2.6vw,34px);max-width:26ch}
.blog-collection .blog-feature .blog-card-excerpt{grid-column:2;grid-row:1 / span 2;align-self:center;font-size:17px}
.blog-collection .blog-feature .blog-card-footer{grid-column:1 / -1;margin-top:8px}
.blog-collection .blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:stretch}
.blog-collection .insights-list-head{align-items:flex-start;flex-wrap:wrap}
.blog-collection .insights-list-head>.section-label{padding-top:9px}
.blog-collection .insights-filters{min-width:0}
.blog-collection .insights-filters button{min-height:44px;line-height:1.4}
.blog-collection .topics-section{padding:0 24px 32px}
.blog-collection .topics-panel{padding:24px 0;border-top:1px solid #d8e6ef}
.blog-collection .topic-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.blog-collection .topic-list .tag-badge{margin:0;white-space:normal;line-height:1.5}
.blog-collection .blog-contact{padding:0 24px 48px}
.blog-collection .blog-contact p{margin:0;font-size:15px;line-height:1.7}
.blog-collection .blog-contact a{display:inline-block;font-weight:600;text-decoration:underline;text-underline-offset:4px}
@media(max-width:1024px){.blog-collection .blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){
  .blog-collection .blog-feature .blog-card{grid-template-columns:minmax(0,1fr);padding:24px}
  .blog-collection .blog-feature .blog-card>*{grid-column:1;grid-row:auto}
  .blog-collection .blog-feature .blog-card-title{max-width:none}
  .blog-collection .blog-feature .blog-card-excerpt{font-size:16px}
  .blog-collection .blog-feature{margin-bottom:36px}
}
@media(max-width:640px){
  .white-editorial.blog-collection .blog-index-hero{padding-inline:20px}
  .blog-collection .blog-section{padding:32px 20px 24px}
  .blog-collection .blog-grid{grid-template-columns:minmax(0,1fr);gap:20px}
  .blog-collection .blog-card,.blog-collection .blog-feature .blog-card{padding:22px}
  .blog-collection .topics-section{padding:0 20px 24px}
  .blog-collection .blog-contact{padding:0 20px 36px}
}
@media(prefers-reduced-motion:reduce){.blog-collection .blog-read-more span{transition:none}.blog-collection .blog-card:hover .blog-read-more span{transform:none}}