<!-- ============================================================
     BLOCK 2: PODCASTS SECTION
     Add this as your second Code Block (below Block 1)
     ============================================================ -->

<div class="ccm-wrap">

  <!-- ── PODCASTS ── -->
  <div class="ccm-section ccm-surface" id="ccm-podcasts">
    <div class="ccm-section-inner">
      <div class="ccm-head-row">
        <div class="ccm-head-left">
          <span class="ccm-tag">Our Network</span>
          <h2 class="ccm-title">30+ Shows. Every Voice.<br>Every Genre.</h2>
          <p class="ccm-body">From true crime to sports, business to lifestyle — our podcast network represents the best independent voices in Connecticut and beyond.</p>
        </div>
        <a href="/all-podcast-shows" class="ccm-link-all">View All Shows →</a>
      </div>

      <div class="ccm-filters">
        <button class="ccm-filter on" data-f="all">All Shows</button>
        <button class="ccm-filter" data-f="crime">True Crime</button>
        <button class="ccm-filter" data-f="sports">Sports</button>
        <button class="ccm-filter" data-f="business">Business</button>
        <button class="ccm-filter" data-f="lifestyle">Lifestyle</button>
        <button class="ccm-filter" data-f="culture">Culture</button>
      </div>

      <div class="ccm-pod-grid">
        <div class="ccm-pod-card" data-cat="crime">
          <div class="ccm-pod-thumb t6"><span class="ccm-pod-pill">Top Show</span>🔍</div>
          <div class="ccm-pod-body">
            <p class="ccm-pod-cat">True Crime</p>
            <h3 class="ccm-pod-title">Crimes & Consequences</h3>
            <div class="ccm-pod-meta"><span>50+ Episodes</span><span>⭐ 4.8</span></div>
          </div>
        </div>
        <div class="ccm-pod-card" data-cat="crime">
          <div class="ccm-pod-thumb t2"><span class="ccm-pod-pill">New</span>⚖️</div>
          <div class="ccm-pod-body">
            <p class="ccm-pod-cat">True Crime</p>
            <h3 class="ccm-pod-title">Ivy League Murders</h3>
            <div class="ccm-pod-meta"><span>25+ Episodes</span><span>⭐ 4.7</span></div>
          </div>
        </div>
        <div class="ccm-pod-card" data-cat="sports">
          <div class="ccm-pod-thumb t1"><span class="ccm-pod-pill">Featured</span>🏀</div>
          <div class="ccm-pod-body">
            <p class="ccm-pod-cat">Sports</p>
            <h3 class="ccm-pod-title">Bright Lights Basketball</h3>
            <div class="ccm-pod-meta"><span>100+ Episodes</span><span>⭐ 4.9</span></div>
          </div>
        </div>
        <div class="ccm-pod-card" data-cat="sports">
          <div class="ccm-pod-thumb t4">🏈</div>
          <div class="ccm-pod-body">
            <p class="ccm-pod-cat">Sports</p>
            <h3 class="ccm-pod-title">All 4 Downs</h3>
            <div class="ccm-pod-meta"><span>80+ Episodes</span><span>⭐ 4.8</span></div>
          </div>
        </div>
        <div class="ccm-pod-card" data-cat="business">
          <div class="ccm-pod-thumb t3">💼</div>
          <div class="ccm-pod-body">
            <p class="ccm-pod-cat">Business</p>
            <h3 class="ccm-pod-title">Minding Her Own Business</h3>
            <div class="ccm-pod-meta"><span>30+ Episodes</span><span>⭐ 4.7</span></div>
          </div>
        </div>
        <div class="ccm-pod-card" data-cat="culture">
          <div class="ccm-pod-thumb t5">🎤</div>
          <div class="ccm-pod-body">
            <p class="ccm-pod-cat">Culture</p>
            <h3 class="ccm-pod-title">Nobody's Off Limits with Lala E</h3>
            <div class="ccm-pod-meta"><span>40+ Episodes</span><span>⭐ 4.6</span></div>
          </div>
        </div>
      </div>
    </div>
  </div>

</div><!-- end block 2 -->

<script>
(function(){
  var btns  = document.querySelectorAll('.ccm-filter');
  var cards = document.querySelectorAll('.ccm-pod-card');
  btns.forEach(function(btn){
    btn.addEventListener('click', function(){
      btns.forEach(function(b){ b.classList.remove('on'); });
      btn.classList.add('on');
      var f = btn.getAttribute('data-f');
      cards.forEach(function(card){
        card.style.display = (f === 'all' || card.getAttribute('data-cat') === f) ? '' : 'none';
      });
    });
  });
})();
</script>