/* =====================================================================
   Blog - the listing and the post. The post wears the content-page layout
   (shop/page.css); this adds what a page has no need of: a cover, pictures
   in the text, the meta line, cards and the shop's products under a post.
   ===================================================================== */

/* -------------------------------------------------------------- post */
.bl-meta{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0}
.bl-meta .pg-updated{margin:0}
.bl-cover{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  border-radius:8px;margin:0 0 26px;background:var(--soft)}
.pg-prose img{max-width:100%;height:auto;border-radius:8px}
.pg-prose figure{margin:6px 0 22px;text-align:center}
.pg-prose figure img{display:block;margin:0 auto}
.pg-prose figcaption{margin-top:8px;font-size:12.5px;line-height:1.5;color:var(--muted)}
.pg-prose figcaption:empty{display:none}
.pg-prose h4{margin:20px 0 8px;font-size:14.5px;font-weight:700;color:var(--ink)}

.bl-draft{background:#fff4d6;color:#5c4400;border-bottom:1px solid #f0d58a;
  padding:10px 16px;text-align:center;font-size:13px}
.bl-draft a{color:inherit;font-weight:700}
:root[data-theme="dark"] .bl-draft{background:#3a2f12;color:#f5dfa0;border-color:#5c4a1a}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .bl-draft{background:#3a2f12;color:#f5dfa0;border-color:#5c4a1a}
}

.bl-after{margin-top:34px}
.bl-after h2{margin:0 0 16px;font-size:19px;font-weight:800;letter-spacing:-.01em;color:var(--ink)}

/* ----------------------------------------------------------- listing */
.bl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:18px}
.bl-card{display:flex;flex-direction:column;overflow:hidden;text-decoration:none;color:var(--ink);
  background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);
  transition:border-color .18s,transform .18s,box-shadow .18s}
.bl-card:hover{border-color:var(--blue);transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(18,48,92,.12)}
.bl-img{display:block;aspect-ratio:16/9;background:var(--soft);overflow:hidden}
.bl-img img{display:block;width:100%;height:100%;object-fit:cover}
.bl-noimg{display:block;width:100%;height:100%;
  background:linear-gradient(115deg,#0d4fae 0%,var(--blue) 46%,#6d3bd6 118%);opacity:.85}
.bl-txt{display:flex;flex-direction:column;gap:8px;padding:16px 18px 18px;flex:1}
.bl-txt time{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.bl-txt b{font-size:16.5px;line-height:1.35;font-weight:800;letter-spacing:-.01em}
.bl-txt span{font-size:13.5px;line-height:1.6;color:var(--muted)}
.bl-txt em{margin-top:auto;padding-top:4px;font-style:normal;font-size:13px;font-weight:700;color:var(--blue)}

/* the newest post, on the first page, gets the width of the row */
@media(min-width:900px){
  .bl-card.lead{grid-column:1/-1;flex-direction:row}
  .bl-card.lead .bl-img{flex:0 0 56%;aspect-ratio:auto;min-height:300px}
  .bl-card.lead .bl-txt{padding:30px 32px;justify-content:center}
  .bl-card.lead .bl-txt b{font-size:24px}
  .bl-card.lead .bl-txt span{font-size:14.5px}
  .bl-card.lead .bl-txt em{margin-top:6px}
}

.bl-pages{display:flex;align-items:center;justify-content:center;gap:16px;margin:30px 0 0;
  font-size:13.5px;color:var(--muted)}
.bl-pages a{padding:9px 16px;border:1px solid var(--line);border-radius:4px;background:var(--surface);
  color:var(--ink);font-weight:700;text-decoration:none}
.bl-pages a:hover{border-color:var(--blue);color:var(--blue)}
.bl-empty{padding:60px 0;text-align:center;color:var(--muted)}

@media(max-width:620px){
  .bl-grid{grid-template-columns:minmax(0,1fr);gap:14px}
  .bl-cover{margin-bottom:18px}
}