/* Styles for blog-category-listing.html only — shared styles are in style.css */

.phero__deco--peak{right:-60px;bottom:-40px;width:min(420px,48vw);opacity:.18}

.bhero{position:relative;margin:0;border-radius:0;background:var(--ink-950);color:#fff;padding:clamp(48px,7vw,90px) 0;overflow:hidden;isolation:isolate}
.bhero h1{color:#fff}
.bhero::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(700px 400px at 100% 0,rgba(26,139,245,.35),transparent 60%)}
.bhero__in{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,5vw,70px);align-items:center}
.bhero p{color:rgba(255,255,255,.78);font-size:1.1rem;max-width:56ch}
.bhero__art{width:100%;border-radius:var(--r-xl);box-shadow:var(--sh-3)}
.bintro{padding-bottom:0}.bintro__in{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center}.bintro__art{width:100%;border-radius:var(--r-lg)}
@media (max-width:800px){.bintro__in{grid-template-columns:1fr}.bintro__art{max-width:420px}}
@media (max-width:860px){.bhero__in{grid-template-columns:1fr}.bhero__art{max-width:520px}}
.btabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:30px}
.btab{padding:11px 20px;border-radius:var(--r-pill);border:1px solid var(--line);background:#fff;box-shadow:var(--sh-1);text-decoration:none;font-weight:700;font-size:.92rem;color:var(--ink-2);transition:all var(--t-fast)}
.btab:hover{border-color:var(--blue-500);color:var(--blue-600)}
.btab[aria-current="page"]{background:var(--logo-blue);border-color:transparent;color:#fff;box-shadow:var(--glow-blue)}
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.post{position:relative;display:flex;flex-direction:column;gap:12px;padding:28px;border-radius:var(--r-lg);background:#fff;border:1px solid var(--line-2);box-shadow:var(--sh-1);transition:transform var(--t-med) var(--ease),box-shadow var(--t-med),border-color var(--t-med);overflow:hidden}
.post::before{content:"";position:absolute;left:0;top:0;width:100%;height:4px;background:var(--logo-blue);transform:scaleX(.18);transform-origin:left;transition:transform var(--t-med) var(--ease)}
.post:hover{transform:translateY(-6px);box-shadow:var(--sh-2);border-color:rgba(26,139,245,.35)}
.post:hover::before{transform:scaleX(1);background:var(--logo-red)}
.post__top{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:.84rem;color:var(--ink-3)}
.post h3{margin:0;font-size:1.18rem;line-height:1.25}
.post h3 a{text-decoration:none}
.post h3 a::after{content:"";position:absolute;inset:0}
.post h3 a:hover{color:var(--blue-700)}
.post__x{margin:0;color:var(--ink-2);font-size:.95rem}
.post__more{margin-top:auto;font-weight:700;font-size:.9rem;color:var(--blue-600)}
.post--lead{grid-column:span 2;grid-row:span 2;padding:clamp(28px,4vw,48px);background:var(--ink-950);color:rgba(255,255,255,.8);justify-content:flex-end;min-height:380px;isolation:isolate}
.post--lead::after{content:"";position:absolute;inset:-20%;z-index:-1;background:radial-gradient(40% 45% at 85% 15%,rgba(26,139,245,.5),transparent 70%),radial-gradient(30% 35% at 10% 100%,rgba(229,38,27,.3),transparent 70%);animation:aurora 10s ease-in-out infinite alternate}
.post--lead h3,.post--lead h3 a:hover{color:#fff}
.post--lead .post__x,.post--lead .post__top{color:rgba(255,255,255,.75)}
.post--lead .post__more{color:#8FCBFF}
.post--lead h3{font-size:clamp(1.5rem,2.6vw,2.2rem)}
.post--lead .post__x{font-size:1.05rem}
@media (max-width:1000px){.posts{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.posts{grid-template-columns:1fr}.post--lead{grid-column:auto;grid-row:auto;min-height:0}}
.attrib{margin-top:30px;font-size:.88rem;color:var(--ink-3)}
/* Latest headlines — auto-sliding RSS track */
.tops__head{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:20px}
.tops__head h2{margin:0;font-size:clamp(1.6rem,3vw,2.2rem)}
.tops__nav{display:flex;gap:10px}
.tops__nav .snav:first-child svg{transform:rotate(180deg)}
.tops__nav .snav svg{width:18px;height:18px}
.tops{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 48px)/3);gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-bottom:50px;padding-bottom:4px}
.tops::-webkit-scrollbar{display:none}
.tops .post{scroll-snap-align:start}
@media (max-width:1000px){.tops{grid-auto-columns:calc((100% - 24px)/2)}}
@media (max-width:640px){.tops{grid-auto-columns:88%}}

.bc__bars{right:5%;bottom:-24px;width:min(280px,34vw);opacity:.22}