/*V 1.0 Shared Service Cards - hace clicable toda la tarjeta mediante enlace extendido. Todo cuelga de .card-clickable, asi que en las paginas que no la usan este archivo no hace nada.*/

/* === 1. La tarjeta pasa a ser zona clicable: contenedor de posicionamiento estable y cursor de mano === */
/* El position:relative va explicito porque el del sitio solo existe dentro de .animated-item.scrolled:hover */
.card-clickable {position:relative; cursor:pointer;}

/* === 2. Capa invisible que extiende el enlace del titulo a toda la superficie de la tarjeta === */
.card-clickable .card-link::after {content:""; position:absolute; inset:0; z-index:1;}

/* === 3. Cualquier otro enlace de la tarjeta queda por encima de la capa y sigue funcionando === */
.card-clickable a:not(.card-link) {position:relative; z-index:2;}

/* === 4. Foco de teclado: el contorno rodea la tarjeta entera, no solo el texto del titulo === */
/* El color se puede cambiar por pagina con --card-focus (Tesla lo necesita blanco por su fondo negro) */
.card-link:focus-visible {outline:3px solid var(--card-focus, var(--primary-black)); outline-offset:3px;}
.card-clickable:has(.card-link:focus-visible) {outline:3px solid var(--card-focus, var(--primary-black)); outline-offset:3px;}
.card-clickable:has(.card-link:focus-visible) .card-link:focus-visible {outline:none;}