/* CodeBobby — css/newsletter.css */

/* scanline */
    

    /* ── NAV ── */
    
    
    
    
    
    .nav-links a:hover,.nav-links a.active{color:var(--accent)}
    
    

    /* ── HERO HEADER ── */
    .nl-hero{
      padding: 9rem 3rem 5rem;
      position: relative;
      overflow: hidden;
      border-bottom: 1px solid var(--border);
    }
    .nl-hero-glow{position:absolute;width:800px;height:400px;background:radial-gradient(ellipse,rgba(10,102,194,0.12) 0%,transparent 70%);top:0;left:50%;transform:translateX(-50%);pointer-events:none}
    .nl-hero-glow2{position:absolute;width:500px;height:300px;background:radial-gradient(ellipse,rgba(0,245,160,0.05) 0%,transparent 70%);bottom:0;right:0;pointer-events:none}

    .nl-hero-inner{max-width:860px;margin:0 auto;text-align:center;position:relative}
    .nl-eyebrow{font-family:var(--mono);font-size:0.72rem;color:var(--accent2);letter-spacing:0.25em;text-transform:uppercase;margin-bottom:1.2rem;display:flex;align-items:center;justify-content:center;gap:0.8rem}
    .nl-eyebrow::before,.nl-eyebrow::after{content:'';flex:1;max-width:60px;height:1px;background:var(--border)}
    .nl-hero h1{font-family:var(--display);font-size:clamp(2.5rem,5vw,4.5rem);font-weight:800;letter-spacing:-0.02em;line-height:1.08;margin-bottom:1.2rem}
    .nl-hero h1 em{font-style:normal;color:var(--accent2)}
    .nl-hero-sub{font-size:1.05rem;color:var(--text-dim);max-width:580px;margin:0 auto 2.5rem;line-height:1.75}

    .nl-hero-actions{display:flex;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap}
    .btn-li{display:inline-flex;align-items:center;gap:0.7rem;padding:0.85rem 1.8rem;background:var(--li);color:#fff;text-decoration:none;font-family:var(--display);font-size:0.95rem;font-weight:700;transition:all 0.25s;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));box-shadow:0 8px 32px rgba(10,102,194,0.3)}
    .btn-li:hover{background:#0077b5;transform:translateY(-2px);box-shadow:0 16px 48px rgba(10,102,194,0.45)}
    .btn-li svg{width:18px;height:18px;flex-shrink:0}
    .nl-stats{display:flex;align-items:center;justify-content:center;gap:2.5rem;margin-top:3rem;padding-top:2.5rem;border-top:1px solid var(--border)}
    .nl-stat{text-align:center}
    .nl-stat-num{font-family:var(--display);font-size:1.8rem;font-weight:800;color:var(--accent);display:block}
    .nl-stat-label{font-family:var(--mono);font-size:0.68rem;color:var(--text-dim);letter-spacing:0.15em;text-transform:uppercase}
    .nl-stat-divider{width:1px;height:40px;background:var(--border)}

    /* ── FILTER BAR ── */
    .filter-section{
      position:sticky;top:125px;z-index:50;
      background:rgba(8,12,16,0.92);
      backdrop-filter:blur(10px);
      border-bottom:1px solid var(--border);
      padding:1rem 3rem;
      display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
      justify-content:space-between;
    }
    .filter-left{display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap}
    .filter-label{font-family:var(--mono);font-size:0.68rem;color:var(--text-dim);letter-spacing:0.12em;text-transform:uppercase;margin-right:0.5rem}
    .filter-chip{font-family:var(--mono);font-size:0.7rem;color:var(--text-dim);background:var(--surface2);border:1px solid var(--border);padding:0.3rem 0.9rem;cursor:pointer;letter-spacing:0.08em;text-transform:uppercase;transition:all 0.15s}
    .filter-chip:hover{color:var(--accent2);border-color:var(--accent2)}
    .filter-chip.active{color:var(--bg);background:var(--accent2);border-color:var(--accent2)}
    .article-count{font-family:var(--mono);font-size:0.7rem;color:var(--text-dim);letter-spacing:0.08em}
    .article-count span{color:var(--accent)}

    /* ── MAIN GRID ── */
    .articles-section{padding:3rem 3rem 6rem;max-width:1600px;margin:0 auto}

    /* Masonry-style columns */
    .articles-masonry{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:1.5rem;
      align-items:start;
    }

    .article-brick{
      break-inside:avoid;
      position:relative;
      background:var(--surface);
      border:1px solid var(--border);
      transition:all 0.25s;
      cursor:pointer;
      display:flex;
      flex-direction:column;
      width:100%;
      min-width:0;
      opacity:0;
      transform:translateY(20px);
      animation:brickIn 0.5s cubic-bezier(.16,1,.3,1) forwards;
    }
    .article-brick:hover{border-color:var(--accent2);box-shadow:0 8px 40px rgba(0,0,0,0.5),0 0 0 1px rgba(0,212,255,0.15);transform:translateY(-3px)}

    @keyframes brickIn{to{opacity:1;transform:translateY(0)}}
    .article-brick:nth-child(1){animation-delay:0.05s}
    .article-brick:nth-child(2){animation-delay:0.1s}
    .article-brick:nth-child(3){animation-delay:0.15s}
    .article-brick:nth-child(4){animation-delay:0.2s}
    .article-brick:nth-child(5){animation-delay:0.25s}
    .article-brick:nth-child(6){animation-delay:0.3s}

    /* top bar on each card */
    .brick-topbar{
      display:flex;align-items:center;justify-content:space-between;
      padding:0.8rem 1rem;
      background:var(--surface2);
      border-bottom:1px solid var(--border);
      flex-shrink:0;
    }
    .brick-img-wrap{
      width:100%;
      height:220px;
      overflow:hidden;
      flex-shrink:0;
    }
    .brick-img-wrap img{
      width:100%;
      height:100%;
      object-fit:cover;
      opacity:0.85;
      transition:opacity 0.3s;
      display:block;
    }
    .brick-img-wrap img:hover{ opacity:1; }
    .brick-tag{font-family:var(--mono);font-size:0.65rem;color:var(--accent2);letter-spacing:0.12em;text-transform:uppercase}
    .brick-li-badge{display:flex;align-items:center;gap:0.4rem;font-family:var(--mono);font-size:0.62rem;color:#5a7a8a;letter-spacing:0.06em}
    .brick-li-badge svg{width:12px;height:12px;fill:#0a66c2}

    /* iframe wrapper — responsive, preserves aspect */
    .brick-iframe-wrap{
      width:100%;
      overflow:hidden;
      background:#000;
      position:relative;
    }
    .brick-iframe-wrap iframe{
      width:504px;
      max-width:100%;
      display:block;
      border:none;
      /* scale down to fit the column width */
      transform-origin:top left;
    }

    /* bottom meta bar */
    .brick-footer{display:flex;align-items:center;justify-content:space-between;padding:0.75rem 1rem;border-top:1px solid var(--border);background:var(--surface2)}
    .brick-open{font-family:var(--mono);font-size:0.65rem;color:var(--text-dim);letter-spacing:0.1em;text-transform:uppercase;text-decoration:none;transition:color 0.2s;display:flex;align-items:center;gap:0.4rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
    .brick-open:hover{color:var(--accent)}
    .brick-open svg{width:11px;height:11px}
    .brick-date{font-family:var(--mono);font-size:0.62rem;color:var(--text-dim)}

    /* ── LOAD MORE ── */
    .load-more-section{text-align:center;padding:2rem 0 4rem}
    .btn-load{font-family:var(--mono);font-size:0.8rem;color:var(--text);background:transparent;border:1px solid var(--border);padding:0.85rem 2.5rem;cursor:pointer;letter-spacing:0.12em;text-transform:uppercase;transition:all 0.2s}
    .btn-load:hover{border-color:var(--accent);color:var(--accent)}

    /* ── SUBSCRIBE BAND ── */
    .subscribe-band{
      border-top:1px solid var(--border);
      background:linear-gradient(135deg,#070d1a,#071410);
      padding:5rem 3rem;
      text-align:center;
    }
    .subscribe-band h2{font-family:var(--display);font-size:clamp(1.8rem,3vw,3rem);font-weight:800;margin-bottom:1rem}
    .subscribe-band p{color:var(--text-dim);font-size:1rem;margin-bottom:2rem;max-width:480px;margin-left:auto;margin-right:auto;line-height:1.7}

    /* ── FOOTER ── */
    
    
    
    
    
    

    @media(max-width:1100px){.articles-masonry{grid-template-columns:repeat(2,1fr)}}
    @media(max-width:700px){
      
      .nl-hero{padding:7rem 1.5rem 4rem}
      .articles-masonry{grid-template-columns:1fr}
      .articles-section{padding:2rem 1.5rem 4rem}
      .filter-section{padding:0.8rem 1.5rem}
      
    }