/* CastNet HQ blog: add-on styles for /blog pages (DRAFT, Designer, Oct 27 2026).
   Load AFTER /assets/styles.css. Uses only the site's CSS variables and the site's Outfit font. No new fonts, trackers or scripts. */

/* ---------- shared hero (compact version of .hero / .about-hero) ---------- */
.blog-hero{padding:44px 0 48px}
@media (min-width:960px){.blog-hero{padding:64px 0 64px}}
.blog-hero h1{font-size:clamp(2rem,5vw,3rem);max-width:22ch;color:#fff}
.blog-hero .lede{margin-bottom:0}
.crumbs{font-size:.9rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin:0 0 14px}
.crumbs a{color:var(--aqua);text-decoration:none}
.crumbs a:hover{color:#fff;text-decoration:underline}

/* ---------- index: responsive grid of post cards ---------- */
.post-list{list-style:none;margin:0;padding:0;display:grid;gap:22px;grid-template-columns:1fr}
@media (min-width:700px){.post-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.post-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
.post-card{position:relative;display:flex;flex-direction:column;height:100%;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;transition:transform .15s ease,box-shadow .15s ease}
.post-card:hover{transform:translateY(-2px);box-shadow:0 1px 2px rgba(7,59,76,.06),0 14px 30px rgba(7,59,76,.12)}
/* code-built brand graphic: the net motif in CSS + inline SVG, decorative only (no photos) */
.post-card .net-band{height:92px;background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M0 20L20 0L40 20L20 40Z' fill='none' stroke='%235CE1E6' stroke-opacity='.45' stroke-width='1.6'/%3E%3C/svg%3E") 0 0/40px 40px,
  radial-gradient(260px 120px at 85% 0%,rgba(0,163,155,.7),transparent 70%),var(--deep)}
.post-card .net-band span{display:block;width:14px;height:14px;border-radius:50%;background:var(--yellow);margin:18px 0 0 22px;box-shadow:0 0 0 5px rgba(255,210,63,.18)}
.post-card .body{display:flex;flex-direction:column;flex:1;padding:20px 22px 22px}
.post-date{display:block;font-size:.85rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-dark);margin-bottom:8px}
.post-card h2{font-size:1.35rem;line-height:1.2;margin:0 0 .5em}
.post-card h2 a{color:var(--deep);text-decoration:none}
.post-card h2 a::after{content:"";position:absolute;inset:0}           /* whole card is the link target */
.post-card h2 a:focus-visible{outline:none}
.post-card:focus-within{outline:3px solid var(--teal);outline-offset:3px}
.post-card p{color:var(--muted);margin:0 0 1em}
.post-card .more{margin-top:auto;font-weight:600;color:var(--teal-dark)}
.blog-empty-note{color:var(--muted);margin-top:28px}

/* ---------- post page ---------- */
.post-meta{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;color:#CFE6EA;font-size:1rem;margin:0}
.post-meta .sep{color:var(--aqua)}
.post-meta time{font-weight:600;color:#fff}
.article{padding:44px 0 24px}
@media (min-width:960px){.article{padding:64px 0 32px}}
.prose{max-width:68ch;margin:0 auto;font-size:1.0625rem;line-height:1.7;color:var(--ink)}   /* 17px on phones */
@media (min-width:768px){.prose{font-size:1.125rem;line-height:1.75}}                       /* 18px from tablets up */
.prose > * + *{margin-top:0}
.prose p,.prose ul,.prose ol{margin:0 0 1.15em}
.prose h2{font-size:clamp(1.45rem,3vw,1.75rem);margin:1.9em 0 .55em}
.prose h3{font-size:1.2rem;margin:1.6em 0 .4em}
.prose ul,.prose ol{padding-left:1.3em}
.prose li{margin:.35em 0}
.prose li::marker{color:var(--teal)}
.prose a{font-weight:600}
.prose img{border-radius:var(--radius-sm);margin:1.4em 0}
.prose figure{margin:1.6em 0}
.prose figcaption{font-size:.92rem;color:var(--muted);margin-top:.5em}
/* QC Oct 27: no nod in post bodies (the footer slogan is the page's one nod); blockquote kept for ordinary quotes */
.prose blockquote{margin:1.6em 0;padding:.2em 0 .2em 1.1em;border-left:4px solid var(--teal);color:var(--deep);font-size:1.08em}
.prose blockquote p{margin:0 0 .4em}
.post-cta{max-width:68ch;margin:32px auto 0;background:var(--deep);color:#DCEFF1;border-radius:var(--radius);padding:26px 24px}
@media (min-width:768px){.post-cta{padding:32px 34px}}
.post-cta h2{color:#fff;font-size:1.5rem;margin:0 0 .4em}
.post-cta p{margin:0 0 1em}
.post-cta .cta-row{margin-top:6px}
.post-cta .demo-note{color:#BFDDE2;margin:12px 0 0;font-size:.95rem}
.post-back{max-width:68ch;margin:28px auto 0;font-weight:600}
@media (max-width:559px){.post-meta{flex-direction:column;align-items:flex-start;gap:2px}.post-meta .sep{display:none}}