/* Blog index. A port of 04 Blog.dc.html: its inline styles as classes, its <helmet> media rules as written.
   Breakpoints: tablet <= 1023px, phone <= 640px. Shared tokens and components live in site.css. */

.bl-sec{position:relative;border-top:1px solid #e3ecf4;padding-block:clamp(64px,8vw,112px) clamp(64px,7vw,96px)}
.bl-wrap{display:flex;flex-direction:column;gap:clamp(40px,5vw,56px)}
.bl-intro{display:flex;flex-direction:column;gap:20px;max-width:820px}
.bl-h1{margin:0;font:440 var(--text-display)/1.15 var(--font);letter-spacing:-.02em;color:#0b2239;text-wrap:pretty}
.bl-h1 span{color:#647489}

/* Sidebar and list share a wrapping row; the sidebar sticks only while both fit side by side (240 + 56 + 560). */
.bl-row{display:flex;flex-wrap:wrap;gap:40px 56px;align-items:flex-start;container-type:inline-size}
.bl-aside{flex:1 1 240px;min-width:0;max-width:100%;display:flex;flex-direction:column;gap:20px;top:24px}
@container (min-width:856px){.bl-aside{position:sticky}}

.bl-search{display:flex;align-items:center;height:40px;padding:0 14px;border:1px solid #dde6ef;border-radius:4px;background:#fff}
.bl-search:focus-within{border-color:#0872b0;box-shadow:0 0 0 1px #0872b0}
.bl-search svg{flex:none;margin-right:10px}
.bl-search input{flex:1;min-width:0;margin:0;padding:0;border:0;outline:0;background:transparent;font:440 var(--text-sm)/20px var(--font);color:#0b2239}
.bl-search input::placeholder{color:#8a98aa}

.bl-topics{display:flex;flex-direction:column}
.bl-chip{display:flex;justify-content:space-between;gap:12px;margin:0;padding:9px 12px;border:0;border-left:2px solid #e3ecf4;border-radius:0;background:transparent;font:440 var(--text-sm)/20px var(--font);color:#4d5f75;text-align:left;cursor:pointer}
.bl-chip .bl-n{color:#647489}
.bl-chip:hover{color:#0b2239;border-left-color:#b7d9f0}
.bl-chip.bl-on{border-left-color:#0872b0;background:#f5f9fd;font-weight:500;color:#0b2239}
.bl-chip.bl-on .bl-n{color:#647489}

.bl-list{flex:999 1 560px;min-width:0;display:flex;flex-direction:column}
.bl-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;padding-bottom:16px;border-bottom:1px solid #e3ecf4}
.bl-head h2{margin:0;font:500 var(--text-lg)/1.3 var(--font);color:#0b2239}
.bl-head h2:focus{outline:0}
#bl-count{font:440 var(--text-sm)/1 var(--font);color:#647489}
.bl-item{display:flex;flex-direction:column;gap:6px;padding:20px 0;border-bottom:1px solid #eef3f8;color:inherit}
.bl-item:hover{color:inherit;background:#fafcfe}
.bl-item[hidden]{display:none}
.bl-pt{font:500 var(--text-base)/1.35 var(--font);color:#0b2239;text-wrap:pretty}
.bl-pd{font:440 var(--text-base)/1.55 var(--font);color:#4d5f75;text-wrap:pretty}
.bl-meta{display:flex;gap:12px;flex-wrap:wrap;padding-top:4px;font:440 var(--text-sm)/1.4 var(--font)}
.bl-g{color:#0872b0}
.bl-d{color:#647489}

.bl-empty{display:flex;flex-direction:column;gap:12px;align-items:flex-start;padding:48px 0}
.bl-empty[hidden]{display:none}
.bl-empty p{margin:0;font:440 var(--text-base)/1.5 var(--font);color:#4d5f75}
#bl-clear{display:inline-flex;align-items:center;height:36px;margin:0;padding:0 16px;border:1px solid #b7d9f0;border-radius:4px;background:#fff;color:#0872b0;font:550 var(--text-sm)/1 var(--font);cursor:pointer}
#bl-clear:hover{background:#f5f9fd}

.bl-pager{display:flex;gap:8px;flex-wrap:wrap;padding-top:32px;font:500 var(--text-sm)/1 var(--font)}
.bl-pager[hidden]{display:none}
.bl-pg{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px;margin:0;padding:0 10px;border-radius:4px}
.bl-pg-cur{background:#0b2239;color:#fff}
button.bl-pg{border:1px solid #dde6ef;background:#fff;color:#0b2239;font:inherit;cursor:pointer}
button.bl-pg:hover{border-color:#b7d9f0;color:#0872b0}
.bl-pg-gap{display:inline-flex;align-items:center;height:36px;padding:0 4px;color:#647489}

/* Keyboard focus */
.bl-sec a:focus-visible,.bl-sec button:focus-visible{outline:2px solid #0872b0;outline-offset:2px}
.bl-chip:focus-visible{outline-offset:-2px}

@media (max-width:1023px){
.bl-topics{flex-direction:row;flex-wrap:wrap;gap:8px}
.bl-chip,.bl-chip:hover{flex:none;justify-content:flex-start;gap:6px;padding:8px 14px;border:1px solid #dde6ef;border-radius:999px;background:#fff}
.bl-chip.bl-on,.bl-chip.bl-on:hover{border-color:#0872b0;background:#f5f9fd}
}
@media (max-width:640px){
.bl-sec{padding-block:40px 56px}
.bl-h1{font-size:var(--text-xl);line-height:1.2}
.bl-search input{font-size:var(--text-base)} /* 16px or iOS zooms the page on focus */
.bl-topics{flex-wrap:nowrap;min-width:0;overflow-x:auto;margin-inline:-16px;padding-inline:16px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.bl-topics::-webkit-scrollbar{display:none}
.bl-chip,.bl-chip:hover{font-size:var(--text-sm);padding:7px 12px}
.bl-pt{font-size:var(--text-base)}
.bl-pd{font-size:var(--text-sm)}
}

@media (max-width:1023px){.bl-h1{font-size:var(--text-xl)}}