@extends('layouts.subweb')

@section('title', $page->meta_title ?? $page->title)
@section('meta_description', $page->meta_description ?? $page->excerpt)

@section('content')

{{-- Featured Image --}}
@if ($page->featured_image_url)
<div style="height:360px; overflow:hidden;">
    <img src="{{ $page->featured_image_url }}" alt="{{ $page->title }}"
         style="width:100%; height:100%; object-fit:cover;">
</div>
@endif

<div style="max-width:800px; margin:0 auto; padding:60px 2rem;">
    <h1 style="margin-bottom:16px;">{{ $page->title }}</h1>
    @if ($page->excerpt)
        <p style="font-size:18px; color:var(--muted); margin-bottom:40px; line-height:1.6;">
            {{ $page->excerpt }}
        </p>
    @endif

    @if ($page->content)
        <div class="page-content">
            {!! $page->content !!}
        </div>
    @endif
</div>

@endsection

@push('styles')
<style>
.page-content h2 { font-size:24px; margin:32px 0 12px; }
.page-content h3 { font-size:20px; margin:24px 0 10px; }
.page-content p  { color:var(--muted); line-height:1.75; margin-bottom:16px; }
.page-content ul, .page-content ol { padding-left:24px; color:var(--muted); line-height:1.75; margin-bottom:16px; }
.page-content img { max-width:100%; border-radius:12px; margin:24px 0; }
.page-content a  { color:var(--brand-primary, var(--accent)); }
</style>
@endpush