/* blog.css */

/* ================= NAV ================= */

/* ================= BLOG CARD ================= */
.post{display:flex;flex-direction:column;background:#e2e2e8;text-decoration:none;color:#23004c;
  box-shadow:0 0 0 1px rgba(35,0,76,.12);transition:box-shadow .18s ease,transform .18s ease}
.post:hover{box-shadow:0 0 0 1px #7200d7,0 20px 40px -26px rgba(35,0,76,.5);transform:translateY(-3px)}
.post .tile{position:relative;aspect-ratio:16/9;overflow:hidden;background-color:#e4d9f8}
.post .tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s ease}
.post:hover .tile img{transform:scale(1.045)}
.post .cat{position:absolute;top:14px;left:14px;background:#fff;color:#7200d7;font-family:"IBM Plex Mono",monospace;
  font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;padding:7px 10px;box-shadow:0 0 0 1px rgba(35,0,76,.12)}
.post:hover .cta{color:#7200d7}
/* ================= BLOG · CATEGORY SIDEBAR ================= */
.topic-cat-btn{display:block;width:100%;text-align:left;background:none;border:0;padding:10px 12px;
  font-family:inherit;font-size:13.5px;font-weight:600;letter-spacing:-.008em;color:#23004c;cursor:pointer;
  border-radius:6px;transition:background .15s ease,color .15s ease}
.topic-cat-btn:hover{background:#f2e8fe;color:#7200d7}
.topic-cat-btn.on{background:#7200d7;color:#fff}
.topic-sub-btn{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;text-align:left;
  background:none;border:0;padding:8px 12px 8px 24px;font-family:inherit;font-size:12.5px;color:#4d3a70;
  cursor:pointer;border-radius:6px;transition:background .15s ease,color .15s ease}
.topic-sub-btn:hover{background:#f2e8fe;color:#7200d7}
.topic-sub-btn.on{background:#ece2fb;color:#7200d7;font-weight:600}
.topic-count{font-family:"IBM Plex Mono",monospace;font-size:10px;color:#8e7cab;flex:none}
.topic-cat-btn.on .topic-count,.topic-sub-btn.on .topic-count{color:rgba(255,255,255,.88)}
.topic-sub-btn.on .topic-count{color:#5b1aa8}
.topic-sub-btn.on .topic-count{color:#7200d7}
/* ---- hero: same field treatment as the About page ---- */
.ahero{position:relative;background:#23004c;color:#f6f1fd;overflow:hidden;
  display:flex;align-items:center;min-height:583px}
.afx{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none}
.avid{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 38%;display:block;filter:saturate(.34) contrast(1.06) brightness(.54)}
.ascrim{position:absolute;top:0;right:0;bottom:0;left:0;
  background:linear-gradient(100deg,rgba(18,0,42,.95) 0%,rgba(22,0,52,.91) 34%,rgba(34,0,82,.76) 64%,rgba(52,0,118,.62) 100%)}
.ascrim-b{position:absolute;top:0;right:0;bottom:0;left:0;
  background:linear-gradient(180deg,rgba(20,0,45,.5) 0%,rgba(20,0,45,0) 24%,rgba(20,0,45,0) 60%,rgba(20,0,45,.6) 100%)}
.ahero-in{position:relative;width:100%;max-width:1280px;margin:0 auto;padding:80px 40px 76px}
.ahero-h1{font-weight:700;font-size:54px;line-height:1.04;letter-spacing:-.036em;
  margin:0 0 20px;color:#fff;max-width:940px}
.ahero-p{max-width:640px;margin:0 0 30px;font-size:16.5px;line-height:1.62;color:#d3bdf2}
.ahero-facts{display:flex;flex-wrap:wrap;gap:10px;margin-top:40px;padding-top:28px;
  border-top:1px solid rgba(246,241,253,.2)}
.ahero-facts > span{display:inline-flex;align-items:center;gap:9px;padding:9px 15px;
  font-size:12.5px;color:#e8def9;background:rgba(246,241,253,.09);
  box-shadow:inset 0 0 0 1px rgba(246,241,253,.18)}
.ahero-facts > span:before{content:"";width:6px;height:6px;border-radius:50%;
  background:#ff9333;flex:none}
@media (max-width:820px){
  .ahero{min-height:669px}
  .ahero-h1{font-size:36px}
  .ahero-in{padding:56px 24px 56px}
  .ahero-p{font-size:15.5px}
}
/* ---- the post grid sits on the same orange field as the Services cards ---- */
.blog-field{background:radial-gradient(132% 104% at 16% -12%,#c94c0b 0%,#bf470a 44%,#b34109 100%);
  padding:54px 0 66px}
.blog-in{max-width:1280px;margin:0 auto;padding:0 40px;
  display:grid;grid-template-columns:1fr 280px;gap:44px;align-items:start}
/* this bar sits directly on the field, so it cannot keep its dark type */
.blog-bar{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  margin-bottom:24px;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.34);
  font-size:14px;color:#fff}
.blog-bar strong{color:#fff}
.blog-bar .mono{font-size:11px;color:#fff}
@media (max-width:900px){
  .blog-in{grid-template-columns:1fr;gap:30px}
  .blog-in aside{position:static !important}
}
@media (max-width:720px){
  .blog-field{padding:36px 0 44px}
  .blog-in{padding:0 20px}
}