/* ============================================================
   BETGEMZZ — Blog front-end
   Own stylesheet for /blog/: hub, article pages and post reader.
   Visual language matches betgemzz-v2 (same tokens, fonts, nav,
   journal cards and footer), self-contained so the blog ships
   as one folder.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  --void:#060a08;
  --panel:#0c1310;
  --panel-2:#111b16;
  --line: rgba(93,240,175,.14);
  --green:#34e8a0;
  --green-deep:#0fae72;
  --purple:#a855f7;
  --purple-deep:#7c3aed;
  --gold:#f2b705;
  --ink:#e9fbf1;
  --muted:#8ba79b;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:
    radial-gradient(60vw 40vh at 85% -10%, rgba(168,85,247,.20), transparent 60%),
    radial-gradient(50vw 40vh at 5% 0%, rgba(52,232,160,.16), transparent 60%),
    var(--void);
  background-attachment:fixed;
  color:var(--ink);
  font-family:'Manrope', sans-serif;
  line-height:1.5;
}
h1,h2,h3,h4,.display{font-family:'Chakra Petch', sans-serif; letter-spacing:.01em; margin:0;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
button,input,select{font:inherit;}
.wrap{max-width:1180px; margin:0 auto; padding:0 28px;}

.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  padding:13px 22px; border-radius:10px;
  font-family:'Chakra Petch', sans-serif; font-weight:600; font-size:15px;
  cursor:pointer; border:1px solid transparent; white-space:nowrap;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{
  background:linear-gradient(135deg, var(--green) 0%, var(--green-deep) 100%);
  color:#04140c; box-shadow:0 10px 26px -10px rgba(52,232,160,.55);
}
.btn-primary:hover{ box-shadow:0 14px 30px -8px rgba(52,232,160,.7); }
.btn-ghost{ background:rgba(168,85,247,.10); border-color:rgba(168,85,247,.45); color:#e9dcff; }
.btn-ghost:hover{ border-color:var(--purple); background:rgba(168,85,247,.18); }
.btn-outline{ background:transparent; border-color:var(--line); color:var(--ink); }
.btn-outline:hover{ border-color:var(--green); }
.btn-sm{ padding:9px 16px; font-size:13px; border-radius:8px; }

/* ---------- Nav (same mark + ornaments as the site) ---------- */
header.site-head{
  position:sticky; top:0; z-index:50;
  background:rgba(6,10,8,.78);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav{ display:flex; align-items:center; justify-content:space-between; padding:14px 28px; }
.nav-left{display:flex; align-items:center; gap:40px;}
.logo{height:34px;}
.nav-left .logo{height:56px;}
.logo-mark{position:relative; display:inline-flex; align-items:center; justify-content:center;}
.logo-mark .logo{position:relative; z-index:1; animation:logo-glow 3.6s ease-in-out infinite;}
@keyframes logo-glow{
  0%,100%{filter:drop-shadow(0 0 9px rgba(52,232,160,.30));}
  50%{filter:drop-shadow(0 0 14px rgba(52,232,160,.58)) drop-shadow(0 0 26px rgba(168,85,247,.34));}
}
.logo-shine{
  position:absolute; inset:0; z-index:2; pointer-events:none; mix-blend-mode:screen;
  background:linear-gradient(105deg, rgba(255,255,255,0) 41%, rgba(255,255,255,.92) 50%, rgba(255,255,255,0) 59%) no-repeat;
  background-size:280% 100%;
  -webkit-mask:url(../assets/images/logo-gemzz.png) center/contain no-repeat;
  mask:url(../assets/images/logo-gemzz.png) center/contain no-repeat;
  animation:logo-shine 5s ease-in-out 1.2s infinite;
}
@keyframes logo-shine{
  0%{background-position:190% 0; opacity:0;}
  12%{opacity:1;}
  58%{background-position:-90% 0; opacity:0;}
  100%{background-position:-90% 0; opacity:0;}
}
.logo-mark .gem{
  position:absolute; z-index:0; pointer-events:none;
  filter:drop-shadow(0 0 6px rgba(52,232,160,.65));
  animation:gem-orbit 5.4s ease-in-out infinite;
}
.logo-mark .gem-a{top:-8px; right:-10px; width:17px; filter:drop-shadow(0 0 7px rgba(168,85,247,.7));}
.logo-mark .gem-b{bottom:-10px; left:-12px; width:15px; animation-duration:6.6s; animation-delay:-2.2s;}
.logo-mark .gem-c{top:44%; right:-16px; width:11px; animation-duration:4.8s; animation-delay:-3.4s;}
@keyframes gem-orbit{
  0%,100%{transform:translate3d(0,0,0) rotate(0deg) scale(.9); opacity:.7;}
  50%{transform:translate3d(0,-6px,0) rotate(10deg) scale(1.08); opacity:1;}
}
.nav-links{display:flex; gap:30px; list-style:none; margin:0; padding:0;}
.nav-links a{
  font-family:'Chakra Petch',sans-serif; font-weight:600; font-size:14.5px;
  color:var(--muted); position:relative; padding-bottom:4px;
}
.nav-links a.active, .nav-links a:hover{ color:var(--green); }
.nav-links a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px;
  background:linear-gradient(90deg,var(--green),var(--purple));
}
.nav-right{display:flex; align-items:center; gap:14px;}
.icon-btn{
  width:38px; height:38px; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); color:var(--muted); cursor:pointer;
  background:transparent; transition:border-color .2s ease, color .2s ease;
}
.icon-btn:hover{border-color:var(--green); color:var(--green);}
.nav-burger{display:none;}

