/* ============================================================
   ConstruBIM — blog / editorial layer
   Sits on top of theme-apple.css. Used by blog.html (index)
   and every blog-*.html post.
   ============================================================ */

.bl{
  --bl-ink:#1D1D1F;
  --bl-secondary:#6E6E73;
  --bl-muted:#86868B;
  --bl-hairline:#D2D2D7;
  --bl-paper:#F5F5F7;
  --bl-accent:#0066CC;
  --bl-accent-hover:#0055B3;
  --bl-dark:#1D1D1F;
  --bl-dark-border:#424245;
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Helvetica Neue',Helvetica,Arial,sans-serif;
  color:var(--bl-ink);
  background:#fff;
  overflow-x:hidden;
}
.bl *{ box-sizing:border-box; }
.bl-wrap{ max-width:1280px; margin:0 auto; padding:0 28px; }

/* ---------- Index hero ---------- */
.bl-hero{ max-width:1280px; margin:0 auto; padding:70px 28px 44px; }
.bl-eyebrow{ font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
             color:var(--bl-accent); margin-bottom:20px; }
.bl-eyebrow a{ color:inherit; text-decoration:none; }
.bl-eyebrow a:hover{ text-decoration:underline; }
.bl-hero h1{ font-weight:600; font-size:clamp(38px,5.6vw,66px); line-height:1.0;
             letter-spacing:-.025em; margin:0 0 18px; max-width:16ch; }
.bl-hero h1 span{ color:var(--bl-accent); }
.bl-hero p{ font-size:17px; line-height:1.6; color:var(--bl-secondary); margin:0; max-width:60ch; }

/* ---------- Post cards ---------- */
.bl-list{ max-width:1280px; margin:0 auto; padding:20px 28px 80px; }
.bl-card{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1.35fr); gap:40px;
  align-items:center; padding:38px 0; border-top:1px solid var(--bl-hairline);
  text-decoration:none; color:inherit;
}
.bl-card:last-child{ border-bottom:1px solid var(--bl-hairline); }
.bl-card-media{ aspect-ratio:16/10; overflow:hidden; border-radius:14px; background:var(--bl-paper); }
.bl-card-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.bl-card:hover .bl-card-media img{ transform:scale(1.03); }
.bl-card-meta{ font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
               color:var(--bl-muted); margin-bottom:14px; display:flex; gap:12px; flex-wrap:wrap; }
.bl-card-meta .on{ color:var(--bl-accent); }
.bl-card h2{ font-weight:600; font-size:clamp(24px,2.8vw,34px); line-height:1.1;
             letter-spacing:-.02em; margin:0 0 12px; }
.bl-card p{ font-size:15.5px; line-height:1.6; color:var(--bl-secondary); margin:0 0 16px; }
.bl-card .bl-go{ font-size:14.5px; font-weight:600; color:var(--bl-accent); }
.bl-card.soon{ opacity:.62; pointer-events:none; }
.bl-card.soon .bl-go{ color:var(--bl-muted); }

/* ---------- Article ---------- */
.bl-art-head{ max-width:820px; margin:0 auto; padding:64px 28px 34px; }
.bl-art-head h1{ font-weight:600; font-size:clamp(34px,5vw,60px); line-height:1.04;
                 letter-spacing:-.025em; margin:0 0 20px; }
.bl-art-meta{ display:flex; gap:14px; flex-wrap:wrap; font-size:12px; letter-spacing:.08em;
              text-transform:uppercase; color:var(--bl-muted); margin-bottom:22px; }
.bl-art-meta .on{ color:var(--bl-accent); }
.bl-standfirst{ font-size:19px; line-height:1.55; color:var(--bl-secondary); margin:0;
                padding-left:16px; border-left:3px solid var(--bl-accent); }

.bl-art{ max-width:820px; margin:0 auto; padding:0 28px 40px; }
.bl-art h2{ font-weight:600; font-size:clamp(24px,3vw,32px); line-height:1.14;
            letter-spacing:-.02em; margin:52px 0 16px; }
.bl-art h3{ font-weight:600; font-size:19px; line-height:1.25; margin:34px 0 10px; }
.bl-art p{ font-size:17px; line-height:1.72; color:#2B2B2E; margin:0 0 20px; }
.bl-art strong{ font-weight:600; color:var(--bl-ink); }
.bl-art a{ color:var(--bl-accent); }
.bl-art ul,.bl-art ol{ font-size:17px; line-height:1.72; color:#2B2B2E; padding-left:22px; margin:0 0 20px; }
.bl-art li{ margin-bottom:9px; }
.bl-art hr{ border:0; border-top:1px solid var(--bl-hairline); margin:44px 0; }

/* Pull quote */
.bl-pull{ margin:38px 0; padding:26px 0; border-top:1px solid var(--bl-ink);
          border-bottom:1px solid var(--bl-ink); }
.bl-pull p{ font-size:clamp(20px,2.4vw,26px); line-height:1.3; font-weight:600;
            letter-spacing:-.015em; color:var(--bl-ink); margin:0; }

/* Callout */
.bl-note{ background:var(--bl-paper); border-radius:14px; padding:24px 26px; margin:32px 0; }
.bl-note h4{ font-size:11.5px; letter-spacing:.12em; text-transform:uppercase;
             color:var(--bl-accent); margin:0 0 10px; font-weight:600; }
.bl-note p{ font-size:15px; line-height:1.65; margin:0; color:var(--bl-secondary); }
.bl-note p + p{ margin-top:10px; }

/* Figures — every image carries its credit line */
.bl-fig{ margin:36px 0; }
.bl-fig img,.bl-fig svg{ width:100%; height:auto; display:block; border-radius:14px; background:var(--bl-paper); }
.bl-fig figcaption{ font-size:13px; line-height:1.55; color:var(--bl-muted); margin-top:12px; }
.bl-fig figcaption b{ color:var(--bl-secondary); font-weight:600; }
.bl-fig figcaption a{ color:var(--bl-muted); text-decoration:underline; }
.bl-fig.wide{ max-width:1080px; margin-inline:auto; }

/* Timeline (original SVG) */
.bl-tl{ margin:36px 0 40px; }

/* Sources */
.bl-sources{ background:var(--bl-paper); border-radius:16px; padding:28px 30px; margin:48px 0 0; }
.bl-sources h2{ font-size:15px !important; margin:0 0 14px !important; letter-spacing:.06em;
                text-transform:uppercase; color:var(--bl-secondary); }
.bl-sources ol{ font-size:14px; line-height:1.6; color:var(--bl-secondary); margin:0; padding-left:20px; }
.bl-sources li{ margin-bottom:9px; }
.bl-sources a{ color:var(--bl-accent); word-break:break-word; }

/* CTA */
.bl-cta{ max-width:1280px; margin:0 auto; padding:36px 28px 84px; }
.bl-cta-card{
  background:var(--bl-paper); border:1px solid var(--bl-hairline); border-radius:18px;
  padding:48px 44px; display:flex; flex-wrap:wrap; gap:26px;
  justify-content:space-between; align-items:center;
}
.bl-cta-card h2{ font-weight:600; font-size:clamp(24px,3.2vw,36px); line-height:1.06;
                 letter-spacing:-.02em; margin:0 0 10px; }
.bl-cta-card p{ font-size:15.5px; color:var(--bl-secondary); margin:0; max-width:460px; }
.bl-cta-btn{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--bl-accent); color:#fff; text-decoration:none;
  font-size:15px; font-weight:600; padding:15px 26px; border-radius:9px;
  box-shadow:0 12px 30px -12px rgba(0,102,204,.6); transition:background .15s ease;
}
.bl-cta-btn:hover{ background:var(--bl-accent-hover); }

/* Next/prev */
.bl-more{ max-width:820px; margin:0 auto; padding:0 28px 20px; }
.bl-more a{ display:block; border-top:1px solid var(--bl-hairline); padding:22px 0;
            text-decoration:none; color:inherit; }
.bl-more .k{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--bl-muted); }
.bl-more .t{ font-size:19px; font-weight:600; margin-top:6px; letter-spacing:-.01em; }
.bl-more a:hover .t{ color:var(--bl-accent); }

@media (max-width:880px){
  .bl-card{ grid-template-columns:1fr; gap:18px; }
  .bl-card-media{ order:-1; }
  .bl-cta-card{ padding:34px 26px; }
}