/* Blog list and post pages (content.blog, Adam 2026-11-05). Linked only from the Blog page and post pages of a
   client whose content.blog has posts, so no other page or client loads it. Bump BLOG_V in site.js when this changes.
   Base look follows Template 1; Template 2 and 3 adjustments are at the end. */
.blog-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:clamp(20px,2.4vw,32px)}
.blog-card{height:100%;display:flex;flex-direction:column;background:#fff;border-radius:var(--card-radius);overflow:hidden;box-shadow:0 0 0 1px var(--line)}
.blog-card-media{display:block;aspect-ratio:3/2;overflow:hidden;background:var(--alt)}
.blog-card-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.blog-card:hover .blog-card-media img{transform:scale(1.04)}
.blog-card-body{display:flex;flex-direction:column;gap:12px;flex:1;padding:clamp(22px,2.4vw,30px)}
.blog-card h2,.blog-card h3{font-size:clamp(22px,2vw,27px)}
.blog-card h2 a,.blog-card h3 a{text-decoration:none;color:inherit}
.blog-card h2 a:hover,.blog-card h3 a:hover{text-decoration:underline;text-underline-offset:4px}
.blog-card-body>p{margin:0;color:var(--ink-2)}
.blog-card-more{margin-top:auto!important;padding-top:6px}
.blog-card-text{background:var(--alt)}
.post-meta{display:flex;flex-wrap:wrap;gap:4px 18px;margin:0;font:600 13px/1.4 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.post{max-width:760px;margin-inline:auto}
.post>.post-meta{margin-bottom:24px}
.post-media{margin:0 0 clamp(28px,4vw,44px)}
.post-media img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--radius)}
.post-media figcaption{margin-top:10px;font-size:14px;color:var(--muted)}
.post-body{font-size:clamp(17px,1.25vw,19px);line-height:1.75;color:var(--ink-2)}
.post-body p{margin:0 0 1.2em}
.post-body h2{font-size:clamp(26px,2.6vw,34px);color:var(--ink);margin:1.6em 0 .6em}
.post-body ul{margin:0 0 1.4em;padding-left:1.2em}
.post-body li{margin:.4em 0;padding-left:.2em}
.post-body li::marker{color:var(--gold-2)}
.post-body a{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:3px}
.post-body .post-media{margin:1.6em 0}
.post-faq{margin-top:clamp(36px,5vw,56px);padding-top:clamp(28px,3.5vw,40px);border-top:1px solid var(--line)}
.post-faq h2{font-size:clamp(26px,2.6vw,34px);margin-bottom:20px}
html[data-template="2"] .post-faq h2{color:var(--t2-band);text-transform:uppercase;letter-spacing:.01em}
html[data-template="3"] .post-faq h2{color:var(--t3-band)}
.post-back{margin:clamp(32px,4vw,48px) 0 0;padding-top:24px;border-top:1px solid var(--line)}
.post-back .ic{width:18px;height:18px}
.sec-post-more{background:var(--alt)}
.sec-post-more .sec-head{margin-bottom:clamp(24px,3vw,36px)}.sec-post-more .sec-head h2{font-size:clamp(28px,3vw,40px)}
@media(max-width:700px){.post-media img{aspect-ratio:4/3}}

/* Template 2: square cards on a hairline, headings in the band colour, title-case meta like its kickers. */
html[data-template="2"] .blog-card{box-shadow:none;border:1px solid var(--line)}
html[data-template="2"] .blog-card h2,html[data-template="2"] .blog-card h3{color:var(--t2-band);text-transform:uppercase;letter-spacing:.01em;font-size:clamp(20px,1.8vw,24px)}
html[data-template="2"] .post-meta{font:400 16px/1.4 var(--font-body);letter-spacing:.01em;text-transform:none}
html[data-template="2"] .post-body h2{color:var(--t2-band);text-transform:uppercase;letter-spacing:.01em}
html[data-template="2"] .post-body li::marker{color:var(--t2-band)}

/* Template 3: rounded lifted cards, band-colour headings, accent links. */
html[data-template="3"] .blog-card{box-shadow:var(--t3-shadow)}
html[data-template="3"] .blog-card h2,html[data-template="3"] .blog-card h3,html[data-template="3"] .post-body h2{color:var(--t3-band)}
html[data-template="3"] .post-meta{color:var(--t3-band)}
html[data-template="3"] .post-media img{border-radius:var(--card-radius)}
html[data-template="3"] .post-body li::marker{color:var(--t3-band)}
html[data-template="3"] .post-body a{text-decoration-color:var(--t3-em)}