/* ── Blog section designs ──────────────────────────────────────────────────
   SOURCE FILE. Published as /assets/css/blog-sections.css by the console when a post is
   published (bl_sync_css in blog-lib.php); edit it here, then deploy the portal.
   The designs the console's blog editor offers for each section of a post
   (automation/portal/blog-lib.php renders them). They sit inside
   .sp-article from service-page.css and use its tokens, so a section reads
   like the rest of the article. Scoped `.sp .sp-article .bs-*` (0,3,0) so
   they win over the article's own ul/ol/h3/p rules without !important. */

.sp .sp-article .bs-sec{margin:0 0 8px;}
.sp .sp-article .bs-intro{margin:0 0 22px;}

/* Numbered steps: a vertical rail of numbered cards */
.sp .sp-article .bs-steps{list-style:none; margin:0 0 28px; padding:0; display:grid; gap:14px; counter-reset:bs;}
.sp .sp-article .bs-steps > li{position:relative; margin:0; display:grid; grid-template-columns:52px minmax(0,1fr); gap:16px; align-items:start;
  padding:18px 20px; background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:0 18px 40px -36px rgba(11,14,18,.55);}
.sp .sp-article .bs-steps > li:not(:last-child)::after{content:""; position:absolute; left:45px; top:100%; width:2px; height:14px; background:linear-gradient(var(--accent),rgba(10,110,158,.15));}
.sp .sp-article .bs-steps__n{display:flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:14px;
  background:#E6F1F8; color:var(--accent); font-family:var(--mono); font-size:15px; font-weight:500; letter-spacing:.04em;}
.sp .sp-article .bs-steps h3{margin:4px 0 6px; font-size:18px;}
.sp .sp-article .bs-steps p{margin:0; font-size:16px; line-height:1.65;}

/* Cards grid */
.sp .sp-article .bs-cards{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:0 0 28px;}
@media (max-width:640px){ .sp .sp-article .bs-cards{grid-template-columns:minmax(0,1fr);} }
.sp .sp-article .bs-card{display:flex; flex-direction:column; padding:20px 20px 18px; background:#fff; border:1px solid var(--line);
  border-radius:16px; box-shadow:0 18px 40px -36px rgba(11,14,18,.55); transition:transform .25s ease, box-shadow .25s ease;}
.sp .sp-article .bs-card:hover{transform:translateY(-2px); box-shadow:0 24px 50px -34px rgba(11,14,18,.6);}
.sp .sp-article .bs-card__k{width:34px; height:4px; border-radius:4px; background:var(--accent); margin:0 0 14px;}
.sp .sp-article .bs-card h3{margin:0 0 8px; font-size:18px;}
.sp .sp-article .bs-card p{margin:0 0 12px; font-size:15.5px; line-height:1.62;}
.sp .sp-article .bs-card__more{margin-top:auto; font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; text-decoration:none;}

/* Checklist */
.sp .sp-article .bs-check{list-style:none; margin:0 0 26px; padding:0; display:grid; gap:10px;}
.sp .sp-article .bs-check > li{position:relative; margin:0; padding:12px 16px 12px 50px; background:var(--tint); border-radius:12px;}
.sp .sp-article .bs-check > li::before{content:""; position:absolute; left:14px; top:13px; width:22px; height:22px; border-radius:50%; background:var(--accent)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat;}

/* Before / after */
.sp .sp-article .bs-ba{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:0 0 28px;}
@media (max-width:640px){ .sp .sp-article .bs-ba{grid-template-columns:minmax(0,1fr);} }
.sp .sp-article .bs-ba__col{padding:20px 20px 8px; border-radius:16px; border:1px solid var(--line); background:#fff;}
.sp .sp-article .bs-ba__col--before{background:#FBF4F2; border-color:rgba(180,67,43,.18);}
.sp .sp-article .bs-ba__col--after{background:#F0F7F3; border-color:rgba(18,128,90,.2);}
.sp .sp-article .bs-ba__h{margin:0 0 12px; font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;}
.sp .sp-article .bs-ba__col--before .bs-ba__h{color:var(--bad);}
.sp .sp-article .bs-ba__col--after .bs-ba__h{color:var(--ok);}
.sp .sp-article .bs-ba ul{list-style:none; padding:0; margin:0 0 12px;}
.sp .sp-article .bs-ba li{position:relative; padding-left:22px; font-size:15.5px; line-height:1.6;}
.sp .sp-article .bs-ba li::before{position:absolute; left:0; top:0; font-weight:700;}
.sp .sp-article .bs-ba__col--before li::before{content:"\00D7"; color:var(--bad);}
.sp .sp-article .bs-ba__col--after li::before{content:"\2713"; color:var(--ok);}

/* Callout */
.sp .sp-article .bs-callout{margin:0 0 26px; padding:18px 22px; border-radius:16px; border:1px solid rgba(10,110,158,.2); background:#EEF6FB;}
.sp .sp-article .bs-callout--warning{background:#FDF6EA; border-color:rgba(180,83,9,.25);}
.sp .sp-article .bs-callout--note{background:var(--tint); border-color:var(--line-2);}
.sp .sp-article .bs-callout__h{display:flex; align-items:center; gap:8px; margin:0 0 6px; font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent);}
.sp .sp-article .bs-callout--warning .bs-callout__h{color:#B45309;}
.sp .sp-article .bs-callout--note .bs-callout__h{color:var(--muted);}
.sp .sp-article .bs-callout__h::before{content:""; width:8px; height:8px; border-radius:50%; background:currentColor;}
.sp .sp-article .bs-callout p{margin:0 0 8px;}
.sp .sp-article .bs-callout p:last-child{margin:0;}

/* Quote */
.sp .sp-article .bs-quote{margin:8px 0 30px; padding:26px 28px; border-radius:18px; background:var(--dark); color:#F2F6FA; position:relative; overflow:hidden;}
.sp .sp-article .bs-quote::before{content:"\201C"; position:absolute; right:18px; top:-26px; font-family:var(--disp); font-size:160px; line-height:1; color:rgba(125,211,252,.16);}
.sp .sp-article .bs-quote blockquote{margin:0; padding:0; border:0; background:none; font-family:var(--disp); font-weight:800; font-size:clamp(20px,2.2vw,25px); line-height:1.35; color:#fff;}
.sp .sp-article .bs-quote figcaption{margin-top:14px; font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:#7DD3FC;}

/* Call to action band */
.sp .sp-article .bs-cta{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px 24px; margin:8px 0 30px; padding:24px 26px;
  border-radius:18px; background:linear-gradient(135deg,#0A6E9E,#0B4F72); color:#fff;}
.sp .sp-article .bs-cta .bs-cta__h{margin:0 0 4px; font-family:var(--disp); font-weight:800; font-size:21px; line-height:1.25; color:#fff;}
.sp .sp-article .bs-cta p:not(.bs-cta__h){margin:0; color:#D5E9F5; font-size:15.5px;}
.sp .sp-article .bs-cta .sp-btn{flex:none; text-decoration:none;}

/* Image */
.sp .sp-article .bs-figure{margin:6px 0 30px;}
.sp .sp-article .bs-figure img{display:block; width:100%; height:auto; border-radius:16px; border:1px solid var(--line);}
.sp .sp-article .bs-figure figcaption{margin-top:10px; font-size:14px; color:var(--muted);}

/* Key points: a tinted two-column list of short facts */
.sp .sp-article .bs-points{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 14px; margin:0 0 28px; padding:0; list-style:none;}
@media (max-width:640px){ .sp .sp-article .bs-points{grid-template-columns:minmax(0,1fr);} }
.sp .sp-article .bs-points > li{margin:0; padding:14px 16px; border-radius:14px; background:#fff; border:1px solid var(--line); border-top:3px solid var(--accent);}
.sp .sp-article .bs-points strong{display:block; margin-bottom:2px;}
.sp .sp-article .bs-points span{font-size:15px; line-height:1.55;}