/* ============================================================
   HOPE RESTORED HOMES  ·  Blog styles
   (css/blog.css)
   ------------------------------------------------------------
   Loaded by the blog index (/blog/) and every post, AFTER
   css/subpage.css. Subpage.css brings the nav, footer, hero,
   and CTA band; this file styles everything blog-specific:
     · .bl-grid / .bl-card    — the post cards on /blog/
     · .bl-post-head / .bl-prose — post header + article text
     · .bl-toc, .bl-callout, .bl-tags, .bl-related
   NOTE: this file was referenced by both blog pages but never
   actually existed until the Aug 2026 cleanup — the blog was
   rendering unstyled. Everything here uses the same Cleancore
   tokens (var(--...)) defined in css/subpage.css.
   ============================================================ */

/* ---------- BLOG INDEX · post card grid ---------- */
.bl-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:1.1rem; margin-top:1.4rem;
}
.bl-empty {
  grid-column:1 / -1; text-align:center; padding:2.4rem 1rem;
  font-family:'DM Mono',monospace; font-size:.74rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--gray);
  background:var(--glass-soft); border:1px dashed var(--gray2); border-radius:18px;
}
.bl-card {
  display:flex; flex-direction:column; gap:.55rem; position:relative; overflow:hidden;
  background:var(--glass); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid var(--glass-brd); border-radius:20px; padding:1.5rem 1.5rem 1.3rem;
  box-shadow:var(--card-shadow); color:var(--ink);
  transition:transform .18s ease, box-shadow .18s ease;
}
.bl-card::before { content:''; position:absolute; inset:0 0 62% 0; background:var(--sheen); pointer-events:none; }
.bl-card:hover { transform:translateY(-4px); box-shadow:0 1px 0 rgba(255,255,255,0.9) inset, 0 26px 46px -22px rgba(26,122,144,0.6), 0 6px 18px -8px rgba(63,168,191,0.35); }
.bl-card-cat {
  align-self:flex-start; position:relative;
  font-family:'DM Mono',monospace; font-size:.6rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--aqua-deep); background:rgba(255,255,255,0.7);
  border:1px solid var(--glass-brd); border-radius:999px; padding:.32rem .75rem;
  box-shadow:0 4px 12px -8px rgba(26,122,144,0.4);
}
.bl-card-title {
  position:relative; font-family:'Fredoka',sans-serif; font-weight:600;
  font-size:1.16rem; line-height:1.25; letter-spacing:-.01em; color:var(--ink);
}
.bl-card:hover .bl-card-title { color:var(--aqua-deep); }
.bl-card-excerpt { position:relative; font-size:.9rem; line-height:1.65; color:var(--ink2); }
.bl-card-meta {
  position:relative; display:flex; align-items:center; flex-wrap:wrap; gap:.5rem;
  margin-top:auto; padding-top:.7rem;
  font-family:'DM Mono',monospace; font-size:.62rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--gray);
}
.bl-card-meta .dot { opacity:.55; }
.bl-card-more { margin-left:auto; color:var(--aqua-deep); font-weight:500; transition:transform .18s ease; }
.bl-card:hover .bl-card-more { transform:translateX(3px); }

/* ---------- POST · header ---------- */
.bl-post-head {
  max-width:730px; margin:0 auto; padding:2.1rem 1.5rem .4rem;
}
.bl-post-head h1 {
  font-family:'Fredoka',sans-serif; font-weight:600;
  font-size:clamp(1.7rem,4vw,2.5rem); line-height:1.12; letter-spacing:-.01em; color:var(--ink);
}
.bl-meta {
  display:flex; align-items:center; flex-wrap:wrap; gap:.55rem; margin-top:.9rem;
  font-family:'DM Mono',monospace; font-size:.66rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--gray);
}
.bl-meta .dot { opacity:.55; }
.bl-post-cat {
  color:var(--aqua-deep); background:rgba(255,255,255,0.7);
  border:1px solid var(--glass-brd); border-radius:999px; padding:.3rem .7rem;
  box-shadow:0 4px 12px -8px rgba(26,122,144,0.4);
}

/* ---------- POST · article body ---------- */
.bl-article { max-width:730px; margin:0 auto; padding:1rem 1.5rem 1.6rem; }
.bl-prose p { color:var(--ink2); font-size:.99rem; line-height:1.85; margin-bottom:1.05rem; }
.bl-prose h2 {
  font-family:'Fredoka',sans-serif; font-weight:600;
  font-size:clamp(1.3rem,2.6vw,1.7rem); line-height:1.2; letter-spacing:-.01em;
  color:var(--ink); margin:2rem 0 .75rem; scroll-margin-top:5.2rem;
}
.bl-prose h3 { font-family:'Fredoka',sans-serif; font-weight:600; font-size:1.1rem; color:var(--aqua-deep); margin:1.4rem 0 .5rem; }
.bl-prose ul { list-style:none; margin:0 0 1.15rem; padding:0; }
.bl-prose ul li {
  position:relative; padding-left:1.5rem; margin-bottom:.5rem;
  color:var(--ink2); font-size:.96rem; line-height:1.65;
}
.bl-prose ul li::before {
  content:''; position:absolute; left:.15rem; top:.62rem;
  width:.55rem; height:.55rem; border-radius:50%;
  background:var(--grad-fresh);
  box-shadow:0 3px 8px -3px rgba(26,122,144,0.7);
}
.bl-prose a { color:var(--aqua-deep); font-weight:600; border-bottom:2px solid var(--aqua); transition:color .15s, border-color .15s; }
.bl-prose a:hover { color:var(--abyss); border-color:var(--aqua3); }
.bl-prose strong, .bl-prose b { color:var(--ink); font-weight:600; }

/* table of contents card */
.bl-toc {
  background:var(--glass); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid var(--glass-brd); border-radius:18px; padding:1.25rem 1.4rem;
  margin:1.5rem 0 1.9rem; box-shadow:var(--card-shadow);
}
.bl-toc h2 {
  font-family:'DM Mono',monospace; font-size:.66rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--aqua-deep); margin:0 0 .7rem;
}
.bl-toc ul { list-style:none; margin:0; padding:0; }
.bl-toc ul li { padding:0 0 0 1.15rem; margin-bottom:.4rem; position:relative; font-size:.92rem; }
.bl-toc ul li::before {
  content:''; position:absolute; left:0; top:.68rem;
  width:.55rem; height:2px; border-radius:2px; background:var(--grad-fresh);
}
.bl-toc a { color:var(--ink2); font-weight:500; border-bottom:none; }
.bl-toc a:hover { color:var(--aqua-deep); }

/* callout / quick tip */
.bl-callout {
  position:relative; overflow:hidden;
  background:linear-gradient(135deg, rgba(198,239,220,0.55), rgba(240,251,255,0.75));
  border:1px solid var(--glass-brd); border-left:4px solid var(--mint2);
  border-radius:0 16px 16px 0; padding:1.05rem 1.25rem; margin:1.4rem 0 1.6rem;
  font-size:.95rem; line-height:1.7; color:var(--ink2);
  box-shadow:0 10px 26px -18px rgba(26,122,144,0.5);
}
.bl-callout strong { color:var(--ink); font-weight:600; }

/* ---------- POST · tags ---------- */
.bl-tags {
  max-width:730px; margin:0 auto; padding:0 1.5rem 1.4rem;
  display:flex; align-items:center; flex-wrap:wrap; gap:.5rem;
}
.bl-tags-label {
  font-family:'DM Mono',monospace; font-size:.62rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--gray); margin-right:.25rem;
}
.bl-tag {
  font-family:'DM Mono',monospace; font-size:.64rem; letter-spacing:.06em; text-transform:uppercase;
  background:rgba(255,255,255,0.7); border:1px solid var(--glass-brd); color:var(--aqua-deep);
  padding:.4rem .85rem; border-radius:999px;
  box-shadow:0 4px 12px -8px rgba(26,122,144,0.4);
}

/* ---------- POST · keep reading ---------- */
.bl-related { max-width:730px; margin:0 auto; padding:.4rem 1.5rem 0; }
.bl-related h2 {
  font-family:'Fredoka',sans-serif; font-weight:600; font-size:1.35rem;
  letter-spacing:-.01em; color:var(--ink); margin-bottom:.9rem;
}
.bl-related-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:.8rem; }
.bl-related-card {
  display:flex; flex-direction:column; gap:.3rem; position:relative; overflow:hidden;
  background:var(--glass); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid var(--glass-brd); border-radius:16px; padding:1rem 1.1rem;
  box-shadow:0 10px 26px -18px rgba(26,122,144,0.5);
  transition:transform .18s ease, box-shadow .18s ease;
}
.bl-related-card::before { content:''; position:absolute; inset:0 0 55% 0; background:var(--sheen); pointer-events:none; }
.bl-related-card:hover { transform:translateY(-3px); box-shadow:var(--card-shadow); }
.bl-related-kind {
  position:relative; font-family:'DM Mono',monospace; font-size:.58rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--aqua3);
}
.bl-related-title { position:relative; font-family:'Fredoka',sans-serif; font-weight:600; font-size:.98rem; color:var(--ink); line-height:1.3; }
.bl-related-card:hover .bl-related-title { color:var(--aqua-deep); }

/* ---------- RESPONSIVE ---------- */
@media (max-width:760px){
  .bl-grid { grid-template-columns:1fr; }
  .bl-post-head { padding-top:1.5rem; }
  .bl-related-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:520px){
  .bl-related-grid { grid-template-columns:1fr; }
}

/* ---------- BLOG INDEX · featured post + category filter ---------- */
/* Drawn by scripts/posts.js. NO IMAGES ANYWHERE ON PURPOSE — a post is
   just text in posts.js, so there is never a photo to upload or track.
   The newest post renders as .bl-feat (a wide, type-led card). */

.bl-filter { display:flex; flex-wrap:wrap; gap:.5rem; margin:1.2rem 0 .2rem; }
.bl-filter-btn {
  font-family:'DM Mono',monospace; font-size:.64rem; letter-spacing:.08em; text-transform:uppercase;
  background:rgba(255,255,255,0.7); border:1px solid var(--glass-brd); color:var(--aqua-deep);
  padding:.48rem .95rem; border-radius:999px; cursor:pointer;
  box-shadow:0 4px 12px -8px rgba(26,122,144,0.4);
  transition:transform .15s ease, background .15s ease, color .15s ease;
}
.bl-filter-btn:hover { transform:translateY(-1px); color:var(--abyss); }
.bl-filter-btn.is-on { background:var(--grad-fresh); border-color:transparent; color:#fff;
  box-shadow:0 8px 18px -8px rgba(26,122,144,0.7), inset 0 1px 0 rgba(255,255,255,0.5); }
.bl-filter-btn:focus-visible { outline:3px solid var(--aqua3); outline-offset:2px; }

/* the newest post: same glass card, just wider and louder */
.bl-feat {
  display:flex; flex-direction:column; align-items:flex-start; gap:.6rem;
  position:relative; overflow:hidden;
  background:var(--glass); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid var(--glass-brd); border-radius:24px;
  padding:1.9rem 2rem 1.7rem 2.3rem; margin:1.3rem 0 1.6rem;
  box-shadow:var(--card-shadow); color:var(--ink);
  transition:transform .18s ease, box-shadow .18s ease;
}
/* brand bar down the left edge, so it reads as the lead item */
.bl-feat::after {
  content:''; position:absolute; left:0; top:0; bottom:0; width:6px;
  background:var(--grad-fresh);
}
.bl-feat::before { content:''; position:absolute; inset:0 0 66% 0; background:var(--sheen); pointer-events:none; }
.bl-feat > * { position:relative; }
.bl-feat:hover { transform:translateY(-4px);
  box-shadow:0 1px 0 rgba(255,255,255,0.9) inset, 0 30px 54px -24px rgba(26,122,144,0.6), 0 8px 20px -8px rgba(63,168,191,0.35); }
.bl-feat-tag {
  display:flex; align-items:center; gap:.55rem;
  font-family:'DM Mono',monospace; font-size:.62rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--aqua-deep);
}
.bl-feat-tag::before { content:''; width:24px; height:2px; background:var(--grad-fresh); border-radius:2px; }
.bl-feat-title {
  font-family:'Fredoka',sans-serif; font-weight:600; font-size:clamp(1.5rem,3.4vw,2.15rem);
  line-height:1.16; letter-spacing:-.015em; color:var(--ink); max-width:34ch;
}
.bl-feat:hover .bl-feat-title { color:var(--aqua-deep); }
.bl-feat .bl-card-excerpt { font-size:1rem; line-height:1.7; max-width:62ch; }
.bl-feat .bl-card-meta { width:100%; padding-top:1rem; font-size:.66rem; }

@media (max-width:760px){
  .bl-feat { padding:1.5rem 1.3rem 1.35rem 1.6rem; border-radius:20px; }
  .bl-feat .bl-card-excerpt { font-size:.94rem; }
}
@media (prefers-reduced-motion:reduce){
  .bl-filter-btn, .bl-feat { transition:none; }
}