/* Bloque Voluntarios — rejilla de fotografías. Usa los tokens del theme con
   fallback para que se vea bien también fuera del theme La Heroica. */
.lht-voluntarios {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1.4rem;
	grid-template-columns: repeat(var(--lht-v-cols, 4), 1fr);
}
.lht-voluntarios--cols-2 { --lht-v-cols: 2; }
.lht-voluntarios--cols-3 { --lht-v-cols: 3; }
.lht-voluntarios--cols-4 { --lht-v-cols: 4; }
.lht-voluntarios--cols-5 { --lht-v-cols: 5; }
.lht-voluntarios--cols-6 { --lht-v-cols: 6; }

.lht-voluntario {
	margin: 0;
	text-align: center;
}
.lht-voluntario__foto {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 6px;
	background: var(--wp--preset--color--paper, #EFEFEF);
	box-shadow: 0 6px 18px rgba(63, 12, 17, 0.10);
	border-bottom: 3px solid var(--wp--preset--color--gold, #BA9E60);
}
.lht-voluntario__foto img,
.lht-voluntario__ph {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.lht-voluntario__nombre {
	margin: 0.6rem 0 0;
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-weight: 700;
	font-size: 0.98rem;
	line-height: 1.2;
	color: var(--wp--preset--color--ink, #1A1A1A);
}
.lht-voluntario__cargo {
	margin: 0.15rem 0 0;
	font-size: 0.78rem;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--wp--preset--color--red, #C3360E);
}
/* Variante angular: la foto se recorta con el «gallardete» (pico inferior),
   forma derivada de la estrella del escudo — Norma Gráfica 2026, §07 «Formas y
   diagramación». El clip-path recorta tanto la foto como el placeholder. */
.lht-voluntarios--forma-angular .lht-voluntario__foto {
	aspect-ratio: 4 / 5;
	border-radius: 0;
	border-bottom: 0;
	box-shadow: none;
	background: transparent;
	clip-path: polygon(0 0, 100% 0, 100% 82%, 50% 100%, 0 82%);
}
.lht-voluntarios--forma-angular .lht-voluntario__nombre {
	margin-top: 0.4rem;
}

.lht-voluntarios-empty {
	color: #6b6b6b;
	font-style: italic;
}
@media ( max-width: 782px ) {
	.lht-voluntarios { grid-template-columns: repeat(2, 1fr) !important; }
}
@media ( max-width: 480px ) {
	.lht-voluntarios { grid-template-columns: 1fr !important; }
}