{% assign sorted_cards = include.cards %}

{% assign sorted_cards = include.cards %}

<section class="section" id="{{include.section_id}}">
  <div class="lg-contain reveal">
    <div class="sec-head-row">
      <div>
        <div class="sec-label">· {{include.kicker_text}}</div>
        {{include.heading_html}}
      </div>
    </div>
    
    <div class="press-scroll">
      <!-- mobile -->
      <div class="press-cols press-cols-mob">
        <div class="press-col press-col--left">
          <div class="press-col-inner">
            <div class="roll-set">
              {% for item in sorted_cards %}
              <a class="press-card" href="{{item.url}}" target="_blank" rel="noopener">
                <div class="press-thumb img tint-a" style="background-image: url('{{item.image}}');"></div>
                <div class="press-body">
                  <div class="pub">{{item.kicker_text}}</div>
                  <h4>{{item.heading}}</h4>
                  <div class="pbot"><span class="cat">{{item.category}} · {{item.year}}</span><span>&rarr;</span></div>
                </div>
              </a>
              {% endfor %}
            </div>
            <div class="roll-set" aria-hidden="true">
              {% for item in sorted_cards %}
              <a class="press-card" href="{{item.url}}" target="_blank" rel="noopener">
                <div class="press-thumb img tint-a" style="background-image: url('{{item.image}}');"></div>
                <div class="press-body">
                  <div class="pub">{{item.kicker_text}}</div>
                  <h4>{{item.heading}}</h4>
                  <div class="pbot"><span class="cat">{{item.category}} · {{item.year}}</span><span>&rarr;</span></div>
                </div>
              </a>
              {% endfor %}
            </div>
            <div class="roll-set" aria-hidden="true">
              {% for item in sorted_cards %}
              <a class="press-card" href="{{item.url}}" target="_blank" rel="noopener">
                <div class="press-thumb img tint-a" style="background-image: url('{{item.image}}');"></div>
                <div class="press-body">
                  <div class="pub">{{item.kicker_text}}</div>
                  <h4>{{item.heading}}</h4>
                  <div class="pbot"><span class="cat">{{item.category}} · {{item.year}}</span><span>&rarr;</span></div>
                </div>
              </a>
              {% endfor %}
            </div>
          </div>
        </div>
      </div>

      <!-- desktop - grid flow -->
      <div class="press-grid-wrap">
        <div class="press-grid-inner">
          <div class="press-grid-set">
            {% for item in sorted_cards %}
            <a class="press-card" href="{{item.url}}" target="_blank" rel="noopener">
              <div class="press-thumb img tint-a" style="background-image: url('{{item.image}}');"></div>
              <div class="press-body">
                <div class="pub">{{item.kicker_text}}</div>
                <h4>{{item.heading}}</h4>
                <div class="pbot"><span class="cat">{{item.category}} · {{item.year}}</span><span>&rarr;</span></div>
              </div>
            </a>
            {% endfor %}
          </div>
          <div class="press-grid-set" aria-hidden="true">
            {% for item in sorted_cards %}
            <a class="press-card" href="{{item.url}}" target="_blank" rel="noopener">
              <div class="press-thumb img tint-a" style="background-image: url('{{item.image}}');"></div>
              <div class="press-body">
                <div class="pub">{{item.kicker_text}}</div>
                <h4>{{item.heading}}</h4>
                <div class="pbot"><span class="cat">{{item.category}} · {{item.year}}</span><span>&rarr;</span></div>
              </div>
            </a>
            {% endfor %}
          </div>
          <div class="press-grid-set" aria-hidden="true">
            {% for item in sorted_cards %}
            <a class="press-card" href="{{item.url}}" target="_blank" rel="noopener">
              <div class="press-thumb img tint-a" style="background-image: url('{{item.image}}');"></div>
              <div class="press-body">
                <div class="pub">{{item.kicker_text}}</div>
                <h4>{{item.heading}}</h4>
                <div class="pbot"><span class="cat">{{item.category}} · {{item.year}}</span><span>&rarr;</span></div>
              </div>
            </a>
            {% endfor %}
          </div>
        </div>
      </div>

    </div>
  </div>
</section>

<style>
/* desktop grid press */
.press-grid-wrap { display: none; }

@media (min-width: 1025px) {
  .press-grid-wrap {
    display: block;
    overflow: hidden;
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--line);
    cursor: grab;
    height: 700px;
  }
  .press-grid-wrap.dragging { cursor: grabbing; }
  .press-grid-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    will-change: transform;
  }
  .press-grid-set {
    display: contents;
  }
  .press-grid-wrap .press-card {
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
}
</style>

<script>
(function(){
  var wrap = document.querySelector('.press-grid-wrap'); if(!wrap) return;
  var inner = wrap.querySelector('.press-grid-inner');
  if(!inner) return;
  var mq = window.matchMedia('(max-width:1024px)');
  var listH=0, pos=0, vel=0, raf=null, moved=false;
  function mod(x,m){ return ((x%m)+m)%m; }
  function measure(){
    var allCards = inner.querySelectorAll('.press-card');
    var count = Math.round(allCards.length / 3);
    if(!count){ listH=2000; return; }
    var firstCard = allCards[0];
    var lastCardInSet = allCards[count-1];
    if(firstCard && lastCardInSet){
      listH = lastCardInSet.getBoundingClientRect().bottom - firstCard.getBoundingClientRect().top;
    } else {
      listH = 2000;
    }
  }
  function render(){
    if(!listH) measure();
    inner.style.transform='translateY('+(-mod(pos,listH))+'px)';
  }
  function momentum(){
    if(Math.abs(vel)<0.15){ vel=0; raf=null; return; }
    pos+=vel; vel*=0.93; render(); raf=requestAnimationFrame(momentum);
  }
  var down=false, lastY=0, startY=0, startPos=0;
  wrap.addEventListener('pointerdown',function(e){
    down=true; moved=false; startY=lastY=e.clientY; startPos=pos; vel=0;
    if(raf){ cancelAnimationFrame(raf); raf=null; }
    wrap.classList.add('dragging');
  });
var DRAG_SPEED = 1.6; // tweak: 1 = 1:1, higher = faster

wrap.addEventListener('pointermove',function(e){
  if(!down) return;
  var dy=e.clientY-startY;
  if(Math.abs(dy)>4){
    if(!moved){
      moved=true;
      try{ wrap.setPointerCapture(e.pointerId); }catch(_){}
    }
  }
  vel=-(e.clientY-lastY)*DRAG_SPEED; lastY=e.clientY;
  pos=startPos-dy*DRAG_SPEED; render();
});
  function end(){ if(!down) return; down=false; wrap.classList.remove('dragging'); if(!raf) raf=requestAnimationFrame(momentum); }
  wrap.addEventListener('pointerup',end);
  wrap.addEventListener('pointercancel',end);
  wrap.addEventListener('wheel',function(e){
    if(mq.matches) return;
    var rect=wrap.getBoundingClientRect();
    if(e.clientY<rect.top||e.clientY>rect.bottom) return;
    if(raf){cancelAnimationFrame(raf);raf=null;}
    pos+=e.deltaY; render();
    e.preventDefault();
  },{passive:false});
  wrap.querySelectorAll('a').forEach(function(a){ a.addEventListener('click',function(e){ if(moved) e.preventDefault(); }); });
  window.addEventListener('resize',function(){ measure(); render(); });
  window.addEventListener('load',function(){ setTimeout(function(){ measure(); render(); },100); });
  document.fonts.ready.then(function(){ measure(); render(); });
})();

// mobile JS
(function(){
  var col = document.querySelector('.press-cols-mob .press-col--left');
  if(!col) return;
  var inner = col.querySelector('.press-col-inner');
  if(!inner) return;
  var lset = inner.querySelector('.roll-set');
  var listH=0, pos=0, vel=0, raf=null, moved=false;
  function mod(x,m){ return ((x%m)+m)%m; }
  function measure(){ listH = lset ? lset.offsetHeight : 2000; }
  function render(){
    if(!listH) measure();
    inner.style.transform='translateY('+(-(listH+mod(pos,listH)))+'px)';
  }
  function momentum(){
    if(Math.abs(vel)<0.15){ vel=0; raf=null; return; }
    pos+=vel; vel*=0.93; render(); raf=requestAnimationFrame(momentum);
  }
  var down=false, lastY=0, startY=0, startPos=0;
  col.addEventListener('pointerdown',function(e){
    down=true; moved=false; startY=lastY=e.clientY; startPos=pos; vel=0;
    if(raf){ cancelAnimationFrame(raf); raf=null; }
  });
  col.addEventListener('pointermove',function(e){
    if(!down) return;
    var dy=e.clientY-startY;
    if(Math.abs(dy)>4){
      if(!moved){
        moved=true;
        try{ col.setPointerCapture(e.pointerId); }catch(_){}
      }
    }
    vel=-(e.clientY-lastY); lastY=e.clientY;
    pos=startPos-dy; render();
  });
  function end(){ if(!down) return; down=false; if(!raf) raf=requestAnimationFrame(momentum); }
  col.addEventListener('pointerup',end);
  col.addEventListener('pointercancel',end);
  col.querySelectorAll('a').forEach(function(a){ a.addEventListener('click',function(e){ if(moved) e.preventDefault(); }); });
  window.addEventListener('load',function(){ setTimeout(function(){ measure(); render(); },100); });
  document.fonts.ready.then(function(){ measure(); render(); });
})();
</script>