/* DXL Insights / Blog — content + breadcrumbs (site chrome from styles.css) */
body.blog-page{
  --gray:#6B6B6B; /* WCAG AA on white for small labels */
  --wrap:720px;
  --wrap-wide:1100px;
  --pad:clamp(20px,4vw,32px)
}
body.blog-page #siteNav .n-logo{opacity:1 !important}
body.blog-page #siteNav .n-tagline{opacity:1 !important}
body.blog-page #siteNav{background:rgba(255,255,255,.97)}
body.blog-page #main{padding-top:88px}
.blog-cover picture,.blog-cover img{display:block;width:100%;height:auto;max-height:480px;object-fit:cover;aspect-ratio:16/9}
.related,.blog-cta{content-visibility:auto;contain-intrinsic-size:auto 480px}

.blog-wrap{width:min(100% - (var(--pad) * 2), var(--wrap));margin-inline:auto}
.blog-wrap--wide{width:min(100% - (var(--pad) * 2), var(--wrap-wide));margin-inline:auto}

.breadcrumbs{
  width:min(100% - (var(--pad) * 2), var(--wrap-wide));
  margin-inline:auto;
  padding:20px 0 0;
  border-bottom:1px solid var(--border)
}
.breadcrumbs ol{
  list-style:none;margin:0;padding:0 0 18px;
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase
}
body.blog-page .lang-switch .lang-btn{
  text-decoration:none;display:inline-flex;align-items:center;justify-content:center
}
.breadcrumbs li{display:inline-flex;align-items:center;gap:8px;color:var(--gray)}
.breadcrumbs li:not(:last-child)::after{content:'/';color:var(--border);margin-left:2px}
.breadcrumbs a,
.breadcrumbs a:link,
.breadcrumbs a:visited{color:var(--dgray);text-decoration:none}
.breadcrumbs a:hover,
.breadcrumbs a:active{color:var(--black)}
.breadcrumbs [aria-current="page"]{color:var(--black)}

.blog-hero{padding:48px 0 40px;border-bottom:1px solid var(--border)}
.blog-label{
  margin:0 0 16px;font-size:11px;font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gray)
}
.blog-hero h1{
  margin:0;font-size:clamp(36px,6vw,56px);font-weight:400;line-height:1.05;
  letter-spacing:-.02em;text-transform:uppercase;max-width:18ch
}
.blog-lead{
  margin:24px 0 0;max-width:54ch;font-size:16px;line-height:1.5;color:var(--dgray)
}
.blog-meta{
  margin-top:28px;display:flex;flex-wrap:wrap;gap:8px 16px;
  font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--gray)
}
.blog-meta span{color:var(--dgray)}

.blog-cover{margin:0;border-bottom:1px solid var(--border);background:var(--lgray)}

.article{padding:56px 0 80px}
.article h2{
  margin:48px 0 16px;font-size:clamp(22px,3vw,28px);font-weight:500;
  line-height:1.2;letter-spacing:.01em
}
.article h2:first-child{margin-top:0}
.article p{margin:0 0 18px;font-size:16px;line-height:1.65;color:#222}
.article ul{margin:0 0 22px;color:#222}
.article li{margin-bottom:8px;font-size:16px;line-height:1.55}
.article strong{font-weight:500}
.article blockquote{
  margin:32px 0;padding:20px 22px;border-left:3px solid var(--black);
  background:var(--lgray);font-size:18px;line-height:1.4;color:var(--black)
}
.article blockquote p{margin:0;color:var(--black)}
.pull{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  margin:36px 0;border:1px solid var(--border)
}
.pull div{padding:20px 16px;border-right:1px solid var(--border)}
.pull div:last-child{border-right:0}
.pull strong{display:block;font-size:22px;font-weight:500;margin-bottom:6px}
.pull span{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--gray)}

.blog-index{padding:40px 0 100px}
.blog-index-head{margin-bottom:48px}
.blog-index-head h1{
  margin:0;font-size:clamp(40px,7vw,64px);font-weight:400;line-height:1;
  text-transform:uppercase;letter-spacing:-.02em
}
.blog-index-head p{margin:18px 0 0;max-width:48ch;color:var(--dgray);font-size:16px;line-height:1.5}
.blog-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--border)}
.blog-card,
.blog-card:link,
.blog-card:visited,
.blog-card:active{
  display:flex;flex-direction:column;padding:28px 24px 32px;
  border-right:1px solid var(--border);border-bottom:1px solid var(--border);
  text-decoration:none;color:var(--black);
  transition:background .25s var(--ease);min-height:280px
}
.blog-card:last-child{border-right:0}
.blog-card:hover{background:var(--lgray)}
.blog-card .num{font-size:11px;font-weight:500;letter-spacing:.08em;color:var(--gray);margin-bottom:28px}
.blog-card .tag{font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--red);margin-bottom:12px}
.blog-card h2{margin:0 0 14px;font-size:22px;font-weight:500;line-height:1.2;text-transform:uppercase}
.blog-card p{margin:0;font-size:14px;line-height:1.45;color:var(--dgray);flex:1}
.blog-card .more{
  margin-top:28px;font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase
}

.related{padding:0 0 80px;border-top:1px solid var(--border)}
.related .blog-wrap--wide{padding-top:56px}
.related h2{margin:0 0 24px;font-size:14px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--gray)}
.related-list{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.related-list a{
  display:block;padding:20px;border:1px solid var(--border);text-decoration:none;transition:background .2s;
  color:var(--black)
}
.related-list a:link,
.related-list a:visited,
.related-list a:active{color:var(--black)}
.related-list a:hover{background:var(--lgray);color:var(--black)}
.related-list strong{display:block;font-size:15px;font-weight:500;margin-bottom:6px;color:inherit}
.related-list span{font-size:12px;color:var(--gray);text-transform:uppercase;letter-spacing:.05em}

.blog-cta{
  padding:72px 0;background:var(--black);color:var(--white);text-align:left
}
.blog-cta h2{
  margin:0;font-size:clamp(32px,5vw,48px);font-weight:400;line-height:1.05;
  text-transform:uppercase;max-width:16ch
}
.blog-cta p{margin:18px 0 28px;max-width:42ch;color:rgba(255,255,255,.7);font-size:15px;line-height:1.5}
.blog-cta .btn,
.blog-cta .btn:link,
.blog-cta .btn:visited,
.blog-cta .btn:active{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 16px;border-radius:5px;background:var(--white);color:var(--black);
  text-decoration:none;font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase
}
.blog-cta .btn:hover{background:var(--lgray);color:var(--black)}

.article ul{padding-left:1.2em}

@media (max-width:900px){
  .blog-cards{grid-template-columns:1fr}
  .blog-card{border-right:0}
  .pull{grid-template-columns:1fr}
  .pull div{border-right:0;border-bottom:1px solid var(--border)}
  .pull div:last-child{border-bottom:0}
  .related-list{grid-template-columns:1fr}
}
@media (max-width:640px){
  .blog-hero{padding:48px 0 32px}
  .breadcrumbs ol{font-size:10px}
  .breadcrumbs [aria-current="page"]{
    max-width:28ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap
  }
}