{{--
    Wrapper for a rendered block: anchor target for in-page navigation and consistent vertical rhythm.
    A section's own background (SectionAppearance, ADR-047) overrides the block's tone. Its scoped CSS holds only hex
    values, numbers and an unquoted selector, so the escaped echo below outputs it unchanged.
--}}
@props(['vm', 'tone' => 'default', 'spacing' => true])
@php
    $look = $vm->appearance;
    $tone = $look?->tone() ?? $tone;
@endphp
@if ($look?->css())
    <style nonce="{{ Vite::cspNonce() }}">{{ $look->css() }}</style>
@endif
<section @if ($vm->anchor) id="{{ $vm->anchor }}" @endif data-block="{{ $vm->key }}"
         @if ($vm->heading) aria-label="{{ strip_tags($vm->heading) }}" @endif
         @if ($look?->selector()) data-section-style="{{ $look->selector() }}" @endif
         {{ $attributes->class([
             'section-y' => $spacing,
             'bg-surface' => $tone === 'surface',
             'surface-inverse' => $tone === 'navy',
             'relative isolate overflow-hidden' => $look?->image !== null,
             'scroll-mt-24',
         ]) }}>
    @if ($look?->image)
        <x-media.image :media="$look->image" alt="" conversion="hero" sizes="100vw" class="absolute inset-0 -z-10 size-full object-cover" />
        <div data-section-overlay aria-hidden="true" class="absolute inset-0 -z-10"></div>
    @endif
    {{ $slot }}
</section>