/* CSGOS Hero, isolated to the single post template. Does NOT affect homepage waves. */
body.csgos-hero-active .csgos-post-hero {
  --csgos-hero-accent: var(--csgos-hero-blue, #425aef);
  --csgos-hero-wave: var(--csgos-hero-wave-light, #f5f6f8);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  position: relative; width: 100%; min-height: clamp(360px,50vh,560px);
  padding: 70px 24px 94px; box-sizing: border-box; isolation: isolate;
  color: #fff; background: var(--csgos-hero-accent); overflow: hidden;
  margin: 0 0 20px;
}
/* The fixed Zibll navigation reserves an extra 20px after its actual height.
   Remove only that gutter on article pages; preserve the global header and homepage. */
body.csgos-hero-active.nav-fixed .csgos-post-hero {
  margin-top: -20px;
}

body.csgos-hero-active .csgos-hero-background {
  position:absolute; inset:0; z-index:-1; overflow:hidden;
  background: linear-gradient(90deg,#425aef 0%,var(--csgos-hero-accent) 52%,#6076ed 100%);
}
body.csgos-hero-active .csgos-hero-picture {
  position:absolute; left:50%; top:-30%; right:-8%; bottom:-25%;
  transform:rotate(18deg); transform-origin:center;
  filter:blur(5px); opacity:.82; overflow:hidden;
}
body.csgos-hero-active .csgos-hero-picture img {
  display:block; width:100%; height:100%; object-fit:cover; transform:scale(1.10);
}
body.csgos-hero-active .csgos-hero-background:after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg,var(--csgos-hero-accent) 0%,var(--csgos-hero-accent) 37%,rgba(66,90,239,.85) 57%,rgba(66,90,239,.25) 100%);
}
body.csgos-hero-active .csgos-hero-content {
  position:relative; z-index:1; width:min(100%,1200px); text-align:center;
  overflow-wrap:anywhere;
}
body.csgos-hero-active .csgos-hero-labels {display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin:0 0 24px}
body.csgos-hero-active .csgos-hero-chip {display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,.19);padding:7px 13px;border-radius:13px;color:#fff;text-decoration:none;font-size:15px;font-weight:600}
body.csgos-hero-active .csgos-hero-chip:hover {background:rgba(255,255,255,.31);color:#fff}
body.csgos-hero-active .csgos-hero-hashtag {font-size:15px;color:rgba(229,236,255,.8);padding:6px 10px;text-decoration:none}
body.csgos-hero-active .csgos-hero-hashtag:hover {color:#fff}
body.csgos-hero-active .csgos-hero-title {color:white;font-weight:750;line-height:1.27;font-size:clamp(28px,2.5vw,46px);max-width:1200px;margin:0 auto 32px;text-shadow:0 1px 1px rgba(0,0,0,.05)}
body.csgos-hero-active .csgos-hero-meta {display:flex;justify-content:center;align-items:center;gap:13px 19px;flex-wrap:wrap;color:#bbc9ff;font-size:14px;line-height:1.8}
body.csgos-hero-active .csgos-hero-meta > * {display:inline-flex;align-items:center;gap:5px;color:inherit;white-space:nowrap}
body.csgos-hero-active .csgos-hero-meta a:hover {color:white}
body.csgos-hero-active .csgos-hero-meta .fa {font-size:15px}
body.csgos-hero-active .csgos-hero-waves {pointer-events:none;position:absolute;bottom:-1px;left:0;width:100%;height:clamp(50px,8vh,100px);z-index:2;overflow:hidden}
body.csgos-hero-active .csgos-hero-waves svg {width:100%;height:100%;display:block}
body.csgos-hero-active .csgos-hero-parallax use {fill:var(--csgos-hero-wave);animation:csgos-hero-drift 25s cubic-bezier(.55,.5,.45,.5) infinite}
body.csgos-hero-active .csgos-hero-parallax use:nth-child(1) {opacity:.3;animation-delay:-2s;animation-duration:7s}
body.csgos-hero-active .csgos-hero-parallax use:nth-child(2) {opacity:.5;animation-delay:-3s;animation-duration:10s}
body.csgos-hero-active .csgos-hero-parallax use:nth-child(3) {opacity:.75;animation-delay:-4s;animation-duration:13s}
body.csgos-hero-active .csgos-hero-parallax use:nth-child(4) {opacity:1;animation-delay:-5s;animation-duration:20s}
@keyframes csgos-hero-drift{0%{transform:translate3d(-90px,0,0)}100%{transform:translate3d(85px,0,0)}}
body.csgos-hero-active.black-theme .csgos-post-hero,body.csgos-hero-active.dark-theme .csgos-post-hero,body.csgos-hero-active[data-theme="dark"] .csgos-post-hero{--csgos-hero-wave:var(--csgos-hero-wave-dark,#181a20)}
body.csgos-hero-active .article-header > h1.article-title {display:none!important}
@media(max-width:767px){
  body.csgos-hero-active .csgos-post-hero{min-height:clamp(300px,40vh,450px);padding:72px 18px 82px;margin-bottom:14px}
  body.csgos-hero-active .csgos-hero-title{font-size:clamp(23px,6.3vw,32px);margin-bottom:20px}
  body.csgos-hero-active .csgos-hero-labels{gap:5px;margin-bottom:15px}
  body.csgos-hero-active .csgos-hero-hashtag{display:none}
  body.csgos-hero-active .csgos-hero-chip{padding:5px 9px;font-size:13px}
  body.csgos-hero-active .csgos-hero-meta{gap:6px 12px;font-size:12px}
  body.csgos-hero-active .csgos-hero-author-posts{display:none!important}
  body.csgos-hero-active .csgos-hero-picture{left:38%;right:-30%;opacity:.75}
}
@media(prefers-reduced-motion:reduce){body.csgos-hero-active .csgos-hero-parallax use{animation:none}}