/* ==========================================================================
   Blog (CMS-rendered) — listing, post and article content styles.
   Builds on brand.css tokens; nothing here applies outside /blog/.
   ========================================================================== */

.blog-wrap{max-width:820px}

/* ---- Listing cards (same look as the original blog page) ---- */
.post-card{display:grid;grid-template-columns:280px 1fr;gap:28px;border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden;background:#fff;margin-bottom:24px}
.post-card__img{display:block;min-height:200px}
.post-card img{width:100%;height:100%;object-fit:cover;min-height:200px}
.post-card .body{padding:26px 26px 26px 0}
.post-card:not(:has(.post-card__img)){grid-template-columns:1fr}
.post-card:not(:has(.post-card__img)) .body{padding:26px}
.post-card .date{color:var(--muted);font-size:14px;font-weight:600;margin:0}
.post-card__cat{color:var(--dsb-green-deep);font-weight:700}
.post-card h2{font-size:26px;margin-top:8px}
.post-card h2 a{color:var(--ink)}
.post-card h2 a:hover{color:var(--dsb-green-deep)}
.post-card p{color:var(--muted);margin-top:10px}
.post-card__more{margin-top:16px}
@media (max-width:640px){.post-card{grid-template-columns:1fr;gap:0}.post-card .body{padding:20px}.post-card img,.post-card__img{min-height:180px}}

.blog-filters{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 28px}
.blog-chip{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:999px;border:1.5px solid var(--line);background:#fff;color:var(--ink);font-weight:600;font-size:15px}
.blog-chip:hover{border-color:var(--dsb-green-deep);color:var(--dsb-green-deep)}
.blog-chip[aria-current="page"]{background:var(--dsb-green-deep);border-color:var(--dsb-green-deep);color:#fff}
.blog-empty{color:var(--muted)}
.blog-pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px}
.blog-pagination__count{color:var(--muted);font-size:14px;font-weight:600}

/* ---- Single post ---- */
.blog-post-section{padding-top:56px}
.blog-back{margin:0 0 24px}
.blog-article__cats{margin:0 0 10px;font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.04em}
.blog-article__cats a{color:var(--dsb-green-deep)}
.blog-article h1{font-size:clamp(28px,4vw,42px);margin-top:4px}
.blog-article__subtitle{font-size:clamp(18px,2vw,21px);color:var(--muted);margin:14px 0 0;line-height:1.5}
.blog-byline{display:flex;align-items:center;gap:12px;margin:22px 0 0}
.blog-byline__avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;flex-shrink:0}
.blog-byline__avatar--initial{display:inline-flex;align-items:center;justify-content:center;background:var(--sprout);color:var(--dsb-green-deep);font-weight:800}
.blog-byline__name{display:block;font-weight:700;color:var(--ink);font-size:15px}
.blog-byline__meta{display:block;color:var(--muted);font-size:14px;font-weight:600}
img.blog-article__hero{width:100%;border-radius:var(--radius-md);margin:28px 0 8px;max-height:460px;object-fit:cover}
figure.blog-article__hero{margin:28px 0 8px}

/* ---- Article content written in the editor (also used by the admin editor) ---- */
.dsb-article{margin-top:24px;color:var(--ink);font-size:18px;line-height:1.75;overflow-wrap:break-word}
.dsb-article > *:first-child{margin-top:0}
.dsb-article p{margin:0 0 1.1em}
.dsb-article h1,.dsb-article h2,.dsb-article h3,.dsb-article h4{line-height:1.2;margin:1.6em 0 .55em;color:var(--ink)}
.dsb-article h1{font-size:clamp(28px,3.6vw,36px)}
.dsb-article h2{font-size:clamp(24px,3vw,30px)}
.dsb-article h3{font-size:22px}
.dsb-article h4{font-size:19px}
.dsb-article a{color:var(--dsb-green-deep);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.dsb-article a:hover{color:var(--dsb-green)}
.dsb-article ul,.dsb-article ol{margin:0 0 1.1em;padding-left:1.4em}
.dsb-article li{margin:.3em 0}
.dsb-article li > p{margin:0}
.dsb-article blockquote{margin:1.6em 0;padding:16px 22px;border-left:5px solid var(--dsb-yellow);background:var(--dsb-cream);border-radius:0 var(--radius-sm) var(--radius-sm) 0;font-size:19px;color:var(--dsb-maroon)}
.dsb-article blockquote p:last-child{margin-bottom:0}
.dsb-article code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88em;background:var(--sprout);padding:.12em .4em;border-radius:6px}
.dsb-article pre{background:#1B2A1F;color:#F3F1EA;padding:18px 20px;border-radius:var(--radius-sm);overflow-x:auto;font-size:15px;line-height:1.6;margin:1.4em 0}
.dsb-article pre code{background:none;padding:0;color:inherit;font-size:inherit}
.dsb-article hr{border:0;border-top:2px dashed var(--line);margin:2.2em 0}
.dsb-article mark{background:#FFE7A3;color:inherit;padding:0 .15em;border-radius:3px}
.dsb-article table{width:100%;border-collapse:collapse;margin:1.6em 0;font-size:16px;line-height:1.5;display:block;overflow-x:auto}
.dsb-article th,.dsb-article td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top;min-width:100px}
.dsb-article th{background:var(--sprout);font-weight:700}
.dsb-article th p,.dsb-article td p{margin:0}
.dsb-figure{margin:1.8em auto}
.dsb-figure img{width:100%;height:auto;border-radius:var(--radius-md)}
.dsb-figure figcaption,.dsb-video figcaption{margin-top:10px;color:var(--muted);font-size:15px;line-height:1.5;text-align:center}
.dsb-figure.align-full{width:100%}
.dsb-figure.align-left{float:left;margin:.4em 1.6em 1em 0;max-width:50%}
.dsb-figure.align-right{float:right;margin:.4em 0 1em 1.6em;max-width:50%}
.dsb-article::after{content:"";display:table;clear:both}
@media (max-width:640px){
  .dsb-figure.align-left,.dsb-figure.align-right{float:none;margin:1.6em auto;max-width:100%;width:100% !important}
  .dsb-figure{width:100% !important}
}
.dsb-video{margin:1.8em 0}
.dsb-video__frame{position:relative;aspect-ratio:16/9;border-radius:var(--radius-md);overflow:hidden;background:#000}
.dsb-video__frame iframe,.dsb-video__frame video{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---- Call to action, tags, share ---- */
.blog-cta{margin:40px 0 0;padding:28px;border-radius:var(--radius-md);background:var(--dsb-green-deep);color:#fff}
.blog-cta h2{font-size:clamp(22px,2.6vw,28px);color:#fff}
.blog-cta p{color:#DCE9D6;margin:10px 0 0}
.blog-cta .btn{margin-top:18px}
.blog-article__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:40px;padding-top:24px;border-top:1px solid var(--line)}
.blog-tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.blog-tags a{display:inline-flex;min-height:36px;align-items:center;padding:0 14px;border-radius:999px;background:var(--sprout);color:var(--dsb-green-deep);font-weight:600;font-size:14px}
.blog-share{display:flex;align-items:center;gap:8px;color:var(--muted);font-weight:600;font-size:14px}
.blog-share a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;border:1.5px solid var(--line);color:var(--dsb-green-deep)}
.blog-share a:hover{border-color:var(--dsb-green-deep)}

/* ---- Related posts ---- */
.blog-related{padding-top:64px}
.blog-related__title{font-size:clamp(24px,3vw,32px);color:var(--dsb-maroon);margin-bottom:24px}
.blog-related__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.blog-related__card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden;color:var(--ink)}
.blog-related__card img{aspect-ratio:16/10;width:100%;object-fit:cover}
.blog-related__date{padding:16px 18px 0;color:var(--muted);font-size:13px;font-weight:600}
.blog-related__name{padding:6px 18px 18px;font-weight:700;line-height:1.35}
.blog-related__card:hover .blog-related__name{color:var(--dsb-green-deep)}
@media (max-width:820px){.blog-related__grid{grid-template-columns:1fr}}

/* ---- Preview banner (signed-in writers only) ---- */
.blog-preview-bar{position:relative;z-index:1;background:var(--dsb-yellow);color:var(--dsb-maroon);font-size:15px}
.blog-preview-bar .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:10px 0}
.blog-preview-bar a{color:var(--dsb-maroon);font-weight:700;text-decoration:underline;margin-left:auto}