@extends('layouts.app')
@section('title', 'Research & Observations | Saritha Aravinda')
@section('content')
<section class="section-space border-b border-grey-200"><div class="shell pt-10" data-reveal><x-section-eyebrow>Research & Observations</x-section-eyebrow><h1 class="display-1 max-w-6xl">Ideas Shape Better Decisions.</h1><p class="body-lg mt-8 max-w-2xl">Independent observations on Bengaluru’s residential landscape, evolving workplaces, and the forces shaping the city’s future.</p></div></section>
<section class="section-space"><div class="shell"><div class="grid gap-px bg-grey-200 md:grid-cols-2 lg:grid-cols-3">
    @forelse($insights as $i => $insight)<article class="editorial-card min-h-[28rem]" data-reveal><div class="flex items-start justify-between"><x-card-icon :name="$insight->title" :tone="$i + 1" /><span class="pt-1 text-[10px] font-semibold uppercase tracking-[.15em] text-grey-600">{{ optional($insight->published_at)->format('M Y') }}</span></div><p class="mt-12 text-[10px] font-semibold uppercase tracking-[.15em] text-grey-600">{{ $insight->category }}</p><h2 class="mt-5 text-4xl leading-tight">{{ $insight->title }}</h2><p class="mt-6 leading-7 text-grey-600">{{ $insight->excerpt }}</p><span class="mt-10 inline-block text-xs font-semibold uppercase tracking-[.15em]">Read More <span aria-hidden="true">→</span></span></article>
    @empty<p class="col-span-3 bg-ivory p-10 text-grey-600">Research notes are being prepared. Please check back soon.</p>@endforelse
</div></div></section>
@endsection