/* blog.html: page-only parts on top of site.css + listing.css (tokens only, prefix bl-) */

.bl-topics{margin-top:1.25rem}

/* main column + widgets: widgets fall below the posts on phones and tablets */
.bl-layout{display:grid;gap:2rem;padding-block:clamp(1.5rem,1rem + 2vw,2.5rem) var(--sec)}
.bl-main{min-width:0}
.bl-main>*+*{margin-top:clamp(2.25rem,1.8rem + 1.6vw,3.25rem)}
@media (min-width:1024px){.bl-layout{grid-template-columns:minmax(0,1fr) 19rem;gap:2.75rem;align-items:start}.bl-side{position:sticky;top:6rem}}

.bl-h2{display:flex;align-items:center;gap:.55rem;margin-bottom:1rem;font-size:clamp(1.4rem,1.2rem + .8vw,1.85rem)}
.bl-h2 .rp-ic{color:var(--moon-text);width:1.4rem;height:1.4rem}
.bl-headrow{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.25rem 1rem;margin-bottom:1rem}
.bl-headrow .bl-h2{margin-bottom:0}
.bl-count{color:var(--muted);font-size:.95rem}
.bl-count b{color:var(--ink)}
.bl-sub{margin:-.4rem 0 1rem;color:var(--muted)}

.bl-lead .rp-card__media img{aspect-ratio:16/9}
@media (min-width:768px){
  .bl-lead{flex-direction:row}
  .bl-lead .rp-card__media{flex:0 0 52%}
  .bl-lead .rp-card__media img{height:100%;aspect-ratio:auto;min-height:20rem}
  .bl-lead .rp-card__body{padding:1.4rem 1.5rem}
}
.bl-lead .rp-card__foot .rp-byline{font-size:.85rem}

/* row cards: the photo fills the card's height whatever its own shape */
.bl-rows .rp-post--row .rp-card__media{min-height:7.5rem}
.bl-rows .rp-post--row .rp-card__media img{position:absolute;inset:0;width:100%;height:100%;min-height:0}

/* widgets */
.bl-side{display:grid;gap:1rem;align-content:start}
.bl-widget{padding:1rem 1.05rem;border-radius:var(--r-m);background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1)}
.bl-widget__title{display:flex;align-items:center;gap:.45rem;margin-bottom:.7rem;font:700 1.02rem var(--display);color:var(--ink)}
.bl-widget__title .rp-ic{color:var(--act)}
.bl-widget .rp-finder{padding-left:.75rem}
.bl-first{display:grid;gap:.15rem;counter-reset:bf}
.bl-first li{position:relative;display:grid;grid-template-columns:1.7rem minmax(0,1fr);column-gap:.6rem;padding:.45rem .2rem;border-top:1px dashed var(--line-2)}
.bl-first li:first-child{border-top:0}
.bl-first li::before{counter-increment:bf;content:counter(bf);grid-row:span 2;display:grid;place-items:center;width:1.7rem;height:1.7rem;border-radius:999px;background:var(--night);color:var(--moon);font:800 .85rem/1 var(--display)}
.bl-first a{color:var(--ink);font-weight:700;font-size:.95rem;line-height:1.35;text-decoration:none}
.bl-first a:hover{color:var(--act);text-decoration:underline}
.bl-first span{font-size:.82rem;color:var(--muted)}
.bl-links{display:flex;flex-wrap:wrap;gap:.2rem 1rem}

.bl-season,.bl-ask{position:relative;display:grid;grid-template-columns:2.6rem minmax(0,1fr) auto;gap:.75rem;align-items:center;padding:.9rem 1rem;border-radius:var(--r-m);text-decoration:none}
.bl-season{background:var(--night);color:var(--night-muted)}
.bl-season b{display:block;color:#fff;font:700 1rem var(--display)}
.bl-season>.rp-ic{color:var(--moon)}
.bl-season__ico{display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:12px;background:rgb(255 255 255/.1);color:var(--moon)}
.bl-season span:not(.bl-season__ico),.bl-ask span:not(.bl-season__ico){font-size:.88rem;line-height:1.4}
.bl-ask{background:var(--moon-soft);color:var(--moon-text)}
.bl-ask b{display:block;color:var(--ink);font:700 1rem var(--display)}
.bl-ask .bl-season__ico{background:#fff;color:var(--moon-text)}
.bl-season:hover b,.bl-ask:hover b{text-decoration:underline}
.bl-season .rp-early{position:static;grid-column:1/-1}

/* keep the single phone column and the 19rem rail from growing to their widest child */
.bl-layout{grid-template-columns:minmax(0,1fr)}
@media (min-width:1024px){.bl-layout{grid-template-columns:minmax(0,1fr) 19rem}}
.bl-side{min-width:0}
.bl-widget .rp-finder input{width:0}
.bl-first a{display:block;padding-block:.15rem}
@media (max-width:899px){.bl-art{width:min(72%,17rem)}}
.bl-lead .rp-card__foot{flex-wrap:wrap}
.bl-chips{padding:0;background:none}

/* tidy 2026-10-18: on phones the latest posts lie in rows (photo beside the text), so eight cards stay short */
@media (max-width:639px){
  .bl-grid .rp-post{flex-direction:row}
  .bl-grid .rp-post .rp-card__media{position:relative;flex:0 0 6.75rem}
  .bl-grid .rp-post .rp-card__media img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto}
  .bl-grid .rp-post .rp-card__body{padding:.8rem .9rem;gap:.35rem}
  .bl-grid .rp-post .rp-card__title{font-size:1rem}
  .bl-grid .rp-post .rp-card__foot .rp-more{display:none}
}