/* blog.php — layout only; components come from ui-v2.css */

/* hero (short dark band) */
.blog-hero{padding:calc(var(--nav-h) + 48px) 0 48px}
.blog-hero .eyebrow{display:inline-flex;margin-bottom:var(--s-4)}
.blog-hero h1{max-width:24ch;margin:0 0 var(--s-4)}
.blog-hero p{margin:0}
@media (max-width:480px){.blog-hero{padding:calc(var(--nav-h) + 32px) 0 32px}}

/* category tabs: sticky under the condensed nav */
.blog-cats{position:sticky;top:var(--nav-h-scrolled);z-index:5;background:var(--paper);border-bottom:var(--border);padding:10px 0}
.blog-cats .chip{flex:0 0 auto}

/* featured post: media left, copy right from 768 */
.blog-cards .container{display:grid;gap:var(--grid-gap)}
.blog-featured{width:100%}
.blog-featured .card__body{gap:10px;padding:var(--s-5)}
.blog-featured h3{font-size:clamp(22px,1.1rem+1.3vw,32px);line-height:1.15;letter-spacing:-.02em}
.blog-featured p{font-size:var(--fs-body)}
@media (min-width:768px){
  .blog-featured{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
  .blog-featured .card__media{border-bottom:0;border-right:var(--border);height:100%}
  .blog-featured .card__body{justify-content:center;padding:clamp(24px,3vw,40px)}
}

/* card internals shared by featured + grid */
.blog-cards .card__media picture{display:block;width:100%;height:100%}
.blog-cards .card__media.cover-fallback{background:var(--grad-sky);min-height:0}
.blog-cards .card__meta{font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;color:var(--text-muted);margin-top:auto;padding-top:6px}
.blog-list .card__body h3{font-size:18px;line-height:1.3}
.blog-list .card__body{min-width:0}

/* the rest: 3-up on desktop, compact rows on phones */
@media (max-width:768px){
  .blog-list{gap:10px}
  .blog-list>.card{flex-direction:row;align-items:center;gap:var(--s-4);padding:var(--s-3);border-radius:var(--r-lg)}
  .blog-list>.card .card__media{flex:0 0 96px;aspect-ratio:4/3;border:var(--border);border-radius:var(--r-sm);min-height:0}
  .blog-list>.card .card__media.cover-fallback{padding:8px}
  .blog-list>.card .card__media.cover-fallback::before{font-size:44px;top:-4px;right:6px}
  .blog-list>.card .card__body{padding:0;gap:4px}
  .blog-list>.card .card__body h3{font-size:16px}
  .blog-list>.card .card__body p{display:none}
  .blog-list>.card .card__meta{padding-top:2px}
  .blog-list>.card .card__go{display:none}
  .blog-featured .card__body{padding:var(--s-4)}
}

/* pagination */
.blog-pager{justify-content:center;margin-top:var(--s-6)}
.blog-pager .chip{min-width:40px;min-height:40px;justify-content:center}

/* empty state */
.blog-empty{text-align:center;padding:var(--s-8) 0}
.blog-empty h3{color:var(--text-muted);font-size:var(--fs-h4);font-weight:500}
.blog-empty p{color:var(--text-muted);margin-top:8px}

/* browse by topic: ruled lists in 3 columns */
.topics-grid{align-items:start;gap:var(--s-6) var(--grid-gap)}
.topic-group h3{font-size:var(--fs-h4);line-height:1.3;letter-spacing:-.01em;margin:0 0 6px;color:var(--ink)}
.topic-group h3 .count{font-family:var(--font-mono);font-size:12px;font-weight:500;color:var(--text-muted);margin-left:4px}
.topic-group .list-ruled>li{padding:0}
.topic-group .list-ruled>li:first-child{border-top:var(--border)}
.topic-group .list-ruled a{display:block;min-height:40px;padding:9px 0;font-size:var(--fs-small);line-height:1.4;color:var(--text);text-decoration:none;transition:color var(--dur-2) var(--ease-out)}
.topic-group .list-ruled a:hover{color:var(--blue)}
.topic-more summary{list-style:none;cursor:pointer;display:flex;align-items:center;min-height:40px;padding:8px 0;border-top:var(--border);font-size:var(--fs-small);font-weight:600;color:var(--blue)}
.topic-more summary::-webkit-details-marker{display:none}
.topic-more summary::after{content:"";width:8px;height:8px;margin-left:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform var(--dur-2) var(--ease-out)}
.topic-more[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.topic-more[open] summary{color:var(--text-muted)}
.topic-more .less,.topic-more[open] .more{display:none}
.topic-more[open] .less{display:inline}
@media (max-width:1000px) and (min-width:769px){.topics-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:768px){.topics-grid{gap:var(--s-5)}}
@media (max-width:768px){
  .topic-group .list-ruled a{font-size:var(--fs-micro);padding:7px 0}
  .topic-more summary{padding:6px 0}
}