/* Blog: articles with a sticky lead form beside them */
.bl-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; align-items: start; }
.bl-side { position: sticky; top: 90px; }
.bl-list { display: grid; gap: 18px; }
.bl-card { padding: 24px; }
.bl-card h2 { font-size: 1.35rem; margin: 6px 0 8px; }
.bl-card h2 a { color: var(--ink); text-decoration: none; }
.bl-card h2 a:hover { color: var(--brand); }
.bl-meta { margin: 0; font-size: .85rem; color: var(--muted); }
.bl-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.bl-tags span { font-size: .75rem; padding: 3px 10px; border-radius: 999px; background: var(--brand-soft); color: var(--brand); font-weight: 700; }
.bl-read { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.bl-read .icon { width: 16px; height: 16px; }
.bl-article h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin: 8px 0 10px; }
.bl-crumbs { margin: 0; font-size: .85rem; color: var(--muted); }
.bl-body { font-size: 1.06rem; line-height: 1.75; color: var(--ink); }
.bl-body h2 { font-size: 1.4rem; margin: 30px 0 10px; }
.bl-body ul, .bl-body ol { padding-left: 22px; } .bl-body li { margin: 6px 0; }
.bl-offer { position: relative; margin: 36px 0; padding: 26px; border: 2px solid var(--brand); }
.bl-offer h2 { margin: 0 0 8px; }
.bl-refs, .bl-more { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); }
.bl-refs h2, .bl-more h2 { font-size: 1.1rem; }
@media (max-width: 960px) { .bl-layout { grid-template-columns: 1fr; } .bl-side { position: static; } }

/* Cover graphics (no photos): gradient, icon and topic */
.bl-list { grid-template-columns: repeat(2, 1fr); }
.bl-card { display: flex; flex-direction: column; }
.bl-card .bl-read { margin-top: auto; }
.bl-cover { position: relative; display: flex; align-items: flex-end; justify-content: space-between; height: 150px; margin: -24px -24px 16px; padding: 16px 18px;
  border-radius: 16px 16px 0 0; color: #fff; text-decoration: none; overflow: hidden; }
.bl-cover .icon { position: absolute; right: -10px; top: -10px; width: 130px; height: 130px; opacity: .22; }
.bl-cover span { font-weight: 800; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; background: rgb(255 255 255 / 18%); padding: 4px 10px; border-radius: 999px; }
.bl-cover-lg { height: 200px; margin: 18px 0 20px; border-radius: 18px; }
.bl-cover-lg .icon { width: 190px; height: 190px; }
.bl-c1 { background: linear-gradient(135deg, #1e1b4b, #4f2bea); } .bl-c2 { background: linear-gradient(135deg, #064e3b, #10b981); }
.bl-c3 { background: linear-gradient(135deg, #7f1d1d, #ef4444); } .bl-c4 { background: linear-gradient(135deg, #831843, #db2777); }
.bl-c5 { background: linear-gradient(135deg, #7c2d12, #f97316); }
@media (max-width: 760px) { .bl-list { grid-template-columns: 1fr; } }

/* real cover images (static/img/share, drawn by tools/make_share_images.py) */
.bl-hero-img { margin: 18px 0 20px; }
.bl-hero-img img { display: block; width: 100%; height: auto; border-radius: 18px; }
.bl-card-img { display: block; margin: -24px -24px 16px; overflow: hidden; border-radius: inherit; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.bl-card-img img { display: block; width: 100%; height: auto; transition: transform .25s; }
.bl-card-img:hover img { transform: scale(1.03); }