/* =============================================================================
 * UBICACIÓN:		/assets/css/pages/03-directory-groups.css
 * ARCHIVO:		03-directory-groups.css
 * DESCRIPCIÓN TÉCNICA:	Ajustes específicos del directorio de grupos (/groups)
 *			sobre la base visual compartida de directorios.
 *			Refuerza metadatos y lectura visual del listado de grupos
 *			sin contaminar el resto de directorios.
 *			Corrección UX F12:
 *			- selectores scopeados al directorio de grupos
 *			- eliminación de estilos no usados
 *			- mejor estabilidad visual en móvil
 * DESCRIPCIÓN FÁCIL:	Retoques visuales propios de grupos para que se vean
 *			más claros y profesionales sin afectar a members, clubs
 *			ni teams.
 * =============================================================================
 * ÍNDICE
 * 1. Scope del directorio de grupos
 * 2. Card de grupos
 * 3. Meta de miembros y admin
 * 4. Responsive
 * =============================================================================
 */

/* =============================================================================
 * 1. SCOPE DEL DIRECTORIO DE GRUPOS
 * ============================================================================= */

main.directory-page:has(form[action="/groups"]) .entity-grid {
	align-items: start;
}

/* =============================================================================
 * 2. CARD DE GRUPOS
 * ============================================================================= */

main.directory-page:has(form[action="/groups"]) .entity-card__title {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	flex-wrap: wrap;
}

main.directory-page:has(form[action="/groups"]) .entity-card__body .entity-card__meta {
	font-weight: 600;
}

main.directory-page:has(form[action="/groups"]) .entity-card__body .entity-card__submeta {
	max-width: 100%;
}

/* =============================================================================
 * 3. META DE MIEMBROS Y ADMIN
 * ============================================================================= */

main.directory-page:has(form[action="/groups"]) .entity-card__meta,
main.directory-page:has(form[action="/groups"]) .entity-card__submeta {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

main.directory-page:has(form[action="/groups"]) .entity-card__submeta .fa-user-shield {
	flex: 0 0 auto;
}

/* =============================================================================
 * 4. RESPONSIVE
 * ============================================================================= */

@media (max-width: 420px) {
	main.directory-page:has(form[action="/groups"]) .entity-card__title {
		align-items: flex-start;
	}
}