@include('profile.partials.section-head')
{{-- Horizontal snap scroller on mobile (85% cards), 2-up grid from 768px. --}}
<div class="pf-scroller">
@foreach ($d['items'] as $item)
  @php($tag = $item['href'] ? 'a' : 'article')
  <div class="pf-scroller-item">
  <{{ $tag }} class="iq-card {{ $item['href'] ? 'is-link' : '' }}" style="overflow:hidden;display:flex;flex-direction:column;height:100%" @if($item['href']) href="{{ $item['href'] }}" {!! $target !!} @endif>
    <div style="height:120px;background:{{ $item['tint'] }};position:relative;border-bottom:1px solid var(--border-subtle)">
      @if ($item['image_url'])
        <img src="{{ $item['image_url'] }}" alt="" loading="lazy" style="width:100%;height:100%;object-fit:cover">
      @else
        @if ($item['kind'])<span class="iq-overline" style="position:absolute;left:16px;top:14px">{{ $item['kind'] }}</span>@endif
        @if ($item['year'])<span class="iq-serif" style="position:absolute;right:16px;bottom:6px;font-size:56px;line-height:1;color:var(--ink);opacity:.18">{{ $item['year'] }}</span>@endif
      @endif
    </div>
    <div style="padding:20px;display:flex;flex-direction:column;gap:8px">
      <div class="iq-row" style="justify-content:space-between"><h3 class="iq-card-title">{{ $item['title'] }}</h3>@if($item['href'])<span class="go"><x-iq.icon name="arrowUpRight" /></span>@endif</div>
      @if ($item['description'])<p class="iq-card-desc">{{ $item['description'] }}</p>@endif
      @if ($item['tags'])<div class="iq-row" style="gap:6px;margin-top:4px">@foreach ($item['tags'] as $chip)<span class="iq-badge">{{ $chip }}</span>@endforeach</div>@endif
    </div>
  </{{ $tag }}>
  </div>
@endforeach
</div>