/* ---------- Sections & headings ---------- */
.section{padding:56px 0;}
.section-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:30px; gap:20px; flex-wrap:wrap;
}
.section-head h2{font-size:32px; font-weight:700; text-transform:uppercase; letter-spacing:.02em;}
.section-head p{color:var(--muted); font-size:12px; letter-spacing:.14em; text-transform:uppercase; margin-top:6px;}
.view-all{font-family:'Chakra Petch',sans-serif; font-weight:600; color:var(--green); font-size:14px;}

/* ---------- Blog hero ---------- */
.blog-hero{ padding:64px 0 26px; position:relative; }
.blog-hero .eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--green); font-family:'Chakra Petch',sans-serif; font-weight:600;
  font-size:13px; letter-spacing:.12em; text-transform:uppercase; margin-bottom:18px;
}
.blog-hero .eyebrow::before{content:""; width:22px; height:2px; background:var(--green); display:inline-block;}
.blog-hero h1{font-size:52px; font-weight:700; line-height:1.05; margin-bottom:18px;}
.blog-hero h1 .grad{
  background:linear-gradient(120deg, var(--green) 10%, var(--purple) 90%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.blog-hero p.lead{color:var(--muted); font-size:16.5px; max-width:620px; margin:0;}
.blog-stats{display:flex; gap:30px; flex-wrap:wrap; margin-top:30px;}
.blog-stat{display:flex; align-items:center; gap:10px;}
.blog-stat b{display:block; font-family:'Chakra Petch',sans-serif; font-size:15px;}
.blog-stat span{display:block; color:var(--muted); font-size:12.5px;}
.blog-stat .stat-icon{width:34px; height:34px; flex:none;}
.blog-stat .stat-icon img{width:100%; height:100%; object-fit:contain;}

/* ---------- Journal cards (identical to the site's journal) ---------- */
.pick-grid, .journal-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:18px; align-items:stretch;}
.pick-grid .pick-lead{grid-column:span 2;}
.j-card{
  background:var(--panel); border:1px solid var(--line); border-radius:16px;
  overflow:hidden; display:flex; flex-direction:column;
  transition:border-color .2s ease, transform .2s ease;
}
.j-card:hover{border-color:rgba(52,232,160,.45); transform:translateY(-4px);}
.j-thumb{
  position:relative; aspect-ratio:4/5; overflow:hidden;
  background:radial-gradient(circle at 50% 42%, rgba(52,232,160,.10), rgba(0,0,0,.40) 72%);
}
.j-thumb img{width:100%; height:100%; object-fit:contain; display:block;}
.j-thumb .j-emoji{
  position:absolute; inset:0; display:grid; place-items:center; font-size:44px;
}
.j-thumb::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(6,10,8,.5), rgba(6,10,8,0) 55%);
}
.j-cat{
  position:absolute; top:12px; left:12px; z-index:1;
  font-family:'Chakra Petch',sans-serif; font-weight:700; font-size:10px;
  letter-spacing:.10em; text-transform:uppercase; color:var(--green);
  background:rgba(6,10,8,.72); border:1px solid rgba(52,232,160,.45);
  backdrop-filter:blur(6px); border-radius:6px; padding:4px 9px;
}
.j-card.feature .j-cat, .j-cat.purple{color:var(--purple); border-color:rgba(168,85,247,.5);}
.j-cat.new{color:#04140c; background:var(--green); border-color:var(--green);}
.pick-lead .j-thumb{aspect-ratio:16/10;}
.j-body{padding:18px; display:flex; flex-direction:column; gap:9px; flex-grow:1;}
.j-card h4{font-size:15.5px; line-height:1.3;}
.j-card.feature h4, .pick-lead h4{font-size:18px;}
.j-desc{font-size:13px; color:var(--muted); line-height:1.5; margin:0;}
.j-card.feature .j-desc, .pick-lead .j-desc{font-size:13.5px;}
.j-meta{
  display:flex; align-items:center; gap:8px; flex-wrap:nowrap; white-space:nowrap;
  font-size:11.5px; color:var(--muted); margin-top:auto; overflow:hidden;
}
.j-meta .read{margin-left:auto; color:var(--green); font-family:'Chakra Petch',sans-serif; font-weight:600;}
.j-avatar{
  width:18px; height:18px; border-radius:50%; flex:none;
  background:conic-gradient(from 210deg, var(--green), var(--purple), var(--green));
  box-shadow:0 0 10px -2px rgba(52,232,160,.9);
}

/* ---------- Toolbar: search / filters / sort ---------- */
.blog-toolbar{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin:44px 0 18px;
}
.search-field{
  position:relative; flex:1 1 280px; min-width:220px;
  display:flex; align-items:center; gap:10px;
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:0 15px; height:46px;
}
.search-field:focus-within{border-color:var(--green);}
.search-field .ico{color:var(--muted); font-size:15px;}
.search-field input{
  flex:1; min-width:0; background:none; border:0; outline:none;
  color:var(--ink); font-size:14px; height:100%;
}
.search-field input::placeholder{color:var(--muted);}
.sort-field{
  display:flex; align-items:center; gap:10px;
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:0 15px; height:46px;
}
.sort-field span{font-size:12px; letter-spacing:.10em; text-transform:uppercase; color:var(--muted);}
.sort-field select{
  background:none; border:0; outline:none; cursor:pointer;
  color:var(--ink); font-family:'Chakra Petch',sans-serif; font-weight:600; font-size:13.5px;
}
.sort-field select option{background:var(--panel-2); color:var(--ink);}
.toolbar-count{font-size:12.5px; color:var(--muted); margin-left:auto;}

.blog-filters{display:flex; flex-wrap:wrap; gap:4px; padding:4px; border-radius:999px;
  background:var(--panel); border:1px solid var(--line); width:max-content; max-width:100%;}
.blog-filters button{
  font-family:'Chakra Petch',sans-serif; font-weight:600; font-size:13px; color:var(--muted);
  background:none; border:none; cursor:pointer; padding:7px 18px; border-radius:999px;
  transition:color .2s ease, background .2s ease;
}
.blog-filters button:hover{color:var(--ink);}
.blog-filters button.active{
  background:linear-gradient(135deg,var(--green) 0%, var(--green-deep) 100%); color:#04140c;
}

.blog-empty{
  grid-column:1 / -1; text-align:center; padding:56px 20px;
  border:1px dashed var(--line); border-radius:16px; color:var(--muted);
}
.blog-empty h3{font-size:19px; color:var(--ink); margin-bottom:8px;}
.blog-loadmore{display:flex; justify-content:center; margin-top:34px;}

/* ---------- CTA band ---------- */
.blog-cta{
  margin:10px 0 20px; padding:44px 34px; text-align:center;
  border:1px solid var(--line); border-radius:18px;
  background:linear-gradient(120deg, rgba(52,232,160,.09), rgba(168,85,247,.09));
}
.blog-cta h2{font-size:30px; font-weight:700; margin-bottom:10px;}
.blog-cta p{color:var(--muted); max-width:520px; margin:0 auto 24px; font-size:15px;}

/* ---------- Footer (same shape as the site's) ---------- */
footer{border-top:1px solid var(--line); padding:50px 0 30px; margin-top:40px;}
.foot-top{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:24px; margin-bottom:30px;}
.foot-links{display:flex; gap:26px; list-style:none; padding:0; margin:0; flex-wrap:wrap;}
.foot-links a{color:var(--muted); font-size:13.5px;}
.foot-links a:hover{color:var(--green);}
.foot-socials{display:flex; gap:10px;}
.foot-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
  padding-top:22px; border-top:1px solid rgba(255,255,255,.05);
  color:var(--muted); font-size:12.5px;
}
.foot-tagline{height:66px; width:auto; display:block;}

