/* Blog styles. Loads after style.css and reuses its tokens. */

/* ---------- index ---------- */
.blog-hero{padding:calc(var(--space)*.6) 0 calc(var(--space)*.3);}
.blog-hero h1{font-size:clamp(2.3rem,calc(var(--u)*4),4.4rem);margin-bottom:1rem;}
.blog-hero .lead{max-width:44rem;}
.blog-list-section{padding-top:clamp(1.5rem,calc(var(--u)*2.4),2.4rem);}

.blog-controls{display:grid;gap:1.3rem;margin-bottom:1.6rem;}
.blog-controls[hidden]{display:none;}
.search-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.2rem;align-items:end;}
.search-field,.sort-field{display:grid;gap:.4rem;}
.blog-controls label,.filter-label{font-size:var(--fs-small);font-weight:600;color:var(--olive-ink);letter-spacing:.02em;}
.blog-controls input[type="search"],.blog-controls select{
  font:inherit;font-size:var(--fs-body);color:var(--ink);background:var(--ivory);
  border:1.5px solid rgba(53,81,74,.35);border-radius:12px;padding:.7rem 1rem;min-height:3rem;width:100%;
}
.blog-controls select{width:auto;min-width:11rem;}
.blog-controls input:focus-visible,.blog-controls select:focus-visible{outline:3px solid var(--olive-ink);outline-offset:2px;}
.filter-group{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;}
.chips{display:flex;flex-wrap:wrap;gap:.55rem;}
.chip{
  font:inherit;font-size:var(--fs-small);font-weight:600;color:var(--pine);background:transparent;
  border:1.5px solid var(--pine);border-radius:999px;padding:.5rem 1.1rem;min-height:2.75rem;cursor:pointer;
  transition:background .2s ease,color .2s ease;
}
.chip:hover{background:rgba(53,81,74,.08);}
.chip[aria-pressed="true"]{background:var(--pine);color:var(--ivory);}
.chip:focus-visible{outline:3px solid var(--olive-ink);outline-offset:3px;}
.blog-status{font-size:var(--fs-small);color:var(--olive-ink);min-height:1.6em;margin-bottom:1rem;}
.blog-status:empty{display:none;}

.blog-grid{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,22rem),1fr));gap:clamp(1.3rem,2.4vw,2.2rem);}
.blog-grid > li[hidden]{display:none;}
.post-card{display:flex;}
.post-card article{
  position:relative;display:flex;flex-direction:column;width:100%;background:var(--ivory);
  border:1px solid rgba(53,81,74,.14);border-radius:16px;overflow:hidden;
  transition:box-shadow .3s ease,transform .3s ease;
}
.post-card article:hover{box-shadow:0 14px 34px rgba(53,81,74,.14);transform:translateY(-3px);}
.post-card article:focus-within{outline:3px solid var(--olive-ink);outline-offset:3px;}
.card-img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:50% 25%;background:var(--beige);}
.card-body{padding:clamp(1.1rem,1.8vw,1.6rem);display:flex;flex-direction:column;gap:.55rem;flex:1;}
.card-type{font-size:var(--fs-small);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--olive-ink);}
.card-body h3{font-size:clamp(1.45rem,calc(var(--u)*1.9),1.95rem);}
.card-body h3 a{color:var(--pine);text-decoration:none;white-space:normal;}
.card-body h3 a::after{content:"";position:absolute;inset:0;}
.card-body h3 a:hover{text-decoration:underline;text-decoration-thickness:1px;}
.card-body h3 a:focus-visible{outline:none;}
.card-sum{font-size:var(--fs-small);line-height:1.55;}
.card-by{margin-top:auto;padding-top:.8rem;display:flex;align-items:center;gap:.8rem;}
.avatar{width:2.9rem;height:2.9rem;border-radius:50%;object-fit:cover;object-position:50% 15%;flex:none;background:var(--beige);}
.avatar-logo{object-fit:contain;object-position:center;padding:.25rem;}
.card-by-text{display:grid;gap:.1rem;font-size:var(--fs-small);line-height:1.35;}
.card-author{font-weight:600;color:var(--pine);}
.card-meta{color:var(--olive-ink);}
.sample-flag,.sample-note{
  font-size:.92rem;font-weight:600;color:var(--olive-ink);background:var(--beige);
  border-radius:8px;padding:.3rem .7rem;width:fit-content;
}
.sample-note{margin:0 0 1rem;}

.blog-empty,.blog-soon{background:var(--ivory);border:1px solid rgba(53,81,74,.14);border-radius:16px;padding:clamp(1.8rem,4vw,3rem);text-align:center;}
.blog-empty[hidden]{display:none;}
.blog-empty h2,.blog-soon h2{font-size:var(--fs-h3);}
.blog-empty p,.blog-soon p{max-width:34rem;margin:0 auto 1.2rem;}
.blog-more-row{text-align:center;margin-top:2rem;}
.blog-more[hidden]{display:none;}

/* ---------- post ---------- */
.post-head{padding:calc(var(--space)*.45) 0 clamp(1.2rem,2vw,2rem);}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem .6rem;font-size:var(--fs-small);color:var(--olive-ink);margin-bottom:1.4rem;}
.crumbs li+li::before{content:"/";margin-right:.6rem;opacity:.6;}
.crumbs a{white-space:normal;}
.post-type{font-size:var(--fs-small);font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:.8rem;}
.post-type a{color:var(--olive-ink);text-decoration:none;}
.post-type a:hover{text-decoration:underline;}
.post-head h1{font-size:clamp(2.2rem,calc(var(--u)*4),4.2rem);max-width:60rem;margin-bottom:1rem;}
.post-head .lead{max-width:48rem;margin-bottom:1.2rem;}
.post-meta{font-size:var(--fs-small);color:var(--olive-ink);}
.post-reviewed{font-size:var(--fs-small);color:var(--olive-ink);margin-top:.35rem;}
.post-reviewed a{white-space:nowrap;}
.meta-author{font-weight:600;color:var(--pine);}
.dot-sep{margin:0 .35rem;}
.post-hero{margin:0 0 clamp(1.8rem,3vw,3rem);}
.post-hero img{width:100%;height:auto;aspect-ratio:21/9;object-fit:cover;object-position:50% 30%;border-radius:18px;background:var(--beige);}
.post-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(16rem,22rem);gap:clamp(2rem,5vw,5rem);align-items:start;padding-bottom:var(--space);}
.post-body{max-width:50rem;}
.post-body h2{font-size:var(--fs-h3);margin:2.2rem 0 .8rem;}
.post-body h3{font-size:clamp(1.25rem,calc(var(--u)*1.7),1.6rem);margin:1.8rem 0 .6rem;}
.post-body p,.post-body ul,.post-body ol{margin-bottom:1.15rem;}
.post-body ul,.post-body ol{padding-left:1.4rem;}
.post-body li{margin-bottom:.4rem;}
.post-body a{white-space:normal;}
.post-body blockquote{border-left:3px solid var(--olive);margin:1.8rem 0;padding:.2rem 0 .2rem 1.4rem;font-family:var(--display);font-size:clamp(1.4rem,calc(var(--u)*2),1.9rem);line-height:1.35;color:var(--pine);}
.post-body blockquote p{margin:0;}
.post-body hr{border:0;border-top:1px solid rgba(53,81,74,.2);margin:2rem 0;}
.post-body code{background:var(--beige);padding:.1rem .35rem;border-radius:5px;font-size:.92em;}
.post-hero-banner img{aspect-ratio:42/9;}
.post-figure{margin:2rem 0;}
.post-figure img{width:100%;height:auto;border-radius:14px;}
.post-figure figcaption{font-size:var(--fs-small);color:var(--olive-ink);margin-top:.6rem;}
.post-aside{position:sticky;top:1.5rem;display:grid;gap:1.4rem;}
.author-card{background:var(--ivory);border:1px solid rgba(53,81,74,.14);border-radius:16px;padding:1.5rem;display:grid;gap:.35rem;justify-items:start;}
.author-photo{width:5.5rem;height:5.5rem;border-radius:50%;object-fit:cover;object-position:50% 15%;margin-bottom:.6rem;background:var(--beige);}
.author-photo-logo{object-fit:contain;padding:.5rem;}
.author-label{font-size:var(--fs-small);color:var(--olive-ink);font-weight:600;}
.author-name{font-family:var(--display);font-weight:600;font-size:var(--fs-h3);line-height:1.15;color:var(--pine);}
.author-role,.author-bio{font-size:var(--fs-small);}
.author-card a{font-size:var(--fs-small);font-weight:600;white-space:normal;}
.tag-row{display:flex;flex-wrap:wrap;gap:.5rem .9rem;align-items:center;font-size:var(--fs-small);}
.tag{color:var(--pine);font-weight:600;white-space:normal;}

.related{background:var(--cream);border-top:1px solid rgba(53,81,74,.12);}
.related h2{margin-bottom:1.6rem;}
.related-all{margin-top:1.6rem;font-weight:600;}

@media (max-width:960px){
  .post-layout{grid-template-columns:1fr;}
  .post-aside{position:static;}
  .post-hero img{aspect-ratio:16/9;}
  .post-hero-banner img{aspect-ratio:32/9;}
}
@media (max-width:640px){
  .search-row{grid-template-columns:1fr;}
  .blog-controls select{width:100%;}
  .blog-grid{grid-template-columns:1fr;}
}

/* ---------- boxes inside a post (::: card, ::: steps) ---------- */
.post-box-title{font-family:var(--display);font-weight:600;font-size:clamp(1.35rem,calc(var(--u)*1.9),1.8rem);line-height:1.2;color:var(--pine);margin-bottom:1rem;}
.post-box{background:var(--ivory);border:1px solid rgba(53,81,74,.16);border-left:5px solid var(--sage-deep);border-radius:16px;padding:clamp(1.3rem,2.6vw,2rem);margin:1.8rem 0 2rem;}
.post-box ul{list-style:none;padding-left:0;display:grid;gap:.75rem;margin-bottom:0;}
.post-box li{margin:0;padding-left:1.1rem;position:relative;}
.post-box li::before{content:"";position:absolute;left:0;top:.62em;width:.45rem;height:.45rem;border-radius:50%;background:var(--olive);}
.post-box p:last-child{margin-bottom:0;}
.post-box .post-figure{margin:0 0 1.1rem;}
.post-box .post-figure img{width:auto;max-width:100%;height:2.4rem;border-radius:0;}
.post-steps{background:var(--pine);color:var(--ivory);border-radius:18px;padding:clamp(1.4rem,3vw,2.4rem);margin:2rem 0 2.2rem;}
.post-steps .post-box-title{color:var(--ivory);}
.post-steps ol{list-style:none;counter-reset:step;padding-left:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));gap:clamp(1rem,2.4vw,1.8rem);margin:0;}
.post-steps li{counter-increment:step;margin:0;display:grid;gap:.5rem;align-content:start;}
.post-steps li::before{content:counter(step);font-family:var(--display);font-weight:700;font-size:1.7rem;line-height:1;width:2.8rem;height:2.8rem;border-radius:50%;display:grid;place-items:center;background:var(--olive);color:var(--pine);}
.post-steps strong{display:block;font-size:1.12em;color:var(--ivory);}
.post-steps a{color:var(--ivory);}
.post-body a[href^="tel:"]{white-space:nowrap;}