/* ── Medium page specific styles ── */

/* Page Hero */
#page-hero{position:relative;height:55vh;min-height:420px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.hero-inner{position:relative;z-index:2;text-align:center;padding:0 20px}
.hero-label{font-family:'Orbitron',monospace;font-size:.7rem;letter-spacing:8px;color:rgba(255,255,255,.4);text-transform:uppercase;margin-bottom:18px;display:block;opacity:0;animation:slideUp .9s .4s forwards}
.hero-headline{font-family:'Orbitron',monospace;font-weight:900;font-size:clamp(2.4rem,5.2vw,4.7rem);letter-spacing:2px;line-height:1.1;margin-bottom:20px;color:var(--white);opacity:0;animation:slideUp 1s .6s forwards}
.hero-headline span{color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.25)}
.hero-sub{font-size:.85rem;letter-spacing:3px;color:var(--lg);text-transform:uppercase;max-width:560px;line-height:1.8;margin:0 auto 36px;opacity:0;animation:slideUp 1s .8s forwards}
body.light #page-hero{background:#f0f0fa}
body.light .hero-label{color:rgba(108,71,255,.55)}
body.light .hero-headline{color:#1a1a2e;background:none;-webkit-background-clip:unset;background-clip:unset}
body.light .hero-headline span{color:transparent;-webkit-text-stroke:1.5px rgba(108,71,255,.35)}
body.light .hero-sub{color:rgba(26,26,46,.5)}

/* Search */
.search-wrap{position:relative;max-width:480px;margin:0 auto;opacity:0;animation:slideUp 1s 1s forwards}
.search-wrap input{width:100%;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);padding:14px 20px 14px 48px;color:var(--white);font-family:'Space Mono',monospace;font-size:.88rem;outline:none;border-radius:4px;transition:border-color .3s,background .3s,box-shadow .3s}
.search-wrap input::placeholder{color:rgba(255,255,255,.2)}
.search-wrap input:focus{border-color:rgba(255,255,255,.35);background:rgba(255,255,255,.07);box-shadow:0 0 0 3px rgba(255,255,255,.04)}
.search-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:rgba(255,255,255,.3);pointer-events:none}
.search-icon svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
body.light .search-wrap input{background:#fff;border-color:rgba(108,71,255,.2);color:#1a1a2e}
body.light .search-wrap input::placeholder{color:rgba(26,26,46,.3)}
body.light .search-wrap input:focus{border-color:#6c47ff;box-shadow:0 0 0 3px rgba(108,71,255,.1)}
body.light .search-icon{color:rgba(108,71,255,.5)}

/* Articles section */
#articles-section{position:relative;padding:80px 10% 100px;background:var(--black)}
.section-label{font-family:'Orbitron',monospace;font-size:.7rem;letter-spacing:8px;color:var(--lg);text-transform:uppercase;margin-bottom:32px}
body.light #articles-section{background:#f0f0fa}
body.light .section-label{color:#6c47ff}

/* Filters */
.filter-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:48px;align-items:center}
.filter-btn{padding:7px 18px;border:1px solid var(--gray);font-family:'Orbitron',monospace;font-size:.65rem;letter-spacing:2.5px;color:var(--silver);text-transform:uppercase;cursor:none;transition:all .3s;background:transparent;border-radius:3px}
.filter-btn.active,.filter-btn:hover{background:var(--white);color:var(--black);border-color:var(--white)}
.filter-count{font-size:.6rem;letter-spacing:1px;color:var(--lg);margin-left:auto;font-family:'Orbitron',monospace}
body.light .filter-btn{border-color:rgba(108,71,255,.2);color:rgba(26,26,46,.5)}
body.light .filter-btn.active,body.light .filter-btn:hover{background:#6c47ff;color:#fff;border-color:#6c47ff}

/* Blog grid */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:24px}

/* Skeleton loader */
.skeleton-card{border-radius:4px;overflow:hidden;border:1px solid rgba(255,255,255,.06)}
.skeleton{background:linear-gradient(90deg,rgba(255,255,255,.04) 0%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.04) 100%);background-size:200% 100%;animation:shimmer 1.8s infinite}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.sk-thumb{height:200px}
.sk-body{padding:20px}
.sk-line{height:10px;border-radius:4px;margin-bottom:12px}
.sk-line.short{width:40%}
.sk-line.medium{width:70%}
.sk-line.full{width:100%}
body.light .skeleton{background:linear-gradient(90deg,rgba(108,71,255,.06) 0%,rgba(108,71,255,.12) 50%,rgba(108,71,255,.06) 100%)}

/* Blog cards */
.blog-card{background:var(--dark);border:1px solid rgba(255,255,255,.07);border-radius:4px;overflow:hidden;transition:transform .35s cubic-bezier(.22,1,.36,1),border-color .3s,box-shadow .3s;display:flex;flex-direction:column;opacity:0;transform:translateY(24px);animation:cardIn .6s forwards}
@keyframes cardIn{to{opacity:1;transform:translateY(0)}}
.blog-card:hover{transform:translateY(-6px);border-color:rgba(255,255,255,.22);box-shadow:0 20px 50px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06)}
.blog-thumb-wrap{position:relative;height:200px;overflow:hidden;background:#111}
.blog-thumb-wrap img{width:100%;height:100%;object-fit:cover;transition:transform .5s;display:block}
.blog-card:hover .blog-thumb-wrap img{transform:scale(1.06)}
.thumb-overlay{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.7) 100%)}
.thumb-fallback{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:linear-gradient(135deg,#0a0a1a,#1a0a2e)}
.thumb-fallback svg{width:36px;height:36px;stroke:rgba(255,255,255,.2);fill:none;stroke-width:1.5}
.thumb-fallback span{font-family:'Orbitron',monospace;font-size:.6rem;letter-spacing:4px;color:rgba(255,255,255,.2)}
.blog-content{padding:22px 20px 20px;display:flex;flex-direction:column;flex:1}
.blog-meta{display:flex;align-items:center;gap:12px;margin-bottom:12px;font-family:'Orbitron',monospace;font-size:.58rem;letter-spacing:3px;color:rgba(255,255,255,.3);text-transform:uppercase}
.meta-dot{width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.2)}
.blog-title{font-family:'Orbitron',monospace;font-weight:700;font-size:.92rem;letter-spacing:1.5px;color:var(--white);line-height:1.45;margin-bottom:12px;text-decoration:none;display:block;transition:color .25s}
.blog-title:hover{color:rgba(255,255,255,.7)}
.blog-excerpt{font-size:.82rem;line-height:1.9;color:rgba(255,255,255,.38);margin-bottom:18px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;flex:1}
.blog-footer{display:flex;align-items:center;justify-content:space-between;padding-top:14px;border-top:1px solid rgba(255,255,255,.06);margin-top:auto}
.blog-tags{display:flex;gap:6px;flex-wrap:wrap}
.blog-tag{padding:3px 10px;border:1px solid rgba(255,255,255,.1);font-family:'Orbitron',monospace;font-size:.55rem;letter-spacing:2px;color:rgba(255,255,255,.35);border-radius:2px;text-transform:uppercase;transition:all .25s}
.blog-card:hover .blog-tag{border-color:rgba(255,255,255,.2);color:rgba(255,255,255,.55)}
.read-link{font-family:'Orbitron',monospace;font-size:.62rem;letter-spacing:3px;color:rgba(255,255,255,.5);text-decoration:none;text-transform:uppercase;display:flex;align-items:center;gap:6px;transition:color .3s;white-space:nowrap;position:relative}
.read-link::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:1px;background:var(--white);transition:width .3s}
.read-link:hover{color:var(--white)}
.read-link:hover::after{width:100%}
.read-link svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;transition:transform .3s}
.read-link:hover svg{transform:translateX(3px)}
body.light .blog-card{background:#fff;border:1px solid rgba(108,71,255,.1)}
body.light .blog-card:hover{border-color:#6c47ff;box-shadow:0 20px 50px rgba(108,71,255,.12)}
body.light .blog-meta{color:rgba(26,26,46,.4)}
body.light .blog-title{color:#1a1a2e}
body.light .blog-excerpt{color:rgba(26,26,46,.55)}
body.light .blog-tag{background:rgba(108,71,255,.08);color:#6c47ff;border-color:rgba(108,71,255,.2)}
body.light .read-link{color:#6c47ff}
body.light .read-link::after{background:#6c47ff}

/* Empty / error */
.no-articles{text-align:center;padding:80px 20px;font-family:'Orbitron',monospace;font-size:.8rem;letter-spacing:4px;color:rgba(255,255,255,.2);text-transform:uppercase}
.no-articles svg{width:48px;height:48px;stroke:rgba(255,255,255,.1);fill:none;stroke-width:1.5;margin-bottom:20px;display:block;margin:0 auto 20px}
body.light .no-articles{color:rgba(26,26,46,.4)}

/* Medium CTA */
.medium-cta{background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.08);padding:56px 40px;text-align:center;margin-top:72px;position:relative;overflow:hidden}
.medium-cta::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);animation:shimmerLine 3.5s ease-in-out infinite}
.medium-cta-title{font-family:'Orbitron',monospace;font-weight:900;font-size:1.3rem;letter-spacing:3px;color:var(--white);margin-bottom:12px}
.medium-cta-sub{font-size:.82rem;letter-spacing:2px;color:var(--lg);margin-bottom:28px;line-height:1.8}
body.light .medium-cta{background:#fff;border-color:rgba(108,71,255,.14)}
body.light .medium-cta-title{color:#1a1a2e}
body.light .medium-cta-sub{color:rgba(26,26,46,.5)}

/* Mobile medium */
@media(max-width:768px){
  #page-hero{height:auto;min-height:380px;padding:100px 5% 60px}
  .blog-grid{grid-template-columns:1fr}
  #articles-section{padding:60px 5% 80px}
  .medium-cta{padding:40px 20px}
}