/* ---------- Article pages ---------- */
.article{max-width:820px; margin:0 auto; padding:56px 28px 20px;}
.breadcrumb{font-size:12.5px; color:var(--muted); margin-bottom:20px; letter-spacing:.02em;}
.breadcrumb a{color:var(--muted);}
.breadcrumb a:hover{color:var(--green);}
.article-cat{
  display:inline-block; font-family:'Chakra Petch',sans-serif; font-weight:700;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--green);
  background:rgba(52,232,160,.10); border:1px solid rgba(52,232,160,.35);
  padding:5px 12px; border-radius:999px; margin-bottom:16px;
}
.article h1{font-size:40px; font-weight:700; line-height:1.1; margin-bottom:16px;}
.article-meta{
  display:flex; flex-wrap:wrap; gap:16px; font-size:12.5px; color:var(--muted);
  letter-spacing:.02em;
  padding-bottom:24px; margin-bottom:32px; border-bottom:1px solid var(--line);
}
.article p, .reader-content p{font-size:16.5px; line-height:1.8; color:#cfe6da; margin:0 0 20px;}
.article h2{font-size:27px; font-weight:700; margin:40px 0 14px;}
.article h3{font-size:20px; font-weight:700; margin:28px 0 12px;}
/* body-copy links only — buttons and card links keep their own colours */
.article a:not(.btn):not(.blog-card),
.reader-content a:not(.btn){
  color:var(--green); text-decoration:underline; text-decoration-color:rgba(52,232,160,.4);
}
.article a:not(.btn):not(.blog-card):hover,
.reader-content a:not(.btn):hover{text-decoration-color:var(--green);}
.article .breadcrumb a:not(.btn){color:var(--muted); text-decoration:none;}
.article .breadcrumb a:hover{color:var(--green);}
.related .blog-card h3, .related .blog-card:hover h3{color:var(--ink);}
.article ul, .article ol{margin:0 0 22px 22px; padding:0;}
.article ul{list-style:disc;}
.article ol{list-style:decimal;}
.article li{font-size:16.5px; line-height:1.75; color:#cfe6da; margin-bottom:8px;}
.article strong, .reader-content strong{color:#fff;}
.article img{border-radius:14px; margin:10px 0 24px;}
.article table{
  width:100%; border-collapse:collapse; margin:8px 0 30px; font-size:14px;
  border:1px solid var(--line); border-radius:14px; overflow:hidden;
}
.article thead th{
  background:rgba(52,232,160,.08); text-align:left;
  font-family:'Chakra Petch',sans-serif; font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--green); padding:12px 14px;
}
.article td{padding:12px 14px; border-top:1px solid var(--line); color:var(--muted);}
.article tbody tr:hover td{background:rgba(255,255,255,.02);}

.callout{
  border-left:3px solid var(--green); background:rgba(52,232,160,.06);
  border-radius:0 14px 14px 0; padding:16px 20px; margin:0 0 26px;
  font-size:15.5px; line-height:1.75; color:var(--muted);
}
.callout strong{color:var(--green);}

.faq-item{
  border:1px solid var(--line); border-radius:14px; padding:16px 18px;
  margin-bottom:12px; background:var(--panel);
}
.faq-item h3{font-size:16px; margin:0 0 8px;}
.faq-item p{font-size:15px; margin:0; color:var(--muted);}

.article-cta{
  margin:40px 0 30px; padding:30px; text-align:center;
  border-radius:18px; border:1px solid var(--line);
  background:linear-gradient(120deg, rgba(52,232,160,.09), rgba(168,85,247,.09));
}
.article-cta h3{font-size:22px; margin:0 0 8px;}
.article-cta p{font-size:15px; color:var(--muted); margin-bottom:18px;}

.related{display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:14px; margin-bottom:30px;}
.related .blog-card{
  border:1px solid var(--line); border-radius:14px; background:var(--panel);
  padding:16px; transition:border-color .2s ease, transform .2s ease;
}
.related .blog-card:hover{border-color:rgba(52,232,160,.45); transform:translateY(-3px);}
.related .blog-cat{
  display:block; font-family:'Chakra Petch',sans-serif; font-weight:700;
  font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--purple); margin-bottom:8px;
}
.related .blog-body h3{font-size:15px; line-height:1.35; margin:0;}

/* ---------- Post reader (/blog/post.html) ---------- */
.reader{max-width:820px; margin:0 auto; padding:56px 28px 20px;}
.reader h1{font-size:38px; font-weight:700; line-height:1.12; margin-bottom:14px;}
.reader-ribbon{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Chakra Petch',sans-serif; font-weight:700;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  padding:5px 12px; border-radius:999px; margin-bottom:14px;
}
.reader-ribbon.live{background:rgba(52,232,160,.14); color:var(--green);}
.reader-ribbon.draft{background:rgba(242,183,5,.16); color:var(--gold);}
.reader-hero-img{
  border:1px solid var(--line); border-radius:16px; overflow:hidden;
  background:radial-gradient(circle at 50% 40%, rgba(52,232,160,.10), rgba(0,0,0,.35) 70%);
  margin-bottom:28px; padding:14px;
}
.reader-hero-img img{margin:0 auto; max-height:420px; width:auto;}
.reader-content{font-size:16.5px; line-height:1.8; color:#cfe6da;}
.reader-content h2{font-size:26px; font-weight:700; color:var(--ink); margin:34px 0 14px;}
.reader-content h3{font-size:20px; font-weight:700; color:var(--ink); margin:26px 0 12px;}
.reader-content ul, .reader-content ol{margin:0 0 22px 22px; padding:0;}
.reader-content ul{list-style:disc;}
.reader-content ol{list-style:decimal;}
.reader-content li{margin-bottom:8px;}
.reader-content img{max-width:100%; height:auto; border-radius:14px; margin:10px 0 24px;}
.reader-content blockquote{
  border-left:3px solid var(--purple); background:rgba(168,85,247,.06);
  padding:12px 20px; margin:0 0 22px; color:var(--muted); font-style:italic;
}
.reader-tags{display:flex; flex-wrap:wrap; gap:8px; margin:32px 0 10px;}
.reader-tags span{
  font-size:12px; color:var(--muted); border:1px solid var(--line);
  border-radius:999px; padding:5px 12px;
}
.reader-nav{
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  border-top:1px solid var(--line); margin-top:34px; padding-top:24px;
}

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .pick-grid, .journal-grid{grid-template-columns:1fr 1fr;}
  .nav-links{display:none;}
  .nav-burger{display:flex;}
  .blog-hero h1{font-size:42px;}
  .blog-hero{padding:48px 0 20px;}
  .article{padding:48px 24px 20px;}
  .reader{padding:44px 24px 20px;}
}
@media (max-width: 600px){
  .wrap{padding:0 18px;}
  .blog-hero h1{font-size:34px;}
  .section{padding:40px 0;}
  .section-head h2{font-size:24px;}
  .pick-grid, .journal-grid{grid-template-columns:1fr;}
  .pick-grid .pick-lead{grid-column:span 1;}
  .pick-lead .j-thumb{aspect-ratio:16/10;}
  .blog-stats{gap:18px;}
  .toolbar-count{margin-left:0; width:100%;}
  .article, .reader{padding:38px 18px 16px;}
  .article h1{font-size:29px;}
  .reader h1{font-size:28px;}
  .article table{font-size:12.5px;}
  .foot-bottom{flex-direction:column; align-items:flex-start;}
}
@media (prefers-reduced-motion: reduce){
  .logo-mark .logo, .logo-mark .gem{animation:none;}
  .logo-shine{animation:none; opacity:0;}
}