/* Hero del hub de oficios (/industries/home-services/): mosaico de cuatro fotos enlazadas a la derecha
   (componentes/hero-mosaico-oficios.php). Se carga tras ficha-sector.css y solo en los hubs con mosaico
   (inc/sectores.php, arg_tema_recursos_mosaico_oficios). Columnas: las de la cabecera con llamada
   (.pag-cabecera__rejilla--con-llamada, 664 | 520 desde 1024). Por debajo de 1024, bajo el texto en
   2 × 2 (cuadradas hasta 599; 4:3 de 600 a 1023, para no empujar la página). Solo variables de tokens.css. */

.hero-oficios { min-width: 0; }
.hero-oficios__rejilla {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-12);
	margin: 0; padding: 0; list-style: none;
}
.hero-oficios__tesela {
	position: relative; overflow: hidden; aspect-ratio: 1 / 1; min-width: 0;
	border-radius: var(--radius-md); background: var(--arg-neutral-100); box-shadow: var(--shadow-card);
}
.hero-oficios__tesela picture, .hero-oficios__img { display: block; width: 100%; height: 100%; }
.hero-oficios__img { object-fit: cover; }
/* El pie cubre la tesela entera: en las enlazadas, toda la foto es el enlace (área táctil grande). El
   nombre va ARRIBA: en todas las fotos el teléfono que suena está en el tercio de abajo y una etiqueta
   abajo lo tapaba (medido a 1440: «Electricians» encima del móvil). Un velo arriba para leerlo. */
.hero-oficios__pie {
	position: absolute; inset: 0; z-index: 1; display: flex; align-items: flex-start; padding: var(--sp-8);
	border-radius: inherit; color: var(--arg-white); text-decoration: none;
	background: linear-gradient(to bottom, rgba(21, 26, 23, .45), rgba(21, 26, 23, 0) 40%);
}
.hero-oficios__nombre {
	display: inline-flex; align-items: center; gap: var(--sp-4); max-width: 100%; min-height: 32px; padding: var(--sp-4) var(--sp-12);
	border-radius: var(--radius-pill); background: var(--arg-ink); color: var(--arg-white);
	font-family: var(--arg-font-mono); font-size: var(--fs-12); line-height: 1.2; text-transform: uppercase; letter-spacing: var(--ls-caps);
	overflow-wrap: anywhere;
}
.hero-oficios__flecha { display: inline-flex; flex: none; }
.hero-oficios__flecha svg { width: 14px; height: 14px; }
.hero-oficios__enlace:focus-visible { outline: 3px solid var(--arg-focus-ring); outline-offset: -3px; }
.hero-oficios__enlace:focus-visible .hero-oficios__nombre { background: var(--arg-white); color: var(--arg-ink); }

@media (min-width: 600px) and (max-width: 1023px) {
	.hero-oficios__tesela { aspect-ratio: 4 / 3; }
}
@media (min-width: 600px) {
	.hero-oficios__pie { padding: var(--sp-12); }
	.hero-oficios__nombre { font-size: var(--fs-14); }
}
@media (min-width: 1024px) {
	.hero-oficios { align-self: center; }
	.hero-oficios__rejilla { gap: var(--sp-16); }
}

/* Algo que tocar: al pasar o enfocar, la tesela sube un poco, gana sombra y la foto se acerca; el
   nombre se invierte. Con «reducir movimiento», solo el cambio de sombra y de color (sin desplazar). */
.hero-oficios__tesela--enlace { transition: box-shadow .25s ease; }
.hero-oficios__tesela--enlace:hover, .hero-oficios__tesela--enlace:focus-within { box-shadow: var(--shadow-pop); }
.hero-oficios__enlace:hover .hero-oficios__nombre { background: var(--arg-white); color: var(--arg-ink); }
@media (prefers-reduced-motion: no-preference) {
	.hero-oficios__tesela:not(:first-child) { animation: hero-oficios-funde .6s ease-out both; animation-delay: calc(.15s + var(--i, 0) * .12s); }
	.hero-oficios__tesela--enlace { transition: box-shadow .25s ease, transform .25s ease; }
	.hero-oficios__tesela--enlace .hero-oficios__img { transition: transform .6s cubic-bezier(.2, .6, .2, 1); }
	.hero-oficios__tesela--enlace:hover, .hero-oficios__tesela--enlace:focus-within { transform: translateY(-4px); }
	.hero-oficios__tesela--enlace:hover .hero-oficios__img, .hero-oficios__tesela--enlace:focus-within .hero-oficios__img { transform: scale(1.06); }
	.hero-oficios__flecha { transition: transform .25s ease; }
	.hero-oficios__enlace:hover .hero-oficios__flecha, .hero-oficios__enlace:focus-visible .hero-oficios__flecha { transform: translateX(3px); }
}
@keyframes hero-oficios-funde { from { opacity: 0; } to { opacity: 1; } }