@props([
  'tag',
  'title',
  'image',
  'alt',
  'href' => '#',
  'sub' => null,
])

{{-- Card de servicio destacado: imagen a sangre + banda cálida inferior con tag
     pill, headline y "See more →". Un item del grid 2×2 de x-home.services. --}}
<a href="{{ $href }}" class="md:h-104 group relative block h-80 overflow-hidden">
  <img src="{{ $image }}" alt="{{ $alt }}"
    class="absolute inset-0 h-full w-full object-cover transition duration-500 group-hover:scale-105" />

  <div class="absolute bottom-9 left-0 w-full">
    <span
      class="bg-brand/70 backdrop-blur-sm text-cream relative z-20 -mb-4 block w-fit px-7 py-2 text-sm font-semibold uppercase tracking-[0.18em]">
      {{ $tag }}
    </span>
    <div class="bg-warm-line/70 border-brand/70 border-l-4 px-7 py-6 backdrop-blur-sm">
      <h3 class="card-title text-cream font-bold uppercase leading-tight">
        {{ $title }}
      </h3>
      <p class="text-cream flex items-center gap-1.5 font-semibold">
        See more <x-lucide-arrow-right class="h-4 w-4" />
      </p>
      @if ($sub)
        <p class="text-cream/60 mt-1 text-xs">— {{ $sub }}</p>
      @endif
    </div>
  </div>
</a>