@extends('layouts.app')
@section('title', $post->title.' — '.setting('site_name'))
@section('meta_description', $post->excerpt)
@section('content')
<section style="background:rgb(15,22,36);" class="pt-24 pb-14">
    <div class="max-w-3xl mx-auto px-5 lg:px-8">
        <nav class="text-white/50 text-sm font-body mb-5"><a href="/" class="hover:text-white">Home</a> / <a href="{{ route('news') }}" class="hover:text-white">News</a></nav>
        <span class="text-[11px] font-bold tracking-[0.2em] uppercase font-body" style="color:#39c5bb;">{{ $post->category }}</span>
        <h1 class="font-heading font-extrabold text-white mt-3 mb-4 leading-tight" style="font-size:clamp(1.9rem,4vw,2.8rem);">{{ $post->title }}</h1>
        <div class="flex items-center gap-3 text-white/50 text-sm font-body">
            <span>{{ $post->author }}</span><span>•</span><span>{{ $post->published_at?->format('d M Y') }}</span>
        </div>
    </div>
</section>
<section class="section-white py-16">
    <div class="max-w-3xl mx-auto px-5 lg:px-8">
        @if($post->image)<div class="rounded-2xl overflow-hidden mb-10 aspect-[16/9] bg-gray-100"><img src="{{ media($post->image) }}" class="w-full h-full object-cover"></div>@endif
        <div class="prose-article font-body text-gray-700 leading-relaxed" style="font-size:1.05rem;line-height:1.8;">
            {!! $post->body !!}
        </div>
    </div>
</section>
@if($recent->count())
<section class="section-snow py-16">
    <div class="max-w-7xl mx-auto px-5 lg:px-8">
        <h2 class="font-heading font-extrabold text-gray-900 text-2xl mb-8">More News</h2>
        <div class="grid md:grid-cols-3 gap-7">
            @foreach($recent as $r)
                <a href="{{ route('news.show',$r) }}" class="card-lift hover-raise rounded-2xl overflow-hidden bg-white reveal group" style="border:1px solid rgba(0,0,0,.07);">
                    <div class="aspect-[16/10] overflow-hidden bg-gray-100"><img src="{{ media($r->image) }}" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"></div>
                    <div class="p-5"><h3 class="font-heading font-bold text-gray-900 leading-snug">{{ $r->title }}</h3></div>
                </a>
            @endforeach
        </div>
    </div>
</section>
@endif
@endsection