/* Blog roll — extras beyond interior.css.
   Two-column post grid + a 330px widget sidebar (search, sort, categories,
   most-read, archive) with the promo cards interleaved. Ported from
   mockups/template-blog-roll.html. */

.roll-grid{display:grid;grid-template-columns:1fr 330px;gap:60px;align-items:start;padding-top:0}
.roll-main .filters{padding-top:30px}
.roll-posts{grid-template-columns:1fr 1fr !important}
.roll-side{position:sticky;top:108px;padding-top:34px}

.widget{background:var(--surface);border:1px solid var(--rule);border-radius:10px;
  padding:26px 26px 28px;margin-bottom:22px}
.wtitle{font-family:"IBM Plex Mono",monospace;font-size:12.5px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--annotation);margin:0 0 18px}
.wsearch,.wselect{width:100%;font-family:Inter,sans-serif;font-size:17px;padding:13px 15px;
  border:1px solid var(--rule);border-radius:5px;background:var(--canvas);color:var(--body)}
.wsearch:focus,.wselect:focus{outline:2px solid var(--action);outline-offset:2px}
.wlist{list-style:none;margin:0;padding:0}
.wlist li{display:flex;justify-content:space-between;gap:14px;padding:11px 0;
  border-bottom:1px solid var(--rule);font-size:17px}
.wlist li:last-child{border-bottom:none;padding-bottom:0}
.wlist a{color:var(--body);text-decoration:none}
.wlist a:hover{color:var(--brand)}
.wlist span{color:var(--annotation);font-family:"IBM Plex Mono",monospace;font-size:13px}
.wposts{list-style:none;margin:0;padding:0}
.wposts li{padding:14px 0;border-bottom:1px solid var(--rule)}
.wposts li:last-child{border-bottom:none;padding-bottom:0}
.wposts a{display:block;font-family:Sora,sans-serif;font-weight:500;font-size:17px;line-height:1.35;
  color:var(--ink);text-decoration:none;letter-spacing:-.01em}
.wposts a:hover{color:var(--brand)}
.wposts .meta{display:block;margin-top:7px}
.wcta{background:var(--ink);border-color:var(--ink)}
.wcta p{color:#B4BAD4;font-size:16.5px;line-height:1.55;margin:0 0 18px}

/* the featured card thumbnail may hold a real image behind the label */
.feature .thumb{position:relative;overflow:hidden}
.feature .thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.roll-posts .post{display:block;text-decoration:none}

@media(max-width:1080px){
  .roll-grid{grid-template-columns:1fr;gap:44px}
  .roll-side{position:static;padding-top:0}
  .roll-posts{grid-template-columns:1fr 1fr !important}
}
@media(max-width:700px){ .roll-posts{grid-template-columns:1fr !important} }