{% assign sorted_cards = include.cards %}
{% assign left_cards = '' | split: '' %}
{% assign right_cards = '' | split: '' %}

{% for item in sorted_cards %}
  {% assign mod = forloop.index | modulo: 2 %}
  {% if mod == 1 %}
    {% assign left_cards = left_cards | push: item %}
  {% else %}
    {% assign right_cards = right_cards | push: item %}
  {% endif %}
{% endfor %}

<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 only - single col, all items -->
      <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 only - two cols -->
      <div class="press-cols press-cols-desk">

        <!-- left col -->
        <div class="press-col press-col--left">
          <div class="press-col-inner">
            <div class="roll-set">
              {% for item in left_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 left_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 left_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>

        <!-- right col -->
        <div class="press-col press-col--right">
          <div class="press-col-inner">
            <div class="roll-set">
              {% for item in right_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 right_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 right_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>
  </div>
</section>


<script>
// desktop JS
(function(){
  var cols = document.querySelector('.press-cols-desk'); if(!cols) return;
  var li = document.querySelector('.press-cols-desk .press-col--left .press-col-inner');
  var ri = document.querySelector('.press-cols-desk .press-col--right .press-col-inner');
  if(!li||!ri) return;
  var lset = li.querySelector('.roll-set');
  var rset = ri.querySelector('.roll-set');
  var card = li.querySelector('.press-card');
  var mq = window.matchMedia('(max-width:1024px)');
  var lH=0, rH=0, offset=0, pos=0, vel=0, raf=null, moved=false;
  function mod(x,m){ return ((x%m)+m)%m; }
  function measure(){
    lH = lset ? lset.offsetHeight : 2000;
    rH = rset ? rset.offsetHeight : 2000;
    offset = card ? card.offsetHeight : 0;
  }
function render(){
  if(!lH) measure();
  li.style.transform='translateY('+(-(lH+mod(pos,lH)))+'px)';
  ri.style.transform='translateY('+(-(rH+mod(pos,rH)))+'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;
  cols.addEventListener('pointerdown',function(e){
    down=true; moved=false; startY=lastY=e.clientY; startPos=pos; vel=0;
    if(raf){ cancelAnimationFrame(raf); raf=null; }
    cols.classList.add('dragging');
    try{ cols.setPointerCapture(e.pointerId); }catch(_){}
  });
  cols.addEventListener('pointermove',function(e){
    if(!down) return;
    var dy=e.clientY-startY; if(Math.abs(dy)>4) moved=true;
    vel=-(e.clientY-lastY); lastY=e.clientY;
    pos=startPos-dy; render();
  });
  function end(){ if(!down) return; down=false; cols.classList.remove('dragging'); if(!raf) raf=requestAnimationFrame(momentum); }
  cols.addEventListener('pointerup',end);
  cols.addEventListener('pointercancel',end);
  cols.addEventListener('wheel',function(e){
    if(mq.matches) return;
    var rect=cols.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});
  cols.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(){
  if(!window.matchMedia('(max-width:1024px)').matches) return;
  var inner = document.querySelector('.press-cols-mob .press-col-inner');
  if(!inner) return;
  var lset = inner.querySelector('.roll-set');
  var card = inner.querySelector('.press-card');
  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;
  var col = inner.parentElement;
  col.addEventListener('pointerdown',function(e){ down=true; moved=false; startY=lastY=e.clientY; startPos=pos; vel=0; if(raf){cancelAnimationFrame(raf);raf=null;} try{col.setPointerCapture(e.pointerId);}catch(_){} });
  col.addEventListener('pointermove',function(e){ if(!down) return; var dy=e.clientY-startY; if(Math.abs(dy)>4) moved=true; 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.addEventListener('wheel',function(e){ if(raf){cancelAnimationFrame(raf);raf=null;} pos+=e.deltaY; render(); e.preventDefault(); },{passive:false});
  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>