/* ===========================================================================
   AudiMusic — Blog / News styles. Loads AFTER css/app.css (reuses brand tokens
   + the left .rail, .nav and .adslot advert styling from the radio).
   =========================================================================== */

/* full-width content column (sits to the right of the fixed .rail via .app).
   flex:1 so the shared .app flex column pushes the footer to the bottom (aligns with the rail). */
.blogwrap{ max-width:none; margin:0; padding:4px 6px 28px; flex:1 0 auto; }

/* mobile hamburger — shown only when the rail collapses (<=920px, matches app.css) */
.blogham{ display:none; position:fixed; top:12px; left:12px; z-index:46; width:42px; height:42px; border-radius:12px;
  background:var(--surf); box-shadow:var(--rise-sm); border:none; color:var(--ink); align-items:center; justify-content:center; cursor:pointer; }
.blogham .mi{ font-size:22px; }
@media(max-width:920px){ .blogham{ display:flex; } .blogwrap{ padding-top:54px; } }

/* ---- page heading ---- */
.bloghead{ padding:26px 0 6px; }
.bloghead h1{ font-family:"Poppins",sans-serif; font-weight:600; font-size:clamp(28px,4vw,40px); color:var(--ink); margin:0 0 8px; letter-spacing:-.01em; }
.bloghead p{ color:var(--muted); font-size:15px; max-width:620px; margin:0; line-height:1.6; }

/* ---- date menu (month filter chips) ---- */
.datemenu{ display:flex; flex-wrap:wrap; gap:9px; margin:18px 0 22px; }
.datemenu .dm{ background:var(--surf); box-shadow:var(--rise-sm); border:none; color:var(--muted); font-family:inherit; font-weight:600;
  font-size:13px; padding:9px 15px; border-radius:12px; cursor:pointer; display:inline-flex; align-items:center; gap:7px; }
.datemenu .dm:hover{ color:var(--ink); }
.datemenu .dm.on{ color:var(--acc); box-shadow:var(--press); }
.datemenu .dm span{ font-family:"JetBrains Mono",monospace; font-size:10px; color:var(--muted2); }

/* ---- featured hero card (latest post, full width) ---- */
.feat{ position:relative; display:grid; grid-template-columns:1.25fr 1fr; gap:0; background:var(--surf);
  border-radius:20px; overflow:hidden; box-shadow:var(--rise-sm); border:1px solid var(--line); margin:0 0 26px; cursor:pointer; transition:border-color .16s; }
.feat:hover{ border-color:var(--acc); }
.feat .feat-img{ background-size:cover; background-position:center; background-color:#0d0e12; min-height:320px; }
.feat .feat-body{ padding:34px 38px; display:flex; flex-direction:column; justify-content:center; }
.feat .feat-body h2{ font-family:"Poppins",sans-serif; font-weight:600; font-size:28px; line-height:1.2; color:var(--ink); margin:12px 0 12px; }
.feat .feat-body p{ color:var(--muted); font-size:15px; line-height:1.6; margin:0 0 18px; }
@media(max-width:760px){ .feat{ grid-template-columns:1fr; } .feat .feat-img{ min-height:200px; } .feat .feat-body{ padding:24px; } }

/* ---- month sub-heading (used inside a filtered month) ---- */
.monthsec{ margin:0 0 14px; }
.monthsec h3{ font-family:"Poppins",sans-serif; font-weight:600; font-size:14px; text-transform:uppercase; letter-spacing:.12em;
  color:var(--muted2); margin:0 0 16px; display:flex; align-items:center; gap:12px; }
.monthsec h3::after{ content:""; flex:1; height:1px; background:var(--line); }

/* ---- post grid + cards (full-width responsive) ---- */
.postgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:20px; align-items:stretch; }

.pcard{ background:var(--surf); border-radius:16px; overflow:hidden; box-shadow:var(--rise-sm); border:1px solid var(--line);
  cursor:pointer; display:flex; flex-direction:column; text-align:left; padding:0; transition:border-color .16s; }
.pcard:hover{ border-color:var(--acc); }
.pcard .pc-img{ aspect-ratio:16/9; background-size:cover; background-position:center; background-color:#0d0e12; }
.pcard .pc-body{ padding:16px 17px 18px; display:flex; flex-direction:column; flex:1; }
.pcard h4{ font-family:"Poppins",sans-serif; font-weight:600; font-size:16.5px; line-height:1.3; color:var(--ink); margin:9px 0 8px; }
.pcard .pc-ex{ color:var(--muted); font-size:13px; line-height:1.55; margin:0 0 14px; flex:1; }
.pcard .pc-meta{ color:var(--muted2); font-size:11.5px; font-family:"JetBrains Mono",monospace; display:flex; gap:8px; align-items:center; margin-top:auto; }

.cat{ display:inline-flex; align-items:center; align-self:flex-start; font-family:"JetBrains Mono",monospace; font-size:10px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--acc); background:rgba(255,122,69,.1); padding:4px 9px; border-radius:7px; }

/* the radio .adslot is reused for adverts; just make sure it spans the grid row */
.postgrid .adslot{ grid-column:1/-1; }

/* photo fills its cell (cards, featured hero, single-post hero) */
.pc-img .cell-img,.feat-img .cell-img,.post-hero .cell-img{ width:100%; height:100%; object-fit:cover; display:block; }
.feat .feat-img{ overflow:hidden; }

/* ---- pagination ---- */
.pager{ display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; margin:38px 0 10px; }
.pager .pg{ min-width:42px; height:42px; padding:0 14px; border-radius:12px; border:none; background:var(--surf); box-shadow:var(--rise-sm);
  color:var(--muted); font-family:inherit; font-weight:600; font-size:13.5px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.pager .pg:hover:not(:disabled){ color:var(--ink); }
.pager .pg.on{ color:var(--acc); box-shadow:var(--press); }
.pager .pg:disabled{ opacity:.4; cursor:default; }
.pager .dots{ color:var(--muted2); padding:0 4px; }

/* =========================== SINGLE POST =========================== */
.a-back{ display:inline-flex; align-items:center; gap:6px; color:var(--muted); font-weight:600; font-size:13px;
  text-decoration:none; margin:18px 0 16px; }
.a-back:hover{ color:var(--acc); }

/* hero spans the full content width */
.post-hero{ width:100%; aspect-ratio:21/9; max-height:480px; background-size:cover; background-position:center;
  background-color:#0d0e12; border-radius:18px; margin:2px 0 26px; }
@media(max-width:760px){ .post-hero{ aspect-ratio:16/9; } }

/* …but the article text stays in a comfortable reading column */
.article{ max-width:760px; margin:0 auto; }
.article h1{ font-family:"Poppins",sans-serif; font-weight:600; font-size:clamp(26px,4vw,38px); line-height:1.2; color:var(--ink);
  margin:14px 0 14px; letter-spacing:-.01em; }
.article .a-meta{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; color:var(--muted2);
  font-family:"JetBrains Mono",monospace; font-size:12px; padding-bottom:18px; border-bottom:1px solid var(--line); margin-bottom:8px; }

/* prose */
.prose{ color:var(--ink); }
.prose p{ font-size:16.5px; line-height:1.75; color:#cfd2da; margin:20px 0; }
:root[data-theme="light"] .prose p{ color:#2a2d35; }
.prose h2{ font-family:"Poppins",sans-serif; font-weight:600; font-size:23px; color:var(--ink); margin:36px 0 6px; }
.prose h3{ font-family:"Poppins",sans-serif; font-weight:600; font-size:19px; color:var(--ink); margin:28px 0 4px; }
.prose a{ color:var(--acc); text-decoration:underline; text-underline-offset:2px; }
.prose strong{ color:var(--ink); font-weight:600; }
.prose code{ font-family:"JetBrains Mono",monospace; font-size:.86em; background:var(--surf); padding:2px 6px; border-radius:6px; }
.prose ul,.prose ol{ padding-left:22px; margin:18px 0; }
.prose li{ font-size:16px; line-height:1.7; color:#cfd2da; margin:7px 0; }
:root[data-theme="light"] .prose li{ color:#2a2d35; }
.prose blockquote{ border-left:3px solid var(--acc); margin:26px 0; padding:6px 0 6px 20px; color:var(--muted);
  font-family:"Poppins",sans-serif; font-style:italic; font-size:18px; line-height:1.5; }
.prose figure{ margin:30px 0; }
.prose figure img{ width:100%; border-radius:14px; display:block; }
.prose figcaption{ color:var(--muted2); font-size:12.5px; text-align:center; margin-top:9px; font-family:"JetBrains Mono",monospace; }
.prose .adslot{ margin:30px 0; }

/* share bar */
.sharebar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:34px 0; padding:18px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.sharebar .sb-label{ color:var(--muted2); font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; margin-right:4px; }
.sharebar button,.sharebar a{ width:42px; height:42px; border-radius:12px; border:1px solid var(--line); background:var(--surf);
  color:var(--ink); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; text-decoration:none; transition:transform .12s, color .12s; }
.sharebar button:hover,.sharebar a:hover{ transform:translateY(-2px); color:var(--acc); border-color:var(--acc); }
.sharebar svg{ width:18px; height:18px; fill:currentColor; }

/* related */
.related{ margin-top:48px; }
.related h3{ font-family:"Poppins",sans-serif; font-weight:600; font-size:15px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted2); margin:0 0 16px; }

/* states */
.blog-empty,.blog-loading{ text-align:center; color:var(--muted); padding:80px 20px; font-size:15px; }
.blog-loading .spin{ width:30px; height:30px; border:3px solid var(--line); border-top-color:var(--acc); border-radius:50%;
  animation:bspin .8s linear infinite; margin:0 auto 16px; }
@keyframes bspin{ to{ transform:rotate(360deg); } }

/* footer: now uses the shared .site-foot component from app.css (same as Discover) */