/* /blog — stories index, aligned with shared .sub-hero */

.site-main:has(.blog-page){padding:0}
.blog-page{background:var(--cream)}

/* Beat legacy .blog-hero rules in styles.css (h1 83px, serif lead, short min-height) */
.sub-hero.blog-hero{
  --archive-hero-h:280px;
  min-height:var(--archive-hero-h);
  padding:28px clamp(27px,5vw,77px) 32px;
  background-image:
    linear-gradient(100deg,#002a1f 0%,rgba(0,35,26,.96) 34%,rgba(0,34,26,.38) 72%,rgba(0,29,22,.55) 100%),
    url('../img/proto/hero-blog.webp');
  background-size:cover;
  background-position:center,center 38%;
}
.sub-hero.blog-hero .sub-hero-copy{max-width:min(640px,54%)}
.sub-hero.blog-hero h1{
  font-size:clamp(36px,4.8vw,56px);
  margin:6px 0 8px;line-height:.96;letter-spacing:-.02em;
}
.sub-hero.blog-hero p{
  font-family:var(--sans);
  font-size:14px;font-weight:400;color:#e5eee7;
  max-width:46ch;margin:0 0 12px;line-height:1.45;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
}

.blog-content{padding-top:24px;padding-bottom:48px}

.blog-toolbar{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:12px 16px;margin:0 0 22px;
}
.blog-categories{display:flex;flex-wrap:wrap;gap:8px}
.blog-categories a{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 14px;border-radius:999px;
  border:1px solid #d2d3c9;background:#fff;color:var(--forest);
  font-size:12px;font-weight:750;text-decoration:none;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.blog-categories a small{
  font-family:var(--serif);font-size:13px;font-weight:800;opacity:.55;
}
.blog-categories a:hover{border-color:#a8b9a6;background:#f3f6f2}
.blog-categories a.is-active{
  background:var(--forest);border-color:var(--forest);color:#fff;
}
.blog-categories a.is-active small{opacity:.85;color:var(--lime)}
.blog-search{
  flex:0 1 240px;min-height:42px;background:#fff;border-color:#ddd9ce;
}

/* Featured */
.blog-featured{
  display:grid;grid-template-columns:1.15fr .95fr;gap:0;overflow:hidden;
  margin:0 0 28px;border-radius:18px;border:1px solid #e1e0d5;background:#fff;
  box-shadow:0 14px 32px rgba(7,27,21,.06);
  animation:blog-rise .55s cubic-bezier(.22,1,.36,1) both;
}
@keyframes blog-rise{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:none}
}
.blog-featured[hidden]{display:none!important}
.blog-featured-media{
  display:block;min-height:300px;background:#0a2a20;overflow:hidden;
}
.blog-featured-media img{
  width:100%;height:100%;min-height:300px;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.22,1,.36,1);
}
.blog-featured:hover .blog-featured-media img{transform:scale(1.03)}
.blog-featured-copy{
  display:flex;flex-direction:column;align-items:flex-start;gap:8px;
  padding:clamp(22px,3vw,36px);
}
.blog-featured-copy h2{
  margin:4px 0 0;font-size:clamp(1.55rem,2.8vw,2.15rem);
  letter-spacing:-.03em;line-height:1.1;color:var(--forest);
  font-family:var(--serif);
}
.blog-featured-copy h2 a{color:inherit;text-decoration:none}
.blog-featured-copy h2 a:hover{color:var(--evergreen,#0a3d2c)}
.blog-featured-copy > p{
  margin:0;font-family:var(--sans);font-size:14px;line-height:1.5;color:var(--muted);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
}
.blog-featured-copy .button{margin-top:auto}

.blog-pill{
  display:inline-flex;align-items:center;
  padding:4px 10px;border-radius:999px;
  background:rgba(177,238,120,.22);border:1px solid rgba(177,238,120,.35);
  color:var(--forest);font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
}
.blog-meta{
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
}

/* Grid */
.blog-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;
}
.blog-tile{
  display:flex;flex-direction:column;overflow:hidden;
  border:1px solid #e4e1d6;border-radius:14px;background:#fff;
  transition:transform .25s ease,box-shadow .25s ease;
  animation:blog-rise .55s cubic-bezier(.22,1,.36,1) both;
}
.blog-tile[hidden]{display:none!important}
.blog-tile:hover{
  transform:translateY(-3px);box-shadow:0 14px 28px rgba(7,27,21,.1);
}
.blog-tile-media{
  position:relative;display:block;height:170px;overflow:hidden;background:#0b3024;
}
.blog-tile-media img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .4s ease;
}
.blog-tile:hover .blog-tile-media img{transform:scale(1.04)}
.blog-tile-placeholder{display:block;height:100%;background:#dfe6df}
.blog-tile-media .blog-pill{position:absolute;top:10px;left:10px;z-index:1}
.blog-score{
  position:absolute;top:10px;right:10px;z-index:1;
  padding:4px 8px;border-radius:8px;
  background:linear-gradient(120deg,#c9a227,#e6aa47);color:#1a1608;
  font-size:12px;font-weight:800;
}
.blog-score small{font-weight:650;opacity:.7;font-size:10px}
.blog-tile-copy{padding:14px 16px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.blog-tile-copy h3{
  margin:0;font-family:var(--serif);font-size:clamp(1.05rem,1.6vw,1.25rem);
  letter-spacing:-.02em;line-height:1.2;
}
.blog-tile-copy h3 a{color:var(--forest);text-decoration:none}
.blog-tile-copy h3 a:hover{color:var(--evergreen,#0a3d2c)}
.blog-tile-copy p{
  margin:0;font-family:var(--sans);font-size:13px;line-height:1.45;color:var(--muted);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
}

.blog-empty{
  text-align:center;padding:48px 16px;max-width:420px;margin:0 auto;
}
.blog-empty h2{margin:8px 0 10px;font-size:clamp(1.35rem,3vw,1.7rem);color:var(--forest)}
.blog-empty p{margin:0 0 16px;color:var(--muted);line-height:1.45}
.blog-empty--filter{padding:28px 16px;color:var(--muted);font-size:14px}

.blog-ribbon{
  min-height:180px;
  background-image:linear-gradient(90deg,rgba(0,29,22,.55),rgba(0,29,22,.15) 44%,#00271edd),url('../img/proto/hero-blog.webp');
  background-size:cover;background-position:center;
  display:flex;align-items:center;justify-content:flex-end;
  padding:28px clamp(24px,6vw,95px);
}
.blog-ribbon>div{
  font-size:13px;letter-spacing:.2em;line-height:2;color:#eaf1eb;max-width:340px;
}

@media(max-width:1000px){
  .blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:800px){
  .sub-hero.blog-hero .sub-hero-copy{max-width:100%}
  .sub-hero.blog-hero h1{font-size:clamp(32px,9vw,44px)}
  .sub-hero.blog-hero p{font-size:13px;-webkit-line-clamp:unset}
  .blog-featured{grid-template-columns:1fr}
  .blog-featured-media,.blog-featured-media img{min-height:220px}
  .blog-search{flex:1 1 100%;max-width:none}
  .blog-themes a{min-height:40px;display:inline-flex;align-items:center}
}
@media(max-width:560px){
  .blog-grid{grid-template-columns:1fr}
  .sub-hero.blog-hero{--archive-hero-h:240px;padding:24px 23px}
}
@media(prefers-reduced-motion:reduce){
  .blog-featured,.blog-tile{animation:none}